/* tokens.css */
/*
 * CPSCount design tokens.
 * The var(--legacy, fallback) bridges let the six shop themes (which set
 * --bg-deep, --text-bright, --text-main, --accent-*) keep recolouring
 * migrated pages until Phase 2 rebuilds them.
 */
/* ── Faces ──────────────────────────────────────────────────────────
   Two voices, one family name each, stitched per script with
   unicode-range for the bundled Latin/Cyrillic/Arabic/Devanagari faces:
   CPS Display = Teko (Latin, Devanagari) + Oswald (Cyrillic)
   CPS Body    = Outfit (Latin) + Inter (Cyrillic)
   Arabic gets its own pair under :lang(ar) (Noto Kufi Arabic for
   headings, IBM Plex Sans Arabic for text). Files: assets/fonts/files,
   provenance in assets/fonts/README-fonts.md. Generated; edit by hand
   only to add a weight. size-adjust matches Oswald and Inter cap heights
   to Teko and Outfit (measured: 81→64, 73→70) so mixed-script lines
   share one cap line. */
@font-face { font-family: 'CPS Display'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/files/teko-devanagari-400-normal.woff2?v=2d3e14b0) format('woff2'); unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09; }
@font-face { font-family: 'CPS Display'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/files/teko-latin-ext-400-normal.woff2?v=46424dc8) 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'CPS Display'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/files/teko-latin-400-normal.woff2?v=ae203a25) 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: 'CPS Display'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/files/teko-devanagari-500-normal.woff2?v=6b233eea) format('woff2'); unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09; }
@font-face { font-family: 'CPS Display'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/files/teko-latin-ext-500-normal.woff2?v=16296737) 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'CPS Display'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/files/teko-latin-500-normal.woff2?v=a3eac853) 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: 'CPS Display'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/files/teko-devanagari-600-normal.woff2?v=29ec479b) format('woff2'); unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09; }
@font-face { font-family: 'CPS Display'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/files/teko-latin-ext-600-normal.woff2?v=993af2c1) 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'CPS Display'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/files/teko-latin-600-normal.woff2?v=edf7765c) 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: 'CPS Display'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/files/teko-devanagari-700-normal.woff2?v=471cd792) format('woff2'); unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09; }
@font-face { font-family: 'CPS Display'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/files/teko-latin-ext-700-normal.woff2?v=3925263c) 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'CPS Display'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/files/teko-latin-700-normal.woff2?v=8aefa8b6) 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: 'CPS Display'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/files/oswald-cyrillic-500-normal.woff2?v=659a071f) format('woff2'); size-adjust: 79%; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'CPS Display'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/files/oswald-cyrillic-600-normal.woff2?v=39207fa2) format('woff2'); size-adjust: 79%; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'CPS Body'; font-style: normal; font-weight: 300; font-display: swap; src: url(/assets/fonts/files/outfit-latin-ext-300-normal.woff2?v=3cd7c63b) 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'CPS Body'; font-style: normal; font-weight: 300; font-display: swap; src: url(/assets/fonts/files/outfit-latin-300-normal.woff2?v=41d21f5c) 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: 'CPS Body'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/files/outfit-latin-ext-400-normal.woff2?v=0458c8bb) 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'CPS Body'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/files/outfit-latin-400-normal.woff2?v=692b8f64) 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: 'CPS Body'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/files/outfit-latin-ext-500-normal.woff2?v=ffe08eb6) 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'CPS Body'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/files/outfit-latin-500-normal.woff2?v=55b958c2) 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: 'CPS Body'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/files/outfit-latin-ext-600-normal.woff2?v=eefe472c) 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'CPS Body'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/files/outfit-latin-600-normal.woff2?v=94ed9918) 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: 'CPS Body'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/files/outfit-latin-ext-700-normal.woff2?v=bf9203f9) 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'CPS Body'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/files/outfit-latin-700-normal.woff2?v=9130a9f8) 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: 'CPS Body'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/files/inter-cyrillic-ext-400-normal.woff2?v=bf1da00a) format('woff2'); size-adjust: 96%; unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'CPS Body'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/files/inter-cyrillic-400-normal.woff2?v=d9401374) format('woff2'); size-adjust: 96%; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'CPS Body'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/files/inter-cyrillic-ext-500-normal.woff2?v=6b88c9f6) format('woff2'); size-adjust: 96%; unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'CPS Body'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/files/inter-cyrillic-500-normal.woff2?v=e29f8be0) format('woff2'); size-adjust: 96%; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'CPS Body'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/files/inter-cyrillic-ext-600-normal.woff2?v=29d59834) format('woff2'); size-adjust: 96%; unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'CPS Body'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/files/inter-cyrillic-600-normal.woff2?v=b5c6b808) format('woff2'); size-adjust: 96%; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'CPS Body'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/files/inter-cyrillic-ext-700-normal.woff2?v=d0df0522) format('woff2'); size-adjust: 96%; unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'CPS Body'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/files/inter-cyrillic-700-normal.woff2?v=0fc7fdb8) format('woff2'); size-adjust: 96%; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'CPS Arabic Display'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/files/noto-kufi-arabic-arabic-600-normal.woff2?v=a4bc0710) format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; }
@font-face { font-family: 'CPS Arabic Display'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/files/noto-kufi-arabic-arabic-700-normal.woff2?v=6c6e1026) format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; }
@font-face { font-family: 'CPS Arabic Body'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/files/ibm-plex-sans-arabic-arabic-400-normal.woff2?v=a9cefdca) format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; }
@font-face { font-family: 'CPS Arabic Body'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/files/ibm-plex-sans-arabic-arabic-600-normal.woff2?v=9e5c019d) format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; }
/* Raw Teko/Outfit families (formerly the render-blocking /assets/fonts.css?v=b9215682):
   canvas games draw with ctx.font = "... Teko" / "... Outfit" and a few
   stylesheets name them as var() fallbacks. Same files as CPS Display/Body,
   so nothing downloads twice. */
@font-face { font-family: 'Teko'; font-style: normal; font-weight: 300; font-display: swap; src: url(/assets/fonts/files/teko-devanagari-300-normal.woff2?v=ab5d27b3) format('woff2'); unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09; }
@font-face { font-family: 'Teko'; font-style: normal; font-weight: 300; font-display: swap; src: url(/assets/fonts/files/teko-latin-ext-300-normal.woff2?v=a6c41dde) 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Teko'; font-style: normal; font-weight: 300; font-display: swap; src: url(/assets/fonts/files/teko-latin-300-normal.woff2?v=19109a25) 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: 'Teko'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/files/teko-devanagari-400-normal.woff2?v=2d3e14b0) format('woff2'); unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09; }
@font-face { font-family: 'Teko'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/files/teko-latin-ext-400-normal.woff2?v=46424dc8) 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Teko'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/files/teko-latin-400-normal.woff2?v=ae203a25) 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: 'Teko'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/files/teko-devanagari-500-normal.woff2?v=6b233eea) format('woff2'); unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09; }
@font-face { font-family: 'Teko'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/files/teko-latin-ext-500-normal.woff2?v=16296737) 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Teko'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/files/teko-latin-500-normal.woff2?v=a3eac853) 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: 'Teko'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/files/teko-devanagari-600-normal.woff2?v=29ec479b) format('woff2'); unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09; }
@font-face { font-family: 'Teko'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/files/teko-latin-ext-600-normal.woff2?v=993af2c1) 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Teko'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/files/teko-latin-600-normal.woff2?v=edf7765c) 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: 'Teko'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/files/teko-devanagari-700-normal.woff2?v=471cd792) format('woff2'); unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09; }
@font-face { font-family: 'Teko'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/files/teko-latin-ext-700-normal.woff2?v=3925263c) 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Teko'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/files/teko-latin-700-normal.woff2?v=8aefa8b6) 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: 'Outfit'; font-style: normal; font-weight: 300; font-display: swap; src: url(/assets/fonts/files/outfit-latin-ext-300-normal.woff2?v=3cd7c63b) 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300; font-display: swap; src: url(/assets/fonts/files/outfit-latin-300-normal.woff2?v=41d21f5c) 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: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/files/outfit-latin-ext-400-normal.woff2?v=0458c8bb) 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/files/outfit-latin-400-normal.woff2?v=692b8f64) 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: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/files/outfit-latin-ext-500-normal.woff2?v=ffe08eb6) 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/files/outfit-latin-500-normal.woff2?v=55b958c2) 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: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/files/outfit-latin-ext-600-normal.woff2?v=eefe472c) 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/files/outfit-latin-600-normal.woff2?v=94ed9918) 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: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/files/outfit-latin-ext-700-normal.woff2?v=bf9203f9) 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/files/outfit-latin-700-normal.woff2?v=9130a9f8) 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: 'Outfit'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/files/outfit-latin-ext-800-normal.woff2?v=3b7c3b63) 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/files/outfit-latin-800-normal.woff2?v=0f569873) 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; }

:root {
  color-scheme: dark;

  /* Original deep-space ink keeps saturated accents crisp instead of washing
     every surface in blue. Equipped and authored themes supply their own palette. */
  --bg: var(--bg-deep, #05030d);
  --bg-raised: #0c0917;
  /* Distinct deck levels and clearer seams preserve the deep-space ground while
     making adjacent cards and secondary controls easier to separate. */
  --surface-1: rgb(19 14 32 / 0.96);
  --surface-2: rgb(29 21 43 / 0.97);
  --surface-3: rgb(43 32 61 / 0.98);
  --surface-1-solid: #130e20;
  --border: rgb(160 140 255 / 0.24);
  --border-strong: rgb(170 150 255 / 0.42);
  --glass-hi: inset 0 1px 0 rgb(255 255 255 / 0.07);
  --glass-sheen: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0) 42%);
  --blur: blur(18px) saturate(150%);
  /* Shared chrome follows the equipped palette instead of forcing violet. */
  --chrome-header: color-mix(in srgb, var(--bg-raised) 90%, transparent);
  --chrome-surface: color-mix(in srgb, var(--bg-raised) 96%, transparent);
  /* Form-control outline: at least 3.37:1 on the brightest default surface. */
  --border-control: #8276c4;

  /* Text */
  --text: var(--text-bright, #f2f0ff);
  --text-muted: var(--text-main, #cdd2e1);
  --text-faint: #9c94c5; /* At least 4.7:1 even on the opaque third surface. */

  /* Brand and accents */
  --primary: var(--primary-color, #a78bfa);
  --primary-hover: #bba5fc;
  --primary-ink: #120a2e;
  /* Pocket Games partner row: a fixed brand identity (deep green Deck-family fill), not a theme colour. */
  --pocket-fill: #0d2a1f;
  --pocket-edge: #1e5a3e;
  --pocket-edge-strong: #2f8a5e;
  --cyan: var(--accent-cyan, #00f0ff);
  --pink: var(--accent-pink, #ff00e5);
  --lime: var(--accent-lime, #bfff00);
  --amber: var(--accent-amber, #ffb000);
  --coral: var(--accent-coral, #ff6b6b);
  --violet: #a78bfa;
  --blue: #4cb8ff;
  --success: #3ee08f;
  --danger: #ff5a6e;
  --focus: #c4b5fd;
  /* Full-saturation signature neon: live play moments only (pads, readouts,
     stamps); chrome keeps the softened accents above. */
  --neon-cyan: #00F0FF;
  --neon-pink: #FF00E5;
  --neon-lime: #BFFF00;
  --neon-amber: #FFB000;
  --primary-glow: rgb(167 139 250 / 0.4);
  --neon: var(--accent);   /* the section's signature neon; see [data-accent] below */
  --accent: var(--primary);
  --accent-ink: var(--primary-ink);

  /* Type */
  --font-display: 'CPS Display', 'Teko', 'Arial Narrow', sans-serif;
  --font-body: 'CPS Body', 'Outfit', system-ui, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', Consolas, monospace;
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.35rem + 0.75vw, 1.95rem);
  --step-3: clamp(2rem, 1.7rem + 1.5vw, 2.9rem);
  --step-4: clamp(2.6rem, 2.1rem + 2.5vw, 4.2rem);
  --step-5: clamp(3.4rem, 2.6rem + 4vw, 6rem);
  --step-h1: clamp(1.9rem, 1.5rem + 1.6vw, 2.8rem);
  /* Fixed steps for the drawer, whose width does not follow the viewport: two sizes, never fluid. */
  --step-drawer-1: 1.2rem;
  --step-drawer-2: 1.55rem;

  /* Space (4px base) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --space-7: 40px; --space-8: 48px; --space-9: 64px; --space-10: 80px; --space-11: 96px; --space-12: 128px;

  /* Layout */
  --container: 1120px;
  --container-prose: 720px;
  --gutter: 16px;
  --header-h: 64px;
  --nav-h: 0px;          /* desktop category row */
  --header-stuck: var(--header-h); /* header height left on screen when scrolled */
  --tap: 44px;

  /* Shape and depth */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px;
  --shadow-color: color-mix(in srgb, var(--bg) 75%, black);
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 2px 8px color-mix(in srgb, var(--shadow-color) 35%, transparent);
  --shadow-2: 0 4px 12px color-mix(in srgb, var(--shadow-color) 50%, transparent), 0 12px 32px color-mix(in srgb, var(--shadow-color) 45%, transparent);
  --shadow-3: 0 12px 28px color-mix(in srgb, var(--shadow-color) 60%, transparent), 0 28px 64px color-mix(in srgb, var(--shadow-color) 50%, transparent);
  --scrim: rgb(4 2 18 / 0.72);

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-med: 260ms;

  /* Stacking (legacy-compatible: toast stays above everything) */
  --z-header: 1000;
  --z-overlay: 1900;
  --z-drawer: 2000;
  --z-modal: 3000;
  --z-toast: 10003;
}

@media (min-width: 768px) { :root { --gutter: 24px; } }
@media (min-width: 1080px) { :root { --gutter: 32px; --header-h: 72px; --nav-h: 52px; --header-stuck: var(--nav-h); } }
/* Grow the useful column in steps rather than filling an ultrawide monitor.
   1600px leaves 176px per side; 1920px leaves 240px, and 2560px leaves
   520px for ad rails and breathing room. Existing in-content slots keep their caps. */
@media (min-width: 1440px) { :root { --container: 1248px; } }
@media (min-width: 1760px) { :root { --container: 1440px; } }
@media (min-width: 2240px) { :root { --container: 1520px; } }

/* Category accents: set --accent locally; --accent-ink is the text colour on it */
[data-accent="cyan"] { --accent: var(--cyan); }
[data-accent="pink"] { --accent: var(--pink); }
[data-accent="amber"] { --accent: var(--amber); }
[data-accent="coral"] { --accent: var(--coral); }
[data-accent="lime"] { --accent: var(--lime); }
[data-accent="violet"] { --accent: var(--violet); }
/* Signature neon per section colour, for live readouts and pads only. */
[data-accent="cyan"] { --neon: var(--neon-cyan); }
[data-accent="pink"] { --neon: var(--neon-pink); }
[data-accent="amber"] { --neon: var(--neon-amber); }
[data-accent="lime"] { --neon: var(--neon-lime); }
[data-accent="coral"], [data-accent="violet"] { --neon: var(--accent); }
/* An equipped shop theme brings its own curated accents: signature moments
   follow them instead of the default theme's neon. */
:root[data-theme]:not([data-theme="default"]) { --neon-cyan: var(--cyan); --neon-pink: var(--pink); --neon-lime: var(--lime); --neon-amber: var(--amber); }

/* Arabic (the sa locale renders lang="ar") swaps both voices; Latin
   runs inside Arabic text still fall through to the CPS pair. */
:root:lang(ar) {
  --font-display: 'CPS Arabic Display', 'CPS Display', sans-serif;
  --font-body: 'CPS Arabic Body', 'CPS Body', sans-serif;
}

/* CJK and Hindi body glyphs use deliberate platform fallbacks; the bundled
   CPS faces continue to render mixed Latin runs without downloading large fonts. */
:root:lang(zh) { --font-body: 'CPS Body', 'Noto Sans CJK SC', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; --font-display: 'CPS Display', 'Noto Sans CJK SC', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; }
:root:lang(ja) { --font-body: 'CPS Body', 'Noto Sans CJK JP', 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo', sans-serif; --font-display: 'CPS Display', 'Noto Sans CJK JP', 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo', sans-serif; }
:root:lang(hi) { --font-body: 'CPS Body', 'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', sans-serif; }

/* base.css */
/* ── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scrollbar-color: var(--border-strong) var(--bg);
  scrollbar-width: thin;
  scroll-padding-block-start: calc(var(--header-stuck) + var(--space-4));
}
body {
  min-block-size: 100vh;
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  background-color: var(--bg);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  caret-color: var(--primary);
  accent-color: var(--primary);
}
body > main, body > #main { flex: 1 0 auto; }
img, picture, svg, video, canvas { display: block; max-inline-size: 100%; }
img, video { block-size: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button, a, [role="button"] { touch-action: manipulation; }
button, [role="button"] { -webkit-user-select: none; user-select: none; }

:where(ul, ol)[class] { list-style: none; padding: 0; }
p, li, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
[hidden] { display: none !important; }
.hidden { display: none !important; }

/* ── Starfield (canvas drawn by shell.js; gradient shows before it paints) */
#star-canvas {
  position: fixed;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  z-index: -1;
  pointer-events: none;
  background: var(--bg, #05030d);
}

/* ── Browser surfaces ───────────────────────────────────────────────── */
::selection { background: color-mix(in srgb, var(--primary) 38%, transparent); color: var(--text); }
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
::-webkit-scrollbar { inline-size: 10px; block-size: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 2px solid var(--bg);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--border-control); }
::placeholder { color: var(--text-faint); opacity: 1; }

/* ── Type ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  color: var(--text);
  text-wrap: balance;
}
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: 0.01em;
}
h1 { font-size: var(--step-4); text-transform: uppercase; }
h2 { font-size: var(--step-3); text-transform: uppercase; }
h3 { font-size: var(--step-2); line-height: 1.05; }
h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
h4 { font-size: var(--step-1); }
h5, h6 { font-size: var(--step-0); }
.display {
  font-size: var(--step-5);
  line-height: 0.88;
  text-transform: uppercase;
  color: var(--text);
}
/* CPS Display covers Latin, Devanagari and Cyrillic (Oswald); Arabic
   swaps to Noto Kufi via tokens. Scripts with tall marks get room to
   breathe; CJK has no condensed display face, so it uses the body voice. */
:is(:lang(ar), :lang(ru), :lang(zh), :lang(ja), :lang(hi)) :is(h1, h2, h3, .display) {
  line-height: 1.15;
}
:lang(ar) :is(h1, h2, h3, h4, h5, h6, .display) {
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 700;
}
:is(:lang(zh), :lang(ja)) :is(h1, h2, h3, .display) {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.01em;
}
:is(:lang(zh), :lang(ja)) h1 { font-size: var(--step-3); }
:is(:lang(zh), :lang(ja)) h2 { font-size: var(--step-2); }
:is(:lang(zh), :lang(ja)) h3 { font-size: var(--step-1); }
:is(:lang(zh), :lang(ja)) .display { font-size: var(--step-4); }
/* Japanese headings break between phrases, never inside a katakana word
   (auto-phrase; <wbr> in long compounds is the fallback); a single
   unbreakable run still wraps rather than overflowing at 360px. */
:lang(ja) :is(h1, h2, h3, .display) { word-break: auto-phrase; overflow-wrap: anywhere; }
:lang(ar) body, body:lang(ar) { line-height: 1.75; }

p { text-wrap: pretty; }
strong, b { color: var(--text); font-weight: 600; }
small { font-size: var(--step--1); }
.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-muted);
  max-inline-size: 60ch;
}
.muted { color: var(--text-faint); }
.tabular { font-variant-numeric: tabular-nums; }

a {
  color: var(--primary);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, var(--primary) 45%, transparent);
  transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}
a:hover { color: var(--primary-hover); text-decoration-color: currentColor; }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }
hr { border: 0; border-block-start: 1px solid var(--border); margin-block: var(--space-6); }

/* ── Utilities ──────────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: calc(var(--z-toast) + 1);
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap);
  padding-inline: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--primary-ink);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-2);
  transform: translateY(calc(-100% - var(--space-4)));
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus-visible { transform: none; outline-offset: 3px; }
.skip-link:hover { color: var(--primary-ink); }

/* ── Layout primitives ──────────────────────────────────────────────── */
.container {
  inline-size: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--prose { max-inline-size: calc(var(--container-prose) + 2 * var(--gutter)); }
.section { padding-block: var(--space-10); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack > * { margin: 0; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--space-5);
}
@media (min-width: 1080px) {
  .section { padding-block: var(--space-12); }
}
/* Opt-in: a section that continues the one above without a second gap */
.section--flush { padding-block-start: 0; }

/* ── Reduced motion: everything still, nothing removed ──────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* shell.css */
/* ── Shared icon glyph (Font Awesome is loaded on every page) ───────── */
.site-nav__trigger::after,
.drawer-sub > summary::after,
.lang-option.active::after,
#coins-display::before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-style: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

/* Shell lists carry no bullets or indent */
:where(.site-header, .side-drawer, .site-footer) :where(ul, ol) { list-style: none; padding: 0; margin: 0; }

/* Shell icon buttons are .btn.btn--icon.btn--ghost (components.css) */
.site-header .btn--icon,
.side-drawer .btn--icon,
.modal-header .btn--icon { font-size: 1.05rem; }

/* ── Header ─────────────────────────────────────────────────────────── */
.site-header {
  --header-pad: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  block-size: var(--header-h);
  padding-inline: var(--header-pad);
  background: var(--bg-raised);
  border-block-end: 1px solid var(--border);
}

.logo-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-block-size: var(--tap);
  text-decoration: none;
}
/* The wordmark is the one place gradient text is allowed. */
.logo {
  display: inline-block;
  direction: ltr;
  unicode-bidi: isolate;
  padding-block-start: 0.14em;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cyan);
  background: linear-gradient(100deg, var(--cyan) 0%, var(--amber) 55%, var(--pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Phones: tighter gaps so logo, XP chip, language and menu fit in 360px. */
@media (max-width: 479.98px) {
  .site-header { gap: var(--space-2); }
}

/* ── Partner mark: CPSCount × Manga Yugen ─────────────────────────────
   build/shell/partner-mark.mjs. Header-left lockup [CPSCOUNT] × [logo +
   MANGA YUGEN]; the community bar and the News header reuse
   .partner-mark / .partner-mark__x. The lockup reads left to right in
   every locale (it is a brand lockup, like the wordmark itself). */
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-inline-size: 0;
  direction: ltr;
}
.logo-icon { display: none; inline-size: 30px; block-size: 30px; flex: none; }
.partner-mark__x {
  flex: none;
  color: var(--text-faint);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
  padding-block-start: 0.1em;
  user-select: none;
}
.partner-mark {
  --partner-orange: #ff8a1f;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-block-size: var(--tap);
  min-inline-size: var(--tap);
  border-radius: var(--radius-md);
  color: var(--partner-orange);
  text-decoration: none;
}
.partner-mark:hover { color: #ffa24d; }
/* 44px wide hit areas for the two brand links where they draw narrower (the 28px Manga Yugen logo, the 30px CPSCount
   icon): an invisible ::before reaching into the lockup's gaps (the × between them is not interactive). */
.partner-mark, .site-header .logo-link { position: relative; }
.partner-mark::before { content: ''; position: absolute; inset-block: 0; inset-inline: -8px; }
.site-header .logo-link::before { content: ''; position: absolute; inset-block: 0; inset-inline: -6px; }
.partner-mark__logo,
.partner-mark__logo img { display: block; inline-size: 28px; block-size: 28px; flex: none; }
.partner-mark__logo img { transition: transform var(--dur-med) var(--ease); }
.partner-mark:hover .partner-mark__logo img { transform: rotate(-8deg) scale(1.06); }
.partner-mark__name {
  padding-block-start: 0.14em;
  color: inherit;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
/* The name shows where the row has room for it (measured like the phone
   rules below): from 640px until the Community / Shop links join the row
   at 860, and in the two-row desktop header. Elsewhere [CPSCOUNT] × [logo]. */
@media (max-width: 639.98px), (min-width: 860px) and (max-width: 1079.98px) {
  .site-header .partner-mark__name {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .site-header .partner-mark { justify-content: center; }
}
/* Phones. The wordmark shows wherever the row has room for it, guests and members alike (Z2, measured with every
   control present: XP chip at level 999 and a 9-digit balance, the inbox with "99+", language, menu; en, de,
   sa and hi). With the 36px controls below and a 1.3rem wordmark, a row of three controls (a guest's sign-in,
   language, menu; a member's inbox, language, menu below 360px, where the XP chip steps aside) fits it from
   340px, and a member's five (the XP chip joins at 360) from 375px. Only where it does not fit (everyone below 340, a
   member from 360 to 374) the CPSCount icon stands in. :where() keeps a theme's own .logo size (retro) in charge. */
@media (max-width: 599.98px) {
  .site-header .brand-lockup { gap: 6px; }
  .site-header .partner-mark { min-inline-size: 28px; }
  .site-header :where(.logo-link .logo) { font-size: 1.3rem; }
}
@media (max-width: 339.98px) {
  .site-header .logo-link .logo { display: none; }
  .site-header .logo-icon { display: block; }
}
@media (min-width: 360px) and (max-width: 374.98px) {
  html[data-auth="in"] .site-header .logo-link .logo { display: none; }
  html[data-auth="in"] .site-header .logo-icon { display: block; }
}
/* A member's five controls need 381.7px with the full wordmark: the row, plus the menu key's hit area, which reaches
   5px past the key and counts towards the page's scroll width. The keys' 8px gaps are what keeps each key's 44px of
   its own, so from 375 until the row fits the wordmark gives up the 6.7px. */
@media (min-width: 375px) and (max-width: 381.98px) {
  /* No transition: under reduced motion components keep a near-zero transition on every property, and until its next
     frame the wordmark would still measure at its full size. */
  html[data-auth="in"] .site-header :where(.logo-link .logo) { font-size: 1.18rem; transition: none; }
}
/* Signed in below 360px, the inbox takes the XP chip's place (the drawer's account row keeps the name, level and
   account link), so language and menu stay in the row. */
@media (max-width: 359.98px) {
  html[data-auth="in"] .site-header .xp-chip { display: none !important; } /* beats .xp-chip.hidden */
}
@media (prefers-reduced-motion: reduce) {
  .partner-mark:hover .partner-mark__logo img { transform: none; }
}

/* Desktop navigation (≥1080) */
.site-nav { display: none; }
.site-nav > ul { display: flex; align-items: stretch; gap: 2px; block-size: 100%; }
.site-nav > ul > li { display: flex; align-items: center; }
.site-nav__trigger,
.site-nav > ul > li > a,
.header-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: var(--tap);
  padding-inline: var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.site-nav__trigger::after {
  content: '\f107';
  font-size: 0.8em;
  color: var(--text-faint);
  transition: transform var(--dur-med) var(--ease), color var(--dur-fast) var(--ease);
}
.site-nav > ul > li > a:hover,
.header-link:hover,
.site-nav__trigger:hover,
.site-nav__trigger[aria-expanded="true"] {
  color: var(--text);
  background: var(--surface-2);
}
.site-nav__trigger[aria-expanded="true"]::after { transform: rotate(180deg); color: var(--accent); }
/* The category underline belongs to the text, so the rotating chevron stays clean. */
.site-nav__label { text-underline-offset: 0.45em; text-decoration-thickness: 2px; }
.site-nav__trigger:is(:hover, [aria-expanded="true"], [data-current="true"]) > .site-nav__label {
  text-decoration-line: underline;
  text-decoration-color: var(--accent);
}
.site-nav__trigger::before {
  content: '';
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.site-nav__panel {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-start: var(--header-pad);
  inline-size: min(60rem, 100% - 2 * var(--header-pad));
  max-block-size: calc(100dvh - var(--header-h) - var(--nav-h) - var(--space-8));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-5) var(--space-5) var(--space-4);
  border: 1px solid var(--border-strong);
  border-block-start-color: var(--accent);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(var(--accent), var(--accent)) top / 100% 2px no-repeat padding-box,
    var(--surface-2);
  box-shadow: var(--shadow-3);
  opacity: 0;
  visibility: hidden;
  translate: 0 -6px;
  transition:
    opacity var(--dur-fast) var(--ease),
    translate var(--dur-med) var(--ease),
    visibility 0s linear var(--dur-fast);
}
/* Panels open from shell.js (trigger aria-expanded, closed by Escape,
   outside click or focus leaving the nav) and on hover for fine pointers;
   shell.js sets .is-dismissed on Escape/click-close so hover can't hold a
   dismissed panel open until the pointer leaves the nav.
   :focus-within on the panel only keeps a JS-opened panel up while the
   pointer leaves it; it never opens one on its own. */
@media (hover: hover) and (pointer: fine) {
  .site-nav:not(.is-dismissed) .site-nav__item:hover > .site-nav__panel { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
  .site-nav:not(.is-dismissed) .site-nav__item:hover > .site-nav__trigger {
    color: var(--text);
    background: var(--surface-2);
  }
  .site-nav:not(.is-dismissed) .site-nav__item:hover > .site-nav__trigger > .site-nav__label {
    text-decoration-line: underline;
    text-decoration-color: var(--accent);
  }
  .site-nav:not(.is-dismissed) .site-nav__item:hover > .site-nav__trigger::after { transform: rotate(180deg); color: var(--accent); }
  /* Invisible bridge over the gap between header and panel */
  .site-nav__item:hover::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    block-size: var(--space-3);
  }
}
.site-nav__trigger[aria-expanded="true"] + .site-nav__panel,
.site-nav__trigger[aria-expanded="true"] + .site-nav__panel:focus-within {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition-delay: 0s;
}
/* Explicit grid (composition in header.mjs panelBlocks): families get a
   cell each, the flat list spans the rest of its row in matching columns. */
.site-nav__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2) var(--space-5);
  align-items: start;
}
.site-nav__flat {
  grid-column: span var(--span, 1);
  columns: var(--span, 1);
  column-gap: var(--space-5);
}
.site-nav__panel li { break-inside: avoid; }
.site-nav__panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-block-size: var(--tap);
  padding-inline: 10px;
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.site-nav__panel a > i {
  flex-shrink: 0;
  inline-size: 1.25em;
  text-align: center;
  color: var(--accent);
}
.site-nav__panel a:hover { background: var(--surface-3); color: var(--text); }
/* A family name opens its own landing page; the underline and arrow distinguish it from a heading. */
.site-nav__family-link > span {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  text-underline-offset: 0.22em;
}
.site-nav__family-link:hover > span { text-decoration-color: var(--accent); }
.site-nav__family-link > .site-nav__family-arrow {
  inline-size: 16px;
  block-size: 16px;
  margin-inline-start: auto;
  color: var(--accent);
}
[dir="rtl"] .site-nav__family-arrow { transform: scaleX(-1); }
.site-nav__sublist {
  margin-inline-start: calc(10px + 0.625em);
  padding-inline-start: calc(0.625em + 10px - 1px);
  border-inline-start: 1px solid var(--border-strong);
  margin-block-end: var(--space-1);
}
.site-nav__sublist a { color: var(--text-muted); font-size: var(--step--1); font-weight: 400; }
.site-nav__sublist a > i { display: none; }

/* ≥1080: two rows. Brand row (logo, quick links, XP, actions) scrolls
   away; the category row stays pinned, so long translations never have
   to share a line with the account controls. */
@media (min-width: 1080px) {
  .site-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: var(--header-h) var(--nav-h);
    column-gap: var(--space-6);
    row-gap: 0;
    block-size: auto;
    inset-block-start: calc(-1 * var(--header-h));
  }
  .site-header::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-start: var(--header-h);
    block-size: 1px;
    background: var(--border);
  }
  .brand-lockup { grid-area: 1 / 1; }
  .site-header__right { grid-area: 1 / 2; }
  .site-nav {
    display: flex;
    grid-area: 2 / 1 / 3 / 3;
    align-self: stretch;
    min-inline-size: 0;
    margin-inline-start: calc(-1 * var(--space-3));
  }
}

/* Pinned-row actions: once the brand row has scrolled away (shell.js sets
   .is-stuck), language and menu reappear at the end of the category row so
   the drawer is always one click away on desktop. */
.site-header__stuck { display: none; }
@media (min-width: 1080px) {
  .site-header.is-stuck .site-header__stuck {
    display: flex;
    grid-area: 2 / 2;
    justify-self: end;
    align-self: center;
    gap: 2px;
    animation: shell-fade var(--dur-med) var(--ease);
  }
}

/* Right cluster */
.site-header__right {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-inline-start: auto;
}
.header-link { display: none; }
/* From 860px (not 768): the CPSCount × Manga Yugen lockup needs the room
   (ru, signed in with a 9-digit balance, overflowed 768..~840). */
@media (min-width: 860px) { .header-link { display: inline-flex; } }
/* The compact desktop row shares room with a member's XP balance and inbox. */
@media (min-width: 860px) and (max-width: 959.98px) {
  .header-link { padding-inline: var(--space-1); }
  .site-header :is(.partner-mark, .partner-mark__x) { display: none; }
}
/* Each destination carries its own voice: Community's noticeboard and News's serif nameplate. */
.header-link[data-section="community"] {
  gap: var(--space-2);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.header-link[data-section="community"] > .line-icon { inline-size: 18px; block-size: 18px; color: var(--primary); }
.header-link[data-section="community"] > span {
  padding-block: 5px 3px;
  border-block-end: 2px solid var(--primary);
}
.header-link[data-section="news"] {
  color: var(--text);
  font-family: Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
}
.header-link[data-section="news"] > span { padding-block: 4px; border-block: 1px solid var(--border-strong); }
/* Phones (below 860px): Community and News on a slim row under the header (header.mjs renderSubnav), the phone
   counterpart of the desktop category row. It is not sticky: it scrolls away with the page like the desktop brand
   row that carries the same links, so the stuck header stays one 64px row. No fill of its own (themes paint the
   header, not this row): Mist labels with violet icons over the ground, a Seam rule under it. --subnav-h is its
   height, for layouts that fit the first screen (hub.css). */
:root { --subnav-h: 0px; }
.site-subnav { display: none; }
@media (max-width: 859.98px) {
  :root { --subnav-h: 45px; }
  .site-subnav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    block-size: var(--subnav-h);
    padding-inline: max(0px, var(--gutter) - var(--space-3));
    border-block-end: 1px solid var(--border);
  }
  .site-subnav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--tap);
    padding-inline: var(--space-3);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
  }
  .site-subnav__link > i { color: var(--primary); font-size: 0.95em; }
  .site-subnav__link:hover { color: var(--text); background: var(--surface-2); }
}
/* Community unread count on the header's Community link (data-unread is set by community/main.mjs). */
.header-link[data-unread]::after { content: attr(data-unread); display: inline-grid; place-items: center; min-inline-size: 1.5em; block-size: 1.5em; padding-inline: 0.4em; border-radius: var(--radius-pill); background: var(--primary); color: var(--primary-ink); font-size: 0.75em; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }

#user-welcome:not(.hidden) {
  display: none;
  align-items: center;
  gap: var(--space-3);
  max-inline-size: 11rem;
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 600;
}
#display-username { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-separator { inline-size: 1px; block-size: 20px; background: var(--border-strong); }
@media (min-width: 1080px) {
  #user-welcome:not(.hidden) { display: inline-flex; flex-shrink: 1; min-inline-size: 0; }
  /* A long name gives way (ellipsis) before the row overflows next to the lockup. */
  .site-header__right { min-inline-size: 0; max-inline-size: 100%; }
}

/* XP chip: level badge, progress bar, xp numbers, coins.
   font-size:0 swallows the bare "/" text node between the xp numbers;
   it is redrawn on #xp-next so it can hide with them. */
.xp-chip {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap);
  margin-inline: var(--space-2);
  padding-block: 5px;
  padding-inline: 5px var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-1);
  color: var(--text);
  font-size: 0;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.xp-chip:hover { border-color: var(--border-strong); background: var(--surface-2); color: var(--text); }
/* Legacy page scripts (home.js, game-system.js) still add .hidden to
   #xp-bar-container for guests; the chip is part of every site header,
   so it stays visible (guests see level 1, empty bar). */
.xp-chip.hidden { display: inline-flex !important; }
#user-level {
  display: inline-grid;
  place-items: center;
  min-inline-size: 32px;
  block-size: 32px;
  padding-inline: 7px;
  padding-block-start: 0.16em;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--primary-ink);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.xp-chip__bar {
  display: block;
  inline-size: 56px;
  block-size: 4px;
  margin-inline: 10px 8px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
}
#xp-fill {
  display: block;
  width: 0;
  block-size: 100%;
  border-radius: inherit;
  background: var(--primary);
}
#xp-next::before { content: '/'; margin-inline: 1px; }
#coins-display {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: var(--space-3);
  font-size: var(--step--1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
#coins-display::before { content: '\f51e'; font-size: 0.95em; color: var(--amber); }
#coins-display:empty { display: none; }
/* Exact xp numbers stay for screen readers; the chip shows the bar.
   Full numbers live on the account page. */
#xp-current, #xp-next {
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Guests get the same chip at level 1 with an empty bar (the markup ships
   "1"; page scripts overwrite it for signed-in players), so the header
   never changes shape on sign-in and the account link reads as progress. */
@media (max-width: 767.98px) {
  .xp-chip__bar { display: none; }
  #coins-display { margin-inline-start: var(--space-2); }
  .xp-chip { margin-inline: var(--space-1); padding-inline-end: 10px; }
  .xp-chip:has(#coins-display:empty) { padding-inline-end: 5px; }
}

/* ── Drawer ─────────────────────────────────────────────────────────── */
.overlay-bg {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--scrim);
  animation: shell-fade var(--dur-med) var(--ease);
}
/* Keep the backdrop mounted through closing, so a quick reopen reverses its current opacity. */
#menu-overlay {
  opacity: 1;
  visibility: visible;
  animation: none;
  transition: opacity var(--dur-med) var(--ease), visibility 0s;
}
#menu-overlay.hidden {
  display: block !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease), visibility 0s linear var(--dur-med);
}
.side-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  background: var(--bg-raised);
  border-inline-start: 1px solid var(--border);
  box-shadow: var(--shadow-3);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-med) var(--ease), visibility 0s linear var(--dur-med);
}
[dir="rtl"] .side-drawer:not(.open) { transform: translateX(-100%); }
.side-drawer.open {
  transform: none;
  visibility: visible;
  transition: transform var(--dur-med) var(--ease), visibility 0s;
}
@media (min-width: 480px) { .side-drawer { inline-size: 360px; } }

.drawer-header {
  display: grid;
  grid-template-columns: var(--tap) minmax(0, 1fr) var(--tap);
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  min-block-size: var(--header-h);
  padding-inline: var(--space-3);
  border-block-end: 1px solid var(--border);
}
.drawer-header .btn--icon { min-inline-size: var(--tap); min-block-size: var(--tap); }
.drawer-header h2 {
  min-inline-size: 0;
  margin: 0;
  text-align: center;
  font-size: var(--step-2);
  line-height: 1;
  padding-block-start: 0.12em;
}

/* The search sits inside the nav, just above the category groups (drawer.mjs); it filters only .drawer-link. */
.drawer-search {
  flex-shrink: 0;
  margin: var(--space-4) var(--space-4) var(--space-2);
  min-block-size: var(--tap);
  padding-inline: 40px var(--space-3);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  background: var(--surface-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238a83b5' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3.5 3.5'/%3E%3C/svg%3E") no-repeat left 14px center;
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease);
}
[dir="rtl"] .drawer-search { background-position: right 14px center; }
.drawer-search:hover { border-color: var(--primary); }
.drawer-search:focus-visible { border-color: var(--primary); }

.drawer-nav-compact {
  flex: 0 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4) var(--space-8);
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color var(--dur-med) var(--ease);
}
/* The nav is the drawer's only scroller; its thumb shows on hover,
   keyboard focus or touch scroll, never as a permanent second rail. */
.drawer-nav-compact:is(:hover, :focus-within, :active) { scrollbar-color: var(--border-strong) transparent; }

/* While the drawer or language modal is open the page behind stays put
   (class set by shell.js); the gutter is kept so nothing shifts. */
html.shell-locked { overflow: hidden; scrollbar-gutter: stable; }

/* News Serif 600 for the drawer's News tile (the News area's own face; latin + cyrillic, other scripts fall back). */
@font-face { font-family: 'News Serif'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/files/source-serif-4-latin-600-normal.woff2?v=d2ebdb22) 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: 'News Serif'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/files/source-serif-4-cyrillic-600-normal.woff2?v=9becb42b) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

/* Drawer top (build/shell/drawer.mjs): account row, Shop · Leaderboards, Community · News, the Manga Yugen and
   Pocket Games rows, then the search and the category groups. */
.drawer-nav-compact > :is(.drawer-account, .partner-row, .drawer-search) { grid-column: 1 / -1; }
.drawer-nav-compact > .drawer-search { margin: var(--space-2) 0 0; }
.drawer-account {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: 56px;
  padding-inline: 10px var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--text);
  text-decoration: none;
}
.drawer-account:hover { border-color: var(--border-strong); background: var(--surface-2); color: var(--text); }
.drawer-account__avatar {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  background: var(--surface-3) center / cover no-repeat;
  color: var(--primary);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1;
}
.drawer-account__avatar > i:empty:not([class]) { display: none; }
.drawer-account__avatar > span { grid-area: 1 / 1; }
#menu-auth-initial:empty { display: none; }
/* Signed in, the avatar shows the picture or the initial only, whatever icon class a page script leaves behind. */
.drawer-account[data-signed-in] #menu-auth-icon { display: none; }
.drawer-account__text { display: flex; flex-direction: column; min-inline-size: 0; }
.drawer-account__name { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.drawer-account__level { color: var(--text-muted); font-size: var(--step--1); }
.drawer-nav-compact > .drawer-tile {
  min-block-size: 48px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text);
}
.drawer-nav-compact > .drawer-tile > i { color: var(--primary); }
.drawer-nav-compact > .drawer-tile:hover { border-color: var(--border-strong); background: var(--surface-2); }
.drawer-nav-compact > .drawer-tile > span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
/* Community keeps its shimmer: a slow violet sheen (with Manga Yugen's row, the only gradients in the shell). */
.drawer-nav-compact > .drawer-tile--community {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: var(--primary);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
}
.drawer-tile--community > span {
  padding-block: 3px;
  border-block-end: 2px solid var(--primary);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.drawer-tile--community::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--primary) 20%, transparent) 48%, transparent 66%);
  transform: translateX(-100%);
}
/* It only runs while the drawer is open, and sweeps in reading direction (right to left under RTL). */
.side-drawer.open .drawer-tile--community::before { animation: drawer-shimmer 6s var(--ease) infinite; }
[dir="rtl"] .drawer-tile--community::before { background: linear-gradient(245deg, transparent 30%, color-mix(in srgb, var(--primary) 20%, transparent) 48%, transparent 66%); transform: translateX(100%); }
[dir="rtl"] .side-drawer.open .drawer-tile--community::before { animation-name: drawer-shimmer-rtl; }
@keyframes drawer-shimmer { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes drawer-shimmer-rtl { 0%, 55% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
/* News: the News area's own voice. Void/Deck fill, 1px violet rule, News Serif; no shimmer, no gradient.
   The serif applies only once the drawer has been opened (shell.js adds .drawer-opened), so pages whose
   drawer stays closed never download source-serif-4 (a visibility:hidden drawer would still fetch it). */
.drawer-nav-compact > .drawer-tile--news { justify-content: center; border-color: var(--primary); background: var(--bg-raised); }
.drawer-tile--news > span { font-family: Georgia, serif; font-size: var(--step-drawer-1); font-weight: 600; letter-spacing: 0; text-transform: none; }
.side-drawer.drawer-opened .drawer-tile--news > span { font-family: 'News Serif', Georgia, serif; }

/* Partner rows (build/shell/partner-mark.mjs): the link fills the row; the i button is its own 44px target. */
.partner-row {
  --partner-ink: #1f0c00;
  --partner-grad: linear-gradient(100deg, #ff9a1f 0%, #ff7a1f 52%, #ff5a1f 100%);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-block-size: 56px;
  overflow: hidden;
  border-radius: var(--radius-md);
  color: var(--partner-ink);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-med) var(--ease), filter var(--dur-fast) var(--ease);
}
.partner-row__link {
  display: flex;
  flex: 1;
  align-self: stretch;
  align-items: center;
  gap: var(--space-3);
  min-inline-size: 0;
  padding-inline: 10px var(--space-2);
  color: inherit;
  text-decoration: none;
}
.partner-row__link:hover { color: inherit; }
.partner-row__link:focus-visible,
.partner-row__info:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
/* On the orange row the violet ring is ~1.3:1; the row's dark ink is 6.1:1 (#ff5a1f) to 8.9:1 (#ff9a1f).
   On the green row the default ring (#c4b5fd on #0d2a1f) is ~9:1. */
.partner-row--my :is(.partner-row__link, .partner-row__info):focus-visible { outline-color: var(--partner-ink); }
.partner-row__info { display: none; }   /* shown only once shell.js can open the info dialog (html.has-info-dialog) */
html.has-info-dialog .partner-row__info {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 44px;
  block-size: 44px;
  margin-inline-end: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.partner-row__info:hover { background: rgb(0 0 0 / 0.14); }
.partner-row__logo {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  background: #1c0b02;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.28), 0 3px 8px -3px rgb(80 20 0 / 0.6);
}
.partner-row__logo img { display: block; inline-size: 34px; block-size: 34px; }
.partner-row__name {
  min-inline-size: 0;
  padding-block-start: 0.14em;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: var(--step-drawer-2);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Manga Yugen: the orange row (the one partner gradient). Dark ink: #1f0c00 on #ff5a1f is 6.1:1, on #ff9a1f 8.9:1. */
.partner-row--my {
  background: var(--partner-grad);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.38), inset 0 -2px 0 rgb(120 30 0 / 0.25), 0 4px 14px -8px rgb(255 106 31 / 0.6);
}
.partner-row--my::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 0.32) 48%, transparent 66%);
  transform: translateX(-100%);
  transition: transform 700ms var(--ease);
}
.partner-row--my:hover {
  transform: translateY(-1px);
  filter: saturate(1.08);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), inset 0 -2px 0 rgb(120 30 0 / 0.25), 0 8px 24px -6px rgb(255 110 31 / 0.75);
}
.partner-row--my:hover::before { transform: translateX(100%); }
.partner-row--my:active { transform: translateY(1px) scale(0.985); box-shadow: inset 0 2px 6px rgb(120 30 0 / 0.35), 0 2px 8px -6px rgb(255 106 31 / 0.6); }
/* Pocket Games: deep green Deck-family fill, Starlight ink, a small black store badge ("Free on Google Play" with the Play triangle); no gradient. */
.partner-row--pg { --partner-ink: var(--text); border: 1px solid var(--pocket-edge); background: var(--pocket-fill); }
.partner-row--pg:hover { border-color: var(--pocket-edge-strong); }
.partner-row--pg .partner-row__logo { overflow: hidden; border-radius: 10px; background: transparent; box-shadow: none; }
.partner-row--pg .partner-row__logo img { inline-size: 40px; block-size: 40px; }
/* The name keeps the full row width (a side-by-side store label cut it to "POCKET GA…" at 390px): logo on the
   left spanning two lines, the name, and "Google Play" small beneath it. */
.partner-row--pg .partner-row__link { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; column-gap: var(--space-3); row-gap: 3px; }
.partner-row--pg .partner-row__logo { grid-row: span 2; }
.partner-row--pg .partner-row__name { align-self: end; }
.partner-row__store { display: inline-flex; align-items: center; gap: 5px; justify-self: start; align-self: start; max-inline-size: 100%; min-block-size: 20px; padding: 1px 7px 1px 5px; overflow: hidden; border: 1px solid #5f6368; border-radius: 4px; background: #000; color: #fff; font-size: 0.78rem; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.partner-row__store > span { overflow: hidden; text-overflow: ellipsis; }
.play-glyph { flex: none; inline-size: 14px; block-size: 14px; }
@media (prefers-reduced-motion: reduce) {
  .partner-row, .partner-row:hover, .partner-row:active { transform: none; }
  .partner-row--my::before { display: none; }
  .drawer-tile--community::before { animation: none; display: none; }
}

.drawer-group { grid-column: 1 / -1; margin-block-start: var(--space-4); }
/* Group heading: the drawer's category heads, reused as .group-heading (404 site map). */
.drawer-group > h2,
.group-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-end: var(--space-1);
  padding-inline: var(--space-3);
  font-size: var(--step-1);
  line-height: 1.4;
  letter-spacing: 0.04em;
}
.drawer-group > h2::before,
.group-heading::before {
  content: '';
  flex-shrink: 0;
  inline-size: 8px;
  block-size: 8px;
  margin-block-end: 0.12em;
  border-radius: 50%;
  background: var(--accent);
}
.drawer-group > h2::after,
.group-heading::after {
  content: '';
  flex: 1;
  block-size: 1px;
  margin-block-end: 0.12em;
  background: var(--border);
}

.drawer-link,
.drawer-sub > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--tap);
  padding-inline: var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.drawer-link > i,
.drawer-sub > summary > i {
  flex-shrink: 0;
  inline-size: 1.25em;
  text-align: center;
  color: var(--accent);
}
.drawer-link:hover,
.drawer-sub > summary:hover { background: var(--surface-2); color: var(--text); }
.drawer-link[aria-current="page"] {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-raised));
  color: var(--text);
  font-weight: 600;
}

.drawer-sub > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.drawer-sub > summary::-webkit-details-marker { display: none; }
.drawer-sub > summary::after {
  content: '\f078';
  margin-inline-start: auto;
  font-size: 0.7em;
  color: var(--text-faint);
  transition: transform var(--dur-med) var(--ease);
}
.drawer-sub[open] > summary { color: var(--text); }
.drawer-sub[open] > summary::after { transform: rotate(180deg); }
.drawer-sub > ul {
  margin-inline-start: calc(var(--space-3) + 0.625em);
  padding-inline-start: calc(0.625em + var(--space-3) - 1px);
  margin-block: 2px var(--space-2);
  border-inline-start: 1px solid var(--border-strong);
}
.drawer-sub > ul .drawer-link { font-size: var(--step--1); }
.drawer-sub > ul .drawer-link > i { color: var(--text-faint); }
.drawer-sub > ul .drawer-link[aria-current="page"] > i { color: var(--accent); }

.drawer-empty {
  padding: var(--space-6) var(--space-5);
  color: var(--text-faint);
  text-align: center;
}

/* ── Language picker (inside the shared .modal-overlay/.modal-box) ─── */
.lang-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
.lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-block-size: 48px;
  padding-inline: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.lang-option:hover { border-color: var(--border-strong); background: var(--surface-3); color: var(--text); }
.lang-option.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, var(--surface-1));
}
.lang-option.active::after { content: '\f00c'; font-size: 0.85em; color: var(--primary); }

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-footer {
  margin-block-start: var(--space-9);
  padding-block: var(--space-9) var(--space-6);
  padding-inline: var(--gutter);
  background: var(--bg-raised);
  border-block-start: 1px solid var(--border);
}
.footer-content,
.footer-bottom {
  max-inline-size: calc(var(--container) - 2 * var(--gutter));
  margin-inline: auto;
}
.footer-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7) var(--space-5);
}
.footer-brand .logo { font-size: var(--step-3); }
.footer-brand p {
  max-inline-size: 34ch;
  margin-block-start: var(--space-2);
  color: var(--text-faint);
  font-size: var(--step--1);
}
.footer-col h2 {
  margin-block-end: var(--space-2);
  font-size: var(--step-1);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.footer-col a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap);
  color: var(--text-muted);
  font-size: var(--step--1);
  text-decoration: none;
}
.footer-col a:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--primary); }
/* Connect: community channels + the support chat button, icon + label.
   Phones: a 2x2 grid of tappable chips; wider: a plain list like the other columns. */
.footer-social {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
.footer-col .footer-social__link {
  --brand: var(--primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  inline-size: 100%;
  min-block-size: var(--tap);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--text-muted);
  font: inherit;
  font-size: var(--step--1);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.footer-social__link[data-brand="telegram"] { --brand: #2aabee; }
.footer-social__link[data-brand="reddit"] { --brand: #ff5722; }
.footer-social__link[data-brand="discord"] { --brand: #7984f5; }
.footer-social__link > i {
  flex: none;
  inline-size: 1.25em;
  color: var(--brand);
  font-size: 1.15em;
  text-align: center;
}
.footer-social__link > span { min-inline-size: 0; overflow-wrap: anywhere; }
.footer-col .footer-social__link:hover {
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  background: color-mix(in srgb, var(--brand) 12%, var(--surface-1));
  color: var(--text);
  text-decoration: none;
}
.footer-social__link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.footer-support[aria-busy="true"] > i { animation: shell-fade 0.8s var(--ease) infinite alternate; }
@media (min-width: 768px) {
  .footer-social { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .footer-col .footer-social__link {
    inline-size: auto;
    justify-self: start;
    padding: 0;
    border: 0;
    background: none;
  }
  .footer-col .footer-social__link:hover { background: none; }
  .footer-col .footer-social__link:hover > span { text-decoration: underline; text-decoration-color: var(--brand); }
}
.footer-bottom {
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--border);
  color: var(--text-faint);
  font-size: var(--step--1);
}
@media (min-width: 768px) {
  .footer-content { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (min-width: 1080px) {
  .footer-content { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: auto; }
}

@keyframes shell-fade { from { opacity: 0; } }

/* Keep all four header controls reachable even with a large signed-in
   balance. The full balance remains available on the account page. Up to
   520px: the keys' 8px gaps (44px hit areas, below) leave no room for a
   nine-digit balance beside the wordmark at 480. */
@media (max-width: 519.98px) {
  .site-header #coins-display { display: none; }
  .site-header .xp-chip { padding-inline-end: 5px; }
}

/* Info dialog (build/shell/info-dialog.mjs): Hull sheet, Strong Seam edge, Floating shadow. */
.info-dialog {
  inline-size: min(100% - 2 * var(--gutter), 26rem);
  max-block-size: calc(100dvh - 2 * var(--space-6));
  margin: auto;   /* the global reset zeroes the UA centering margin */
  padding: 0;
  overflow: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  color: var(--text);
  box-shadow: var(--shadow-3);
}
.info-dialog::backdrop { background: var(--scrim); }
.info-dialog__close { position: absolute; inset-block-start: var(--space-2); inset-inline-end: var(--space-2); }
.info-dialog__body { padding: var(--space-6) var(--space-5) var(--space-5); }
.info-dialog__head { display: flex; align-items: center; gap: var(--space-3); margin-block-end: var(--space-3); padding-inline-end: var(--space-8); }
.info-dialog__logo img { display: block; inline-size: 56px; block-size: 56px; border-radius: 14px; }
.info-dialog__logo--my { display: grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: 50%; background: #1c0b02; }
.info-dialog__logo--my img { inline-size: 46px; block-size: 46px; border-radius: 0; }
.info-dialog__title { margin: 0; font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; line-height: 1; text-transform: uppercase; }
.info-dialog__text { margin: 0 0 var(--space-5); color: var(--text-muted); }
.info-dialog__cta { inline-size: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .info-dialog[open] { animation: info-dialog-in var(--dur-med) var(--ease); }
  @keyframes info-dialog-in { from { opacity: 0; transform: translateY(8px); } }
}

/* Guests see "Sign in", members the XP chip (html[data-auth] from the boot script + profile.mjs). */
html[data-auth="in"] .header-signin,
html:not([data-auth="in"]) .site-header .xp-chip { display: none !important; } /* beats .xp-chip.hidden */
.header-signin__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Drawer account row, guest: the sign-in colours on the full row. */
.drawer-account:not([data-signed-in]) { border-color: transparent; background: var(--primary); color: var(--primary-ink); }
.drawer-account:not([data-signed-in]):hover { background: var(--primary-hover); color: var(--primary-ink); }
.drawer-account:not([data-signed-in]) .drawer-account__avatar { background-color: rgb(18 10 46 / 0.18); color: var(--primary-ink); }

/* Member chip before profile.mjs fills it: no placeholder "1/", same size. */
.site-header .xp-chip:has(#xp-next:empty) { color: transparent; }
.site-header .xp-chip:has(#xp-next:empty) #user-level { visibility: hidden; }

/* ── Site inbox: header button and badge (always loaded) ─────────────────
   assets/site/inbox.mjs fills each header's <span data-inbox-slot> for signed-in visitors; the panel's own styles
   (pages/inbox.css) load with the session or on first open, so guests never fetch them. */
.inbox-slot, .c-bar-inbox, .nw-inbox { display: inline-flex; align-items: center; }
.inbox-slot:empty, .c-bar-inbox:empty, .nw-inbox:empty { display: none; }
/* A returning member (html[data-auth="in"], set before paint) keeps the button's 44px while the session resolves, so the
   header does not shift when inbox.mjs fills the slot; signing out clears data-auth and the empty slot collapses. */
html[data-auth="in"] :is(.inbox-slot, .c-bar-inbox, .nw-inbox):empty { display: inline-flex; inline-size: var(--tap, 44px); block-size: var(--tap, 44px); flex: none; }

/* Header button: a ghost icon button (DESIGN Buttons: Ghost / Icon). */
.ib-button {
  position: relative; display: inline-grid; place-items: center; flex: none;
  inline-size: var(--tap, 44px); block-size: var(--tap, 44px); padding: 0;
  border: 1px solid transparent; border-radius: var(--radius-pill, 999px);
  background: transparent; color: var(--text-muted, #b9b3dc); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast, .14s) var(--ease, ease), color var(--dur-fast, .14s) var(--ease, ease), border-color var(--dur-fast, .14s) var(--ease, ease);
}
@media (hover: hover) { .ib-button:hover { background: var(--surface-2, #1a1540); color: var(--text, #f2f0ff); } }
.ib-button:active { transform: translateY(1px); }
.ib-button:focus-visible { outline: 2px solid var(--focus, #c4b5fd); outline-offset: 2px; }
.ib-button[aria-expanded="true"] { background: var(--surface-2, #1a1540); border-color: var(--border-strong, #463c86); color: var(--text, #f2f0ff); }
.ib-badge {
  position: absolute; inset-block-start: 3px; inset-inline-end: 1px; min-inline-size: 18px; block-size: 18px; padding-inline: 5px;
  border-radius: var(--radius-pill, 999px); background: var(--primary, #a78bfa); color: var(--primary-ink, #120a2e);
  font: 700 12px/18px var(--font-body, system-ui, sans-serif); text-align: center; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--bg-raised, #0d0a24); pointer-events: none;
}
.ib-badge[hidden] { display: none; }
/* News bar: the News Violet Budget allows no violet fill behind text, so the badge there is a Starlight numeral in a
   1px Strong Seam outline pill on the Void ground, set in the News interface face. Main site and Community keep violet. */
.nw-inbox .ib-badge {
  background: var(--bg, #07051a); color: var(--text, #f2f0ff); border: 1px solid var(--border-strong, #463c86);
  font-family: inherit; line-height: 16px; box-shadow: 0 0 0 2px var(--bg, #07051a);
}
/* Counts are numerals: "99+" keeps its order in RTL (sa) instead of reading "+99". */
.ib-badge { direction: ltr; unicode-bidi: isolate; }
/* Inbox-family counts in the Community rail, tab bar and account menu (Messages, Notifications, Invites) wear the bell's pill:
   violet with Void Ink, never the coral gradient of community.css .c-badge. */
.c-rail-link .c-badge, .c-tabbar .c-badge, .c-bar-menu .c-badge { background: var(--primary, #a78bfa); color: var(--primary-ink, #120a2e); box-shadow: none; }
/* The inbox button exists only for a signed-in session, so the site header never shows "Sign in" beside it (the News
   bar does the same in news.mjs). Production keeps the two in step anyway (one Firebase session); this guards the gap. */
.site-header:has([data-inbox-button]) .header-signin { display: none; }

/* ── Header controls: line icons, and below 860px a lighter 36px key ─────
   App chrome draws line icons (DESIGN.md "The Split Icon Rule", build/shell/line-icon.mjs). Below 860px the header
   controls (sign-in, inbox, XP chip, language, menu) are drawn at 36px with 18px glyphs, and each keeps a 44px
   hit area through an invisible ::before reaching 4px past its edge (inset -5px: an absolute box is placed from the
   padding box, inside each key's 1px border): the keys sit 8px apart, so each hit area takes
   its own half of the gap and no two meet (every key answers a full 44x44, elementFromPoint-checked by
   Community/test-site-header.mjs). The Community bar and the News utility row use the same
   proportions (community.css, news.css). */
.line-icon { display: block; flex: none; inline-size: 20px; block-size: 20px; }
.drawer-nav-compact > .drawer-tile > .line-icon { inline-size: 18px; block-size: 18px; color: var(--primary); }
.site-subnav__link > .line-icon { inline-size: 18px; block-size: 18px; color: var(--primary); }
.drawer-account__icon { display: grid; place-items: center; }
.drawer-account__icon > .line-icon { inline-size: 18px; block-size: 18px; }
.partner-row__info > .line-icon { inline-size: 22px; block-size: 22px; }
/* Sound: page scripts report the state on the hidden <i> (fa-volume-up / -high on, -mute / -xmark off). */
#sound-toggle:has(> .line-icon) > i { display: none; }
#sound-toggle > .sound-off,
#sound-toggle:has(> i:is([class*="mute"], [class*="xmark"])) > .sound-on { display: none; }
#sound-toggle:has(> i:is([class*="mute"], [class*="xmark"])) > .sound-off { display: block; }
.header-signin > .line-icon { inline-size: 18px; block-size: 18px; flex: none; }
/* The sign-in glyph (community/icons.mjs signin) points into its door: in RTL the door is on the other side. */
:is(.btn--signin, .btn--signin-quiet, .drawer-account__icon, .nw-account-icon) > svg { stroke-width: 2; }
[dir="rtl"] :is(.btn--signin, .btn--signin-quiet, .drawer-account__icon, .nw-account-icon) > svg, [dir="rtl"] .cw__ico-in { transform: scaleX(-1); }
@media (max-width: 859.98px) {
  .site-header__right { gap: 8px; }
  .site-header__right > :is(.btn--icon, .header-signin, .xp-chip),
  .site-header .ib-button { position: relative; min-block-size: 36px; block-size: 36px; }
  .site-header__right > .btn--icon,
  .site-header .ib-button,
  html[data-auth="in"] .site-header .inbox-slot:empty { inline-size: 36px; block-size: 36px; }
  .site-header__right > :is(.btn--icon, .header-signin, .xp-chip)::before,
  .site-header .ib-button::before { content: ''; position: absolute; inset: -5px; }
  .site-header__right .line-icon { inline-size: 18px; block-size: 18px; }
  .site-header .xp-chip { margin-inline: 0; padding-block: 3px; padding-inline-start: 3px; }
  .site-header #user-level { min-inline-size: 28px; block-size: 28px; padding-inline: 6px; font-size: var(--step-0); }
  .site-header .ib-badge { inset-block-start: -5px; inset-inline-end: -6px; }
}
@media (max-width: 479.98px) {
  .site-header .xp-chip { padding-inline-end: 3px; }
}

/* Compact sign-in for the Community and News bars below 860px (DESIGN.md
   Sign-in Button): a 36px face, transparent, a violet glyph inside a 1px violet hairline, Deck 2 on hover and press.
   The 44px hit area is an invisible ::before 5px past the padding box (inside the 1px border); .community .btn clips by
   default, hence overflow. Below 480px the face is a 36px icon square, the label kept for assistive tech. */
@media (max-width: 859.98px) {
  :is(.c-bar .btn.c-bar-signin, html:not([data-auth="in"]) .nw-bar .nw-account.btn--signin, .nw-bar .nw-account.btn--signin[data-painted]) {
    position: relative; overflow: visible; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-block-size: 36px; block-size: 36px; padding: 0 var(--space-3);
    border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent); border-radius: var(--radius-md);
    background: transparent; color: var(--primary); box-shadow: none;
    font-size: var(--step--1); transform: none;
  }
  :is(.c-bar .btn.c-bar-signin, html:not([data-auth="in"]) .nw-bar .nw-account.btn--signin, .nw-bar .nw-account.btn--signin[data-painted])::before { content: ''; position: absolute; inset: -5px; }
  :is(.c-bar .btn.c-bar-signin, html:not([data-auth="in"]) .nw-bar .nw-account.btn--signin, .nw-bar .nw-account.btn--signin[data-painted]):active { background: var(--surface-2); color: var(--primary); }
  @media (hover: hover) and (pointer: fine) {
    :is(.c-bar .btn.c-bar-signin, html:not([data-auth="in"]) .nw-bar .nw-account.btn--signin, .nw-bar .nw-account.btn--signin[data-painted]):hover { background: var(--surface-2); color: var(--primary); }
  }
  :is(.site-header .header-signin, .c-bar .c-bar-signin, .nw-bar .nw-account.btn--signin):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  :is(.site-header .header-signin, .c-bar .c-bar-signin, .nw-account-icon) svg { inline-size: 18px; block-size: 18px; }
}
@media (max-width: 479.98px) {
  :is(.c-bar .btn.c-bar-signin, html:not([data-auth="in"]) .nw-bar .nw-account.btn--signin, .nw-bar .nw-account.btn--signin[data-painted]) { inline-size: 36px; padding: 0; }
}

/* Site account key: one centered login glyph in a circular face, with the translated name kept for assistive tech. */
.site-header .btn.header-signin {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--tap);
  min-block-size: var(--tap);
  block-size: var(--tap);
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--primary) 65%, var(--border));
  border-radius: var(--radius-pill);
  background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 35%, var(--surface-2)), color-mix(in srgb, var(--pink) 25%, var(--surface-1)));
  color: var(--primary-hover);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 20%, transparent), 0 3px 8px color-mix(in srgb, var(--primary) 12%, transparent);
  transform: none;
}
.site-header .header-signin > .line-icon { inline-size: 20px; block-size: 20px; }
.site-header .btn.header-signin:active { background: var(--primary); color: var(--primary-ink); }
@media (hover: hover) and (pointer: fine) {
  .site-header .btn.header-signin:hover { border-color: var(--primary); background: var(--primary); color: var(--primary-ink); }
}
@media (max-width: 859.98px) {
  .site-header .btn.header-signin { inline-size: 36px; min-block-size: 36px; block-size: 36px; }
  .site-header .header-signin > .line-icon { inline-size: 18px; block-size: 18px; }
}

/* Current location stays visible after the menu closes, including section detail pages. */
.header-link[aria-current], .site-nav__panel a[aria-current] { color: var(--text); background: var(--surface-2); font-weight: 600; }
.site-nav__trigger[data-current="true"] { color: var(--text); }
.drawer-link[aria-current="location"] { background: var(--surface-2); color: var(--text); font-weight: 600; }

/* Shared navigation controls retain their section's layout, with one type/focus language. */
:is(.site-header, .c-bar, .nw-utility, .nw-search) .site-control {
  font-family: var(--font-body); font-size: var(--step--1, .875rem); font-weight: 600; letter-spacing: normal; touch-action: manipulation;
}
:is(.site-header, .c-bar, .nw-bar) :is(.site-control, input[type="search"]):focus-visible {
  outline: 2px solid var(--focus); outline-offset: 3px;
}

/* Search is a shared navigation control, independent of the surrounding editorial/forum treatment. */
:is(.c-bar .c-bar-search, .nw-bar .nw-search) input[type="search"] {
  min-block-size: 44px; border-color: var(--border-control); border-radius: var(--radius-sm);
  background: var(--surface-1); color: var(--text); font: 400 16px/1.2 var(--font-body); box-shadow: none;
}
:is(.c-bar .c-bar-search, .nw-bar .nw-search) input[type="search"]::placeholder { color: var(--text-muted); }
:is(.c-bar .c-bar-search, .nw-bar .nw-search) input[type="search"]:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--focus); box-shadow: none;
}
:is(.c-bar .c-bar-search, .nw-bar .nw-search) button[type="submit"] {
  color: var(--text-muted); border-inline-start: 1px solid var(--border-control);
  border-start-end-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm);
}
/* components.css */
/* ── Panel ──────────────────────────────────────────────────────────── */
.panel {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-1);
}
@media (min-width: 768px) { .panel { padding: var(--space-6); } }
.panel > :first-child { margin-block-start: 0; }
.panel > :is(h2, h3) { margin-block-end: var(--space-3); }
/* Category panel: the accent is a 3px strip on the top edge only. */
.panel--accent {
  border-block-start-color: var(--accent);
  background:
    linear-gradient(var(--accent), var(--accent)) top / 100% 2px no-repeat padding-box,
    var(--surface-1);
}

/* ── Buttons ────────────────────────────────────────────────────────── */
/* .glow-btn / .ghost-btn are the legacy names still used in page content. */
.btn, .glow-btn, .ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--tap);
  padding-inline: var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.btn:hover, .ghost-btn:hover { color: var(--text); }
:is(.btn, .glow-btn, .ghost-btn):active:not(:disabled, [aria-disabled="true"]) { transform: translateY(1px); }
:is(.btn, .glow-btn, .ghost-btn) > i { font-size: 0.95em; }

.btn--primary, .glow-btn {
  background: var(--primary);
  color: var(--primary-ink);
  box-shadow: var(--shadow-1);
}
.btn--primary:hover, .glow-btn:hover {
  background: var(--primary-hover);
  color: var(--primary-ink);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.4), 0 6px 18px color-mix(in srgb, var(--primary) 35%, transparent);
}
/* Category CTA: <a class="btn btn--primary" data-accent="pink"> */
.btn--primary[data-accent] { background: var(--accent); color: var(--accent-ink); }
.btn--primary[data-accent]:hover { background: color-mix(in srgb, var(--accent) 86%, white); color: var(--accent-ink); }

.btn--secondary, .ghost-btn {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.btn--secondary:hover, .ghost-btn:hover { border-color: var(--border-control); background: var(--surface-3); }

.btn--ghost {
  background: transparent;
  color: var(--text-muted);
}
.btn--ghost:hover { background: var(--surface-2); color: var(--text); }

.btn--icon {
  inline-size: var(--tap);
  padding: 0;
  flex-shrink: 0;
}
.btn--ghost[aria-expanded="true"] { background: var(--surface-2); color: var(--text); }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::before {
  content: '';
  inline-size: 1em;
  block-size: 1em;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

/* ── Chip ───────────────────────────────────────────────────────────── */
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 32px;
  padding-inline: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
}
.chip[data-accent] {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-1));
  color: var(--accent);
}
/* Interactive chips keep a 44px hit area around the 32px pill. */
:is(a, button).chip { cursor: pointer; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
:is(a, button).chip::after { content: ''; position: absolute; inset: -6px 0; }
:is(a, button).chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip[aria-pressed="true"],
.chip[aria-current="true"],
.chip[aria-current="page"] {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 18%, var(--surface-1));
  color: var(--text);
}

/* ── Input ──────────────────────────────────────────────────────────── */
.input {
  display: block;
  inline-size: 100%;
  min-block-size: var(--tap);
  padding: 10px var(--space-4);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  color: var(--text);
  font-size: var(--step-0);
  line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
textarea.input { min-block-size: 7rem; resize: vertical; }
.input:hover { border-color: var(--primary); }
.input:focus-visible { border-color: var(--primary); }
.input:disabled { opacity: 0.5; cursor: not-allowed; }
.input[aria-invalid="true"] { border-color: var(--danger); }
.input[aria-invalid="true"]:focus-visible { outline-color: var(--danger); }

/* ── FAQ accordion ──────────────────────────────────────────────────── */

/* ── Toast ──────────────────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  inset-block-end: var(--space-5);
  inset-inline: var(--gutter);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  pointer-events: none;
}
.toast {
  max-inline-size: min(440px, 100%);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  box-shadow: var(--shadow-2);
  pointer-events: auto;
  opacity: 0;
  translate: 0 12px;
  transition: opacity var(--dur-med) var(--ease), translate var(--dur-med) var(--ease);
}
.toast.show { opacity: 1; translate: 0 0; }
.toast--success { border-color: color-mix(in srgb, var(--success) 55%, var(--border)); }
.toast--error { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); }

/* ── Modal (language picker and page dialogs) ───────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  overflow-y: auto;
  background: var(--scrim);
  animation: shell-fade var(--dur-med) var(--ease);
}
.modal-box {
  inline-size: min(100%, 32rem);
  max-block-size: calc(100dvh - 2 * var(--gutter));
  overflow-y: auto;
  padding: var(--space-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-3);
  animation: modal-rise var(--dur-med) var(--ease);
}
@media (min-width: 768px) { .modal-box { padding: var(--space-6); } }
/* Legacy page scripts open modals with style.display = "flex"; auto margins
   keep the box centred in either display mode. */
.modal-overlay > .modal-box { margin: auto; }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block: calc(-1 * var(--space-2)) var(--space-4);
}
.modal-header h2 { font-size: var(--step-2); line-height: 1; padding-block-start: 0.12em; }
.modal-header :is(button, .btn--icon) { margin-inline-end: calc(-1 * var(--space-2)); }

/* ── Prose: long-form articles and policy pages ─────────────────────── */
/* .content-page is the legacy document wrapper (about, legal, policy pages). */
:is(.prose, .content-page) {
  max-inline-size: 68ch;
  color: var(--text-muted);
  font-size: var(--step-0);
  line-height: 1.7;
}
:is(.prose, .content-page) > * + * { margin-block-start: 1.1em; }
:is(.prose, .content-page) :is(h2, h3, h4) { scroll-margin-block-start: calc(var(--header-stuck) + var(--space-4)); }
:is(.prose, .content-page) > h2 { margin-block: 2.2em 0.6em; font-size: var(--step-3); }
:is(.prose, .content-page) > h3 { margin-block: 1.9em 0.5em; font-size: var(--step-2); }
:is(.prose, .content-page) > h4 { margin-block: 1.6em 0.4em; }
:is(.prose, .content-page) > :first-child { margin-block-start: 0; }
:is(.prose, .content-page) > :is(h2, h3, h4) + * { margin-block-start: 0; }
:is(.prose, .content-page) :is(ul, ol) { padding-inline-start: 1.4em; }
:is(.prose, .content-page) li + li { margin-block-start: 0.45em; }
:is(.prose, .content-page) li::marker { color: var(--primary); }
:is(.prose, .content-page) ol > li::marker { font-weight: 600; font-variant-numeric: tabular-nums; }
:is(.prose, .content-page) li > :is(ul, ol) { margin-block-start: 0.45em; }
:is(.prose, .content-page) blockquote {
  position: relative;
  padding-block: var(--space-5);
  padding-inline: var(--space-9) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  color: var(--text);
  font-size: var(--step-1);
  line-height: 1.5;
}
:is(.prose, .content-page) blockquote::before {
  content: '\201C';
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1;
  color: var(--primary);
}
:is(.prose, .content-page) :not(pre) > code {
  padding: 0.12em 0.4em;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.88em;
}
:is(.prose, .content-page) pre {
  overflow-x: auto;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  color: var(--text);
  line-height: 1.55;
}
:is(.prose, .content-page) kbd {
  padding: 0.1em 0.45em;
  border: 1px solid var(--border-strong);
  border-block-end-width: 2px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.85em;
}
:is(.prose, .content-page) img, :is(.prose, .content-page) video { border-radius: var(--radius-md); }
:is(.prose, .content-page) figure figcaption { margin-block-start: var(--space-2); color: var(--text-faint); font-size: var(--step--1); }
:is(.prose, .content-page) table {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}
:is(.prose, .content-page) :is(th, td) {
  padding: var(--space-3) var(--space-4);
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--border);
}
:is(.prose, .content-page) tr:last-child > td { border-block-end: 0; }
:is(.prose, .content-page) th {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}
:is(.prose, .content-page) thead th:first-child { border-start-start-radius: calc(var(--radius-md) - 1px); }
:is(.prose, .content-page) thead th:last-child { border-start-end-radius: calc(var(--radius-md) - 1px); }
:is(.prose, .content-page) tbody tr:hover > td { background: var(--surface-1); }
@media (max-width: 767.98px) {
  :is(.prose, .content-page) table { display: block; overflow-x: auto; }
}

/* ── Document page: legacy .content-page markup on the site layout ──── */
/* One solid reading panel on the starfield: title block, then prose. */
main > .content-page {
  inline-size: calc(100% - 2 * var(--gutter));
  max-inline-size: calc(68ch + 2 * var(--space-8));
  margin: var(--space-7) auto 0; /* the footer owns the gap below */
  padding: var(--space-6) var(--space-5) var(--space-7);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-2);
}
@media (min-width: 768px) {
  main > .content-page { margin-block: var(--space-9) 0; padding: var(--space-8) var(--space-8) var(--space-9); }
}
/* The facts line (date · read time · topic, or "Last updated") closes the title area. */
.content-page > :is(.content-meta, .legal-updated) {
  margin-block-start: var(--space-4);  /* beats :is(.prose, .content-page) > :first-child, as the old wrapper did */
  margin-block-end: var(--space-6);
  padding-block-end: var(--space-5);
  border-block-end: 1px solid var(--border);
}
.content-page > :is(.content-meta, .legal-updated) + * { margin-block-start: 0; }
.content-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-block-start: var(--space-4);
  color: var(--text-faint);
  font-size: var(--step--1);
}
.content-meta > span { display: inline-flex; align-items: center; gap: var(--space-2); }
.content-meta i { color: var(--primary); }
.legal-updated {
  display: block;
  margin-block-start: var(--space-4);
  color: var(--text-faint);
  font-size: var(--step--1);
}
.content-page > .lead { color: var(--text); }
/* Inside the panel the section rhythm is tighter than in free-standing prose. */
.content-page > h2 { margin-block-start: 1.8em; }
/* Japanese has no spaces: break headings at phrase boundaries, not mid-word. */
:lang(ja) :is(h1, h2, h3) { word-break: auto-phrase; }
.content-page :where(p, li, td) > a:not(.glow-btn, .ghost-btn, .btn) { overflow-wrap: anywhere; }

/* Closing call to action: a ruled band inside the panel, not a nested card. */
.content-page > .blog-cta-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--border);
}
.blog-cta-box > p { margin: 0; color: var(--text); font-size: var(--step-1); }

/* Reduced motion: the busy ring would freeze mid-turn and read as broken,
   so it becomes a full ring that slowly breathes instead of spinning. */
@media (prefers-reduced-motion: reduce) {
  .btn[aria-busy="true"]::before {
    border-color: currentColor;
    animation: busy-breathe 2.4s ease-in-out infinite !important;
    animation-duration: 2.4s !important;
    animation-iteration-count: infinite !important;
  }
}
/* Daily bonus card: injected site-wide by /daily-reward.js?v=51ef9b7d (game-system.js
   loader) for signed-in visitors, so it must be styled on every page. */
.daily-bonus-available {
  position: fixed;
  inset-block-end: var(--space-4);
  inset-inline-end: var(--space-4);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-inline-size: calc(100vw - 2 * var(--space-4));
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--amber) 55%, var(--border));
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-2);
  cursor: pointer;
}
.bonus-icon { font-size: 1.6rem; color: var(--neon-amber); filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--neon-amber) 45%, transparent)); }
/* Phones: a compact bar docked to the bottom edge; the page reserves its height
   so the bar never sits over form controls or the footer. */
@media (max-width: 600px) {
  .daily-bonus-available {
    inset-inline: 0;
    inset-block-end: 0;
    max-inline-size: none;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-width: 1px 0 0;
    border-radius: 0;
    font-size: var(--step--1);
  }
  .daily-bonus-available .bonus-icon { font-size: 1.25rem; }
  .daily-bonus-available > div { display: flex; flex-wrap: wrap; column-gap: var(--space-2); align-items: baseline; }
  body:has(> .daily-bonus-available) { padding-block-end: 56px; }
}
/* Reserve the Community launcher’s published space for signed-in daily rewards. */
@media (min-width: 601px) {
  html:not([dir="rtl"]) body:has(.community-dock__launcher:not([hidden])) .daily-bonus-available {
    inset-inline-end: calc(var(--space-4) + var(--community-dock-width, 144px) + 12px);
    max-inline-size: calc(100vw - var(--community-dock-width, 144px) - 60px);
  }
}
@media (max-width: 600px) {
  body:has(.community-dock__launcher:not([hidden])) .daily-bonus-available {
    inset-block-end: calc(var(--community-dock-bottom, 16px) + 64px);
  }
}
.toast > i { margin-inline: 2px; color: var(--amber); }
.bonus-text { color: var(--text); font-weight: 600; }
.bonus-amount { color: var(--text-muted); font-size: var(--step--1); }
@keyframes busy-breathe { 50% { opacity: 0.35; } }
@keyframes modal-rise { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── More games (.mg-*) ─────────────────────────────────────────────────
   The one "more games" strip, shared by every page that shows one (games,
   CPS modes, quizzes, tools). A compact launcher row:
   Deck 2 keys with the icon in the page accent; the per-link gradient
   variables (--g1/--g2/--glow) are deliberately ignored. */
/* Bare everywhere: a centred caption over a row of keys, never inside a panel. */
body :is(.mg-heading, .more-games-title) {
  margin-block: var(--space-3) 0 !important;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  color: var(--text-muted);
}
.mg-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}
.mg-ico {
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--accent);
  font-size: 1.3rem;
  text-decoration: none;
  box-shadow: var(--shadow-1);
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.mg-ico:hover {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border-strong));
  background: var(--surface-3);
  color: var(--accent);
  transform: translateY(-2px);
}
}
.mg-ico:active { transform: translateY(0); }
@media (min-width: 768px) {
  .mg-row { gap: var(--space-3); }
  .mg-ico { inline-size: 56px; block-size: 56px; font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) { .mg-ico:hover { transform: none; } }

/* ── Phone rhythm ────────────────────────────────────────────────────────
   The game container's bottom padding, the guide section's top padding, its
   bottom padding and the footer's top margin used to stack into 100-200px of
   empty band (around the inline announcement card and before the footer). */
@media (max-width: 600px) {
  main:has(+ .seo-section) > .container:last-child { padding-block-end: var(--space-4) !important; }
  .seo-section:not(:has(~ .seo-section)) { padding-block-end: var(--space-6) !important; }
  .site-footer { margin-block-start: var(--space-5); padding-block-start: var(--space-8); }
}
.cps-game-recommendations, .more-games { display: grid; gap: var(--space-2); padding: 0; border: 0; background: none; box-shadow: none; }

/* ── Section colour ─────────────────────────────────────────────────────
   body[data-accent] is the page's catalog group (skill cyan, quizzes amber,
   games pink, hardware coral, tools lime). It tints the page title, the
   primary buttons, content panel outlines and the FAQ heading. */
body[data-accent] :is(.btn--primary, .glow-btn):not([data-accent]) { background: var(--accent); color: var(--accent-ink); }
body[data-accent] :is(.btn--primary, .glow-btn):not([data-accent]):hover { background: color-mix(in srgb, var(--accent) 86%, white); color: var(--accent-ink); }
/* Surface outlines are defined with the shared panel rules below. */

/* Shared space matches the original near-black field: the light belongs to
   stars, outlines and controls. Authored themes keep their own scenes. */
#star-canvas {
  background: radial-gradient(ellipse at center, #0f0818 0%, #05030d 100%);
}
/* ══ Design v2: glass, one column, motion ═══════════════════════════════
   Surfaces are translucent tokens (tokens.css), so every panel built on
   --surface-* is glass. Real backdrop blur is spent only on the few fixed
   layers (header, nav panels, drawer, dialogs): it is costly on weak phones. */

/* ── Glass chrome ─────────────────────────────────────────────────────── */
.site-header {
  background: var(--chrome-header);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-block-end-color: var(--border);
}
.site-nav__panel,
.side-drawer,
.modal-box,
#lang-modal .modal-box,
.lang-modal__box {
  background-color: var(--chrome-surface);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}
.overlay-bg, .modal-overlay { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.site-nav__panel { transform-origin: top center; }

/* ── Glass panels ─────────────────────────────────────────────────────── */
.panel,
.section-box,
.glass-panel:not(.modal-box),
.stat-card,
.stats-grid,
.device-survey,
.lab-shell,
.lab-tool-shell,
.content-page,
.lb-hub-card,
.catalog-item,
.cosmetic-card,
.bh-feature,
.tile {
  box-shadow: none;
  background-image: none;
}

/* ── Glass buttons ────────────────────────────────────────────────────── */
.btn:not(.btn--primary):not(.btn--ghost):not(.play-cover__play):not(.play-sheet__primary):not(.btn--signin),
.ghost-btn {
  border-color: var(--border-strong);
  background: color-mix(in srgb, var(--text) 5%, transparent);
  box-shadow: var(--glass-hi);
}
.btn:not(.btn--primary):not(.btn--ghost):not(.play-cover__play):not(.play-sheet__primary):not(.btn--signin):hover,
.ghost-btn:hover {
  border-color: color-mix(in oklab, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--text) 9%, transparent);
}
.btn--primary, .glow-btn, .play-cover__play {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* One light sweep across the primary action on hover. */
.btn--primary::after, .glow-btn::after, .play-cover__play::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 600ms var(--ease);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
:is(.btn--primary, .glow-btn, .play-cover__play):hover::after { transform: translateX(120%); }
}
:is(.btn, .glow-btn, .ghost-btn, .play-chip, .chip):active:not(:disabled) { transform: scale(0.97); }

/* ── One column: every section spans the content width ───────────────── */
/* Every page container is the same column, whatever its page CSS says. */
main > .container { max-inline-size: var(--container) !important; }
/* Section-level blocks fill that column (boards stay centred inside them). */
main :is(.device-survey, .kb-stats, .lab-shell, .lab-tool-shell, .arcade-shell,
  .ws-stage, .ws-card, .supporter-banner, .guest-banner,
  .parameters-panel, .lb-hub-seo
) {
  inline-size: 100% !important;
  max-inline-size: none !important;
  margin-inline: 0 !important;
}
/* Pages whose wrapper sits straight in <main> get the same column. */
main > :is(.content-page, .gts-page, .parameters-page, .steam-page) {
  inline-size: calc(100% - 2 * var(--gutter)) !important;
  max-inline-size: calc(var(--container) - 2 * var(--gutter)) !important;
  margin-inline: auto !important;
}
main .content-page > :where(p, ul, ol, h2, h3, h4, blockquote, table, figure, .article-meta) { max-inline-size: 72ch; }
main > .content-page { padding-inline: clamp(var(--space-5), 4vw, var(--space-8)); }

/* ── Motion: responsive navigation, visible reading content ────────── */
/* Scroll effects run only while entering (shell.js); content never depends on a hidden/revealed CSS state. */
@media (prefers-reduced-motion: no-preference) {
  :is(.site-header, .side-drawer, .info-dialog) :is(.btn, .header-link, .xp-chip, .drawer-link),
  :is(.home-sort button, .home-guide, .home-top__link, .up-card, .related__link) {
    transition: scale var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease),
      border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }
  :is(.site-header, .side-drawer, .info-dialog) :is(.btn, .header-link, .xp-chip, .drawer-link):active:not(:focus-visible, :disabled, [aria-disabled="true"]),
  :is(.home-sort button, .home-guide, .home-top__link, .up-card, .related__link):active:not(:focus-visible, :disabled, [aria-disabled="true"]) {
    scale: 0.97;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.btn--primary, .glow-btn, .play-cover__play)::after { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --surface-1: color-mix(in srgb, var(--bg-raised) 96%, var(--primary)); --surface-2: color-mix(in srgb, var(--bg-raised) 92%, var(--primary)); --surface-3: color-mix(in srgb, var(--bg-raised) 86%, var(--primary)); }
  .site-header, .site-nav__panel, .side-drawer, .modal-box { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: var(--bg-raised) !important; }
}

/* ── Up next: the way on to the next page (every content page) ───────── */
.up-next { padding-block: var(--space-7) var(--space-8); border-block-start: 1px solid var(--border); }
.up-next__row + .up-next__row { margin-block-start: var(--space-7); }
.up-next__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-4); }
.up-next__head h2 { margin: 0; font-family: var(--font-display); font-size: var(--step-3); line-height: 1; color: var(--text); }
.up-next__all { color: var(--text-muted); font-weight: 600; text-decoration: none; white-space: nowrap; }
.up-next__all:hover { color: var(--accent); }
.up-next__all i { margin-inline-start: var(--space-1); font-size: 0.85em; }
[dir="rtl"] .up-next__all i { transform: scaleX(-1); }
.up-next__row { container-type: inline-size; }
.up-next__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.up-next__grid > [data-up-extra] { display: none; }
/* The restored evergreen set contains five guides, not the four game picks. */
.article-links .up-next__grid { grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); }
/* Wide monitors show more real destinations; phones retain the familiar four. */
@container (min-width: 1200px) {
  .up-next__grid { grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); }
  .up-next__grid > [data-up-extra] { display: list-item; }
}
.up-card {
  --tone: var(--accent);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: 72px;
  block-size: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--glass-hi);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.up-card:hover {
  border-color: color-mix(in oklab, var(--tone) 60%, transparent);
  box-shadow: var(--glass-hi), 0 14px 30px -16px color-mix(in oklab, var(--tone) 60%, transparent);
  transform: translateY(-3px);
}
}
.up-card__icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--tone) 22%, var(--surface-2));
  color: var(--tone);
  font-size: 1.15rem;
}
.up-card__text { display: grid; gap: 2px; min-inline-size: 0; }
.up-card__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.2; }
.up-card__group { font-size: var(--step--1); font-weight: 500; color: var(--text-faint); }
.up-card::after { content: '\2192'; margin-inline-start: auto; color: var(--text-faint); transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.up-card:hover::after { color: var(--tone); transform: translateX(3px); }
[dir="rtl"] .up-card::after { content: '\2190'; }
[dir="rtl"] .up-card:hover::after { transform: translateX(-3px); }
@media (prefers-reduced-motion: reduce) { .up-card, .up-card::after { transition: none; } .up-card:hover { transform: none; } }

/* Floating "next" pill: appears once the reader is past half the page. */
.next-pill {
  position: fixed;
  inset-inline-end: var(--gutter);
  inset-block-end: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-inline-size: min(340px, calc(100vw - 2 * var(--gutter)));
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
  border-radius: var(--radius-pill);
  background: var(--chrome-surface);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: 0 16px 40px -16px rgb(0 0 0 / 0.8);
  color: var(--text);
  text-decoration: none;
  transform: translateY(140%);
  transition: transform 420ms var(--ease);
}
.next-pill.is-shown { transform: none; }
.next-pill__label { font-size: var(--step--1); color: var(--text-faint); }
.next-pill__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.next-pill__go { flex: none; display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.next-pill__x { flex: none; display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 50%; color: var(--text-faint); }
.next-pill__x:hover { color: var(--text); background: var(--surface-2); }
html.play-open .next-pill { display: none; }
@media (prefers-reduced-motion: reduce) { .next-pill { transition: none; } }
/* The icon-only "try our games" rows predate Up next, which replaces them
   with labelled links below every page. */
:is(.mg-heading, .mg-row, section.more-games) { display: none !important; }

/* Touch controls keep their press feedback without a lingering hover lift. */
@media (hover: none) {
  .up-card:hover::after { transform: none; }
}
@media (pointer: coarse) {
  :is(.input, .drawer-search, .auth-input) { font-size: max(1rem, 16px); }
  :is(.ghost-btn-sm, .device-survey__send, .device-survey__note-save) { min-block-size: var(--tap); min-inline-size: var(--tap); }
}

/* Ad slots (build/shell/ads.mjs, ADS.md) are layout citizens. A slot only shows once <html data-ads="on"> is set
   before first paint (consent, ad-free and cohort checked), then holds a fixed height from the first frame: the
   label plus a box of --ad-h-m (phones) / --ad-h-d (from 768px). Nothing inside can widen the page: the slot's
   inline size ignores its content (contain: inline-size) and the box clips what is wider than the column. */
:is(.ad-slot, [data-ad-slot]) { display: none; }
html[data-ads="on"] :is(.ad-slot, [data-ad-slot]):not([hidden]) {
  display: block;
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  margin-block: var(--space-6);
  overflow: hidden;
  contain: inline-size layout paint;
}
html[data-ad-layout="compact"] [data-ad-wide],
html[data-ad-layout="wide"] [data-ad-compact],
html[data-ad-unavailable~="native"] [data-ad-slot="native"],
html[data-ad-unavailable~="shuffle"] [data-ad-slot="shuffle"],
html [data-ad-crowded],
html[data-ads-skip~="native"] [data-ad-slot="native"],
html[data-ads-skip~="shuffle"] [data-ad-slot="shuffle"] { display: none !important; }
/* Retain a measurable column for a fixed creative parked by a resize.
   Its height and margins collapse until the unit fits again. */
html[data-ads="on"] [data-ad-slot][data-ad-misfit] {
  block-size: 0; margin-block: 0; padding-block: 0;
  visibility: hidden; pointer-events: none;
}
.ad-slot__label, .ad-slot__box {
  inline-size: min(100%, var(--ad-w-m, 320px));
  margin-inline: auto;
}
.ad-slot__label {
  margin-block: 0 var(--space-1);
  block-size: 1.25rem;
  overflow: hidden;
  color: var(--text-faint);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25rem;
  letter-spacing: 0.02em;
  text-align: start;
  white-space: nowrap;
}
.ad-slot__box {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: safe center;
  block-size: var(--ad-h-m, 100px);
  max-inline-size: 100%;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-1) 55%, transparent);
}
.ad-slot__box > * { flex: 0 0 auto; }
/* Preserve the reservation and provider iframe while a floating control covers the creative. */
[data-ad-slot][data-ad-covered] { opacity: 0; pointer-events: none; }
[data-ad-state="loading"] > .ad-slot__box { visibility: hidden; }
/* The loader checks the actual creative size. A fixed iframe keeps its intrinsic width. */
html[data-ad-layout="wide"] :is(.ad-slot__label, .ad-slot__box) { inline-size: min(100%, var(--ad-w-d, 728px)); }
html[data-ad-layout="wide"] .ad-slot__box { block-size: var(--ad-h-d, 90px); }
/* Slots after </main> (below the play window, closing blocks) bring the container gutter; the row itself is empty. */
.ad-row:has(> [hidden]), html[data-ad-layout="compact"] .ad-row:has(> [data-ad-wide]),
html[data-ad-unavailable~="native"] .ad-row:has(> [data-ad-slot="native"]),
html[data-ads-skip~="native"] .ad-row:has(> [data-ad-slot="native"]) { display: none; }
html:not([data-ads="on"]) .ad-row { display: none; }
/* Community feed: one more card in the list's own 14px rhythm, labelled like every slot. */
html[data-ads="on"] .ad-slot--card:not([hidden]) { margin-block: 0; padding: 12px 16px 16px; border: 1px solid var(--c-line, var(--border)); border-radius: 16px; background: var(--c-deck, var(--surface-1)); }
/* News home: the slot is one more row of the Latest list. */
.nw-timeline > li.nw-ad { display: block; grid-column: 1 / -1; min-inline-size: 0; }
html:not([data-ads="on"]) .nw-timeline > li.nw-ad { display: none; }
.nw-timeline > li.nw-ad > .ad-slot { margin-block: 0; }

/* Ad consent (European time zones, ADS.md): an in-flow band under the header, never fixed, so it can cover neither
   the game nor the Community tab bar. Shown only by <html data-ads-bar="open">, set before first paint. */
.ads-consent { display: none; }
html[data-ads-bar="open"] .ads-consent { display: block; }
.ads-consent { border-block-end: 1px solid var(--border); background: var(--bg-raised); }
.ads-consent__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); padding-block: var(--space-3); }
.ads-consent__text { flex: 1 1 22rem; min-inline-size: 0; margin: 0; color: var(--text-muted); font-size: var(--step--1); line-height: 1.45; }
.ads-consent__text a { color: var(--primary); text-underline-offset: 3px; }
/* Accept and Decline are equally prominent: one style, one weight, two equal columns. */
.ads-consent__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 0 1 auto; gap: var(--space-2); }
.ads-consent__btn { min-block-size: var(--tap, 44px); min-inline-size: 7.5rem; font-weight: 600; }
@media (max-width: 479.98px) {
  .ads-consent__actions { flex: 1 1 100%; }
  .ads-consent__btn { min-inline-size: 0; }
}
.ads-choices-link { display: inline-flex; align-items: center; min-block-size: var(--tap, 44px); padding: 0; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: var(--step--1); text-align: start; cursor: pointer; }
.ads-choices-link:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--primary); }
.app-footer .ads-choices-link { min-block-size: 0; color: inherit; font-size: inherit; }

/* Achievement unlocked (game-system.js .achievement-notification): a celebration,
   so its icon and title take the signature neon; the card itself stays on the
   soft surfaces. It slides in from the top end (bottom on phones). */
.achievement-notification {
  position: fixed;
  inset-block-start: calc(var(--header-h) + var(--space-3));
  inset-inline-end: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-inline-size: min(360px, calc(100vw - 2 * var(--space-4)));
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--neon-amber) 55%, var(--border));
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  border-inline-start: 4px solid var(--neon-amber);
  box-shadow: 0 12px 32px -12px color-mix(in srgb, var(--neon-amber) 45%, transparent), var(--shadow-2);
  color: var(--text);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.achievement-notification.show { opacity: 1; transform: none; }
.achievement-notif-icon { font-size: 2.2rem; line-height: 1; filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--neon-amber) 55%, transparent)); }
.achievement-notification.show .achievement-notif-icon { animation: ach-pop 320ms var(--ease); }
.achievement-notif-content { display: grid; gap: 2px; min-inline-size: 0; }
.achievement-notif-title { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--neon-amber); }
.achievement-notif-name { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.1; color: var(--text); }
.achievement-notif-reward { font-size: var(--step--1); font-weight: 600; color: var(--text-muted); }
@keyframes ach-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@media (max-width: 600px) {
  .achievement-notification { inset-block: auto calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); inset-inline: var(--space-3); max-inline-size: none; transform: translateY(12px); }
}
@media (prefers-reduced-motion: reduce) {
  .achievement-notification { transition: opacity var(--dur-fast) linear; transform: none; }
  .achievement-notification.show .achievement-notif-icon { animation: none; }
}

/* ── Shared page blocks (build/blocks/blocks.mjs) ─────────────────────────
   One page head, one FAQ, one guide-card style, one related-reading block.
   Bottom order everywhere: guide cards → related reading → FAQ → community → up next. */
.page-head {
  inline-size: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding: var(--space-6) var(--gutter) var(--space-5);
  text-align: start;
}
.page-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-h1);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: start;
  text-shadow: none;
  color: var(--text);
  text-wrap: balance;
}
.page-head__lede {
  margin: var(--space-3) 0 0;
  max-inline-size: 60ch;
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: 1.5;
  text-align: start;
}
.page-head__cover { margin: var(--space-5) 0 0; }
/* The cover is a picture of the tool, not the tool: dimmed a step (flat, no gradient), not clickable, and cropped
   from the top so the shot's lower edge (a half heading) falls away. */
.page-head__img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  filter: brightness(0.8);
  pointer-events: none;
  user-select: none;
}

.faq-block,
.guide-cards,
.related {
  inline-size: 100%;
  max-inline-size: var(--container);
  margin: var(--space-8) auto 0;
  padding-inline: 0;
}
/* The blocks sit in the page's own padded container, so their edge is the h1's. One placed straight in <main> or
   <body> (no container around it) brings the gutter itself. */
:is(body, main) > :is(.faq-block, .guide-cards, .related) { padding-inline: var(--gutter); }
.faq-block__title,
.related__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: start;
  color: var(--text);
}
.faq-block__list { border-block-start: 1px solid var(--border); }
.faq-block__item { border-block-end: 1px solid var(--border); }
.faq-block__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-block-size: 56px;
  padding-block: var(--space-3);
  color: var(--text);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
.faq-block__q::-webkit-details-marker { display: none; }
.faq-block__q::after {
  content: '';
  flex-shrink: 0;
  inline-size: 28px;
  block-size: 28px;
  border-radius: 50%;
  background:
    linear-gradient(var(--primary), var(--primary)) center / 12px 2px no-repeat,
    linear-gradient(var(--primary), var(--primary)) center / 2px 12px no-repeat,
    var(--surface-2);
  transition: transform var(--dur-med) var(--ease), background-color var(--dur-fast) var(--ease);
}
.faq-block__q:hover::after { background-color: var(--surface-3); }
.faq-block__item[open] > .faq-block__q::after { transform: rotate(135deg); }
.faq-block__q:focus-visible { outline-offset: 4px; }
.faq-block__a { max-inline-size: 68ch; padding-block-end: var(--space-5); color: var(--text-muted); }
.faq-block__a > * + * { margin-block-start: var(--space-3); }

.guide-cards__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--text);
}
.guide-cards__intro { margin: var(--space-3) 0 0; max-inline-size: 68ch; color: var(--text-muted); }
/* Orphan-free by count (data-count, build/blocks/blocks.mjs), like Related reading: one column on phones; two from a
   760px block, the first card leading across both when the count is odd; three from 1240px, except 2 and 4 cards
   (two columns, 4 as 2 x 2), the first card leading across all three when one would be left alone (7). */
.guide-cards { container-type: inline-size; }
.guide-cards__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: var(--space-5);
}
@container (min-width: 760px) {
  .guide-cards__grid:not([data-count="1"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-cards__grid:is([data-count="3"], [data-count="5"], [data-count="7"], [data-count="9"]) > :first-child { grid-column: 1 / -1; }
}
@container (min-width: 1240px) {
  .guide-cards__grid:not([data-count="1"], [data-count="2"], [data-count="4"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guide-cards__grid:is([data-count="3"], [data-count="5"], [data-count="9"]) > :first-child { grid-column: auto; }
}
.guide-card {
  min-inline-size: 0;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  color: var(--text-muted);
}
@media (min-width: 768px) { .guide-card { padding: var(--space-6); } }
.guide-card > :is(h2, h3) {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.05;
  text-transform: none;
  color: var(--text);
}
.guide-card > :is(h2, h3) > i {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  margin-block-start: -0.18em;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--accent, var(--primary));
  font-size: 0.95rem;
}
.guide-card img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-block-end: var(--space-4); border-radius: var(--radius-md); }
.guide-card p + p,
.guide-card :is(ul, ol) { margin-block-start: var(--space-3); }
.guide-card :is(ul, ol) { padding-inline-start: 1.2em; }
.guide-card li + li { margin-block-start: var(--space-2); }
.guide-card li::marker { color: var(--accent, var(--primary)); }
.guide-card strong { color: var(--text); }
.guide-card .training-step { display: flex; gap: var(--space-3); align-items: flex-start; margin-block-start: var(--space-3); }
.guide-card .training-step-num {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  padding-block-start: 0.12em;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1;
}

.related__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.related__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-1);
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.3;
  text-decoration: none;
}
.related__link:hover { border-color: var(--border-strong); background: var(--surface-2); color: var(--text); }
.related__link i { color: var(--accent, var(--primary)); }
.related__thumb { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--surface-2); color: var(--text-muted); font-size: 1.6rem; }
.related__thumb img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
/* Picture links, phones: compact rows (a 112px 16:9 picture at the start, the title beside it) between 1px Seam
   rules, so a long list stays scannable. From 768px: the card grid (3 columns for 3, 5 or 6 cards, 2 for 4; at
   most 6 cards, further links stay pills under it: build/blocks/blocks.mjs renderRelated). */
.related .related__list { padding: 0; } /* over the article list indent (:is(.prose, .content-page) ul) */
.related .related__list > li { margin: 0; } /* and the article list rhythm (li + li), which staggers the cards */
.related--cards .related__list:not(.related__more) { display: block; border-block: 1px solid var(--border); }
.related--cards .related__list:not(.related__more) > li + li { border-block-start: 1px solid var(--border); }
.related--cards .related__list:not(.related__more) .related__link {
  display: flex;
  inline-size: 100%;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.related--cards .related__list:not(.related__more) .related__link:hover { background: none; }
.related--cards .related__list:not(.related__more) .related__link:hover .related__label { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.related--cards .related__thumb { flex: none; inline-size: 112px; overflow: hidden; border-radius: var(--radius-sm); font-size: 1.2rem; }
.related--cards .related__label { min-inline-size: 0; }
.related__more { margin-block-start: var(--space-4); }
/* Icon tile (a repeated picture or none): the landing Top 5 tile, the link's own icon on Deck 2 in a Seam frame. */
.related__thumb--icon { border: 1px solid var(--border); background: var(--surface-1); }
.related__tile {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  font-size: 1.1rem;
}
/* Titles are Starlight, also inside an article (over the violet prose link). */
.content-page .related .related__link { color: var(--text); text-decoration: none; }
.content-page .related .related__link:hover { color: var(--text); }
@media (min-width: 768px) {
  .related--cards .related__list:not(.related__more) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); border-block: 0; }
  .related--cols-3 .related__list:not(.related__more) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .related--cards .related__list:not(.related__more) > li + li { border-block-start: 0; }
  .related--cards .related__list:not(.related__more) .related__link {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    block-size: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
  }
  .related--cards .related__list:not(.related__more) .related__link:hover { border-color: var(--border-strong); background: var(--surface-2); }
  .related--cards .related__list:not(.related__more) .related__link:hover .related__label { text-decoration: none; }
  .related--cards .related__thumb { inline-size: auto; border-radius: 0; font-size: 1.6rem; }
  .related--cards .related__thumb--icon { border: 0; border-block-end: 1px solid var(--border); }
  .related--cards .related__tile { inline-size: 56px; block-size: 56px; font-size: 1.4rem; }
  .related--cards .related__label { padding: var(--space-3) var(--space-4) var(--space-4); }
}
/* Four cards in a wide block (a game page, not an article column) sit on one row. */
.related--cols-2 { container-type: inline-size; }
@container (min-width: 900px) {
  .related--cols-2 .related__list:not(.related__more) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .faq-block__q::after { transition: none; } }

/* Hub card pictures (build/blocks/blocks.mjs addCardThumbs). */
.card-thumb {
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  margin-block-end: var(--space-3);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.card-thumb img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
/* Hub card thumb placement: span the grid row, never take an icon column, wrap in flex cards. */
.card-thumb { grid-column: 1 / -1; contain: inline-size; }
.gh-card:not(.gh-card--lead):has(> .card-thumb) { flex-wrap: wrap; }
.gh-card:not(.gh-card--lead) > .card-thumb { flex: 0 0 100%; }

/* ── Sign in: one style everywhere ───────────────────────────────────────
   Site header, drawer account row (guest), community bar, News bar, arcade rank. The primary button; it never
   takes a page accent. */
.btn--signin,
body[data-accent] .btn--signin {
  border-color: transparent;
  background: var(--primary);
  color: var(--primary-ink);
  box-shadow: var(--shadow-1);
}
.btn--signin:hover,
body[data-accent] .btn--signin:hover { background: var(--primary-hover); color: var(--primary-ink); }

.up-card { background: linear-gradient(130deg, color-mix(in srgb, var(--tone) 17%, var(--bg-raised)), var(--bg-raised)); border: 0; box-shadow: none; }
.up-card__icon { background: var(--tone); color: var(--primary-ink); }

/* Panels get one continuous edge. An extra painted top stripe doubled only
   that side and overrode the later rank/history surfaces through :is specificity. */
body[data-accent] :where(.section-box, .glass-panel:not(.modal-box)) {
  border: 2px solid color-mix(in srgb, var(--accent, var(--primary)) 70%, var(--border));
  background: var(--surface-1);
  box-shadow: none;
}
/* Instrument shells group independent controls; actual game boards own their frames. */
main :is(.lab-shell, .lab-tool-shell) { border: 0; box-shadow: none; background: none; }

/* ── Published-style reading cards ────────────────────────────────────
   Original CPS pulse / Minecraft / techniques / hardware / training /
   health gradients from Backup_Site/style.css, on an opaque dark ground.
   Color belongs to the edge and heading; body copy stays clear and calm.
   Static reading cards never imply interaction with hover movement. */
:is(main, .cps-reading, .seo-section) :is(.guide-card, .reading-card, .random-article > section, .gts-guide-sec),
body[data-page="offline-privacy"] main #policy > section {
  --reading-tone: var(--cyan);
  --reading-start: rgb(0 100 150 / .3);
  --reading-end: rgb(0 50 80 / .5);
  --reading-edge: rgb(0 240 255 / .4);
  min-inline-size: 0;
  padding: clamp(1.125rem, 2.2vw, 1.75rem);
  border: 1px solid var(--reading-edge);
  border-radius: 20px;
  background: linear-gradient(135deg, var(--reading-start), var(--reading-end)), var(--bg);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .035);
  color: var(--text);
  line-height: 1.7;
  overflow-wrap: anywhere;
}
:is(main, .cps-reading, .seo-section) :is(.guide-card, .reading-card, .random-article > section, .gts-guide-sec):nth-child(6n + 2),
body[data-page="offline-privacy"] main #policy > section:nth-child(6n + 2) {
  --reading-tone: #4caf50; --reading-start: rgb(76 175 80 / .25);
  --reading-end: rgb(121 85 72 / .35); --reading-edge: rgb(76 175 80 / .5);
}
:is(main, .cps-reading, .seo-section) :is(.guide-card, .reading-card, .random-article > section, .gts-guide-sec):nth-child(6n + 3),
body[data-page="offline-privacy"] main #policy > section:nth-child(6n + 3) {
  --reading-tone: #e040fb; --reading-start: rgb(156 39 176 / .25);
  --reading-end: rgb(233 30 99 / .2); --reading-edge: rgb(156 39 176 / .55);
}
:is(main, .cps-reading, .seo-section) :is(.guide-card, .reading-card, .random-article > section, .gts-guide-sec):nth-child(6n + 4),
body[data-page="offline-privacy"] main #policy > section:nth-child(6n + 4) {
  --reading-tone: var(--amber); --reading-start: rgb(255 152 0 / .2);
  --reading-end: rgb(255 87 34 / .25); --reading-edge: rgb(255 152 0 / .5);
}
:is(main, .cps-reading, .seo-section) :is(.guide-card, .reading-card, .random-article > section, .gts-guide-sec):nth-child(6n + 5),
body[data-page="offline-privacy"] main #policy > section:nth-child(6n + 5) {
  --reading-tone: #03a9f4; --reading-start: rgb(33 150 243 / .2);
  --reading-end: rgb(0 188 212 / .25); --reading-edge: rgb(33 150 243 / .5);
}
:is(main, .cps-reading, .seo-section) :is(.guide-card, .reading-card, .random-article > section, .gts-guide-sec):nth-child(6n),
body[data-page="offline-privacy"] main #policy > section:nth-child(6n) {
  --reading-tone: var(--lime); --reading-start: rgb(139 195 74 / .2);
  --reading-end: rgb(76 175 80 / .25); --reading-edge: rgb(139 195 74 / .5);
}
/* Authored game worlds and equipped shop palettes keep their own colors. */
:root[data-theme]:not([data-theme="default"]) :is(main, .cps-reading, .seo-section) :is(.guide-card, .reading-card, .random-article > section, .gts-guide-sec),
:root[data-theme]:not([data-theme="default"]) body[data-page="offline-privacy"] main #policy > section {
  --reading-tone: var(--accent, var(--primary));
  --reading-start: color-mix(in srgb, var(--reading-tone) 14%, var(--bg));
  --reading-end: var(--bg-raised);
  --reading-edge: color-mix(in srgb, var(--reading-tone) 50%, var(--border));
}
/* The page container owns the outside width. Only text receives a measure;
   independent guide cards use the count-aware grid defined above. */
:is(main, .cps-reading, .seo-section) .guide-cards__grid { gap: var(--space-6); }
:is(main, .cps-reading, .seo-section) :is(.guide-cards, .random-article) { inline-size: 100%; max-inline-size: 100%; margin-inline: auto; }
:is(main, .cps-reading, .seo-section) .random-article > section + section,
main .content-page > .reading-card,
main .gts-guide-sec + .gts-guide-sec,
body[data-page="offline-privacy"] main #policy > section + section { margin-block-start: var(--space-6); }
:is(main, .cps-reading, .seo-section) :is(.guide-card, .reading-card, .random-article > section, .gts-guide-sec) :is(h2, h3, h4, strong),
body[data-page="offline-privacy"] main #policy > section :is(h2, h3, strong) { color: var(--text); }
:is(main, .cps-reading, .seo-section) :is(.guide-card, .reading-card, .random-article > section, .gts-guide-sec) > :is(h2, h3),
body[data-page="offline-privacy"] main #policy > section > :is(h2, h3) {
  margin-block: 0 var(--space-4);
  color: var(--reading-tone);
  font-size: clamp(1.4rem, 1.25rem + .45vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: 0;
}
:is(main, .cps-reading, .seo-section) :is(.guide-card, .reading-card, .random-article > section, .gts-guide-sec) :is(p, li),
body[data-page="offline-privacy"] main #policy > section :is(p, li) {
  color: var(--text); font-size: var(--step-0); line-height: 1.7;
}
:is(main, .cps-reading, .seo-section) :is(.guide-card, .reading-card, .random-article > section, .gts-guide-sec) > :is(p, ul, ol, blockquote),
body[data-page="offline-privacy"] main #policy > section > :is(p, ul, ol, blockquote) { max-inline-size: 76ch; }
:is(main, .cps-reading, .seo-section) :is(.guide-card, .reading-card, .random-article > section, .gts-guide-sec) > :first-child { margin-block-start: 0; }
:is(main, .cps-reading, .seo-section) :is(.guide-card, .reading-card, .random-article > section, .gts-guide-sec) > :last-child { margin-block-end: 0; }
main .reading-card > * + * { margin-block-start: 1.1em; }
main .reading-card > :is(h2, h3, h4) + * { margin-block-start: 0; }
:is(main, .cps-reading, .seo-section) :is(.guide-card, .reading-card, .random-article > section, .gts-guide-sec) a:not(.btn, .glow-btn, .ghost-btn, .article-quick-play),
body[data-page="offline-privacy"] main #policy > section a {
  color: color-mix(in srgb, var(--reading-tone) 65%, var(--text));
  text-decoration-color: var(--reading-tone);
  text-underline-offset: .2em;
}
:is(main, .cps-reading, .seo-section) :is(.guide-card, .reading-card, .random-article > section, .gts-guide-sec) li::marker { color: var(--reading-tone); }
:is(main, .cps-reading, .seo-section) .guide-card > :is(h2, h3) > i {
  inline-size: 28px; block-size: 28px; margin-block-start: 0;
  background: none; color: var(--reading-tone); font-size: 1.05rem;
}
:is(main, .cps-reading, .seo-section) .guide-card :is(.technique-item, .training-step) { border: 0; background: none; box-shadow: none; }
:is(main, .cps-reading, .seo-section) .guide-card .training-step-num { color: var(--reading-tone); background: rgb(255 255 255 / .07); }
/* A chapter supplies the surface; parents and embedded reading groups
   never add a second frame. Authored Draft article width stays local. */
main > .content-page[data-reading-chapters] {
  border: 0; border-radius: 0; box-shadow: none; background: none;
  padding-inline: 0;
}
main > .content-page[data-reading-chapters]:not(.draft-article) { max-inline-size: var(--container); }
main > .content-page[data-reading-chapters] > :is(p, ul, ol, blockquote) { max-inline-size: 76ch; }
main .reading-card :is(.guide-card, .reading-card) { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
body[data-page="offline-privacy"] main #policy { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
@media print {
  :is(main, .cps-reading, .seo-section) :is(.guide-card, .reading-card, .random-article > section, .gts-guide-sec),
  body[data-page="offline-privacy"] main #policy > section { background: white; border-color: #aaa; break-inside: avoid; }
  :is(main, .cps-reading, .seo-section) :is(.guide-card, .reading-card, .random-article > section, .gts-guide-sec) :is(p, li, h2, h3, h4, strong, a),
  body[data-page="offline-privacy"] main #policy > section :is(p, li, h2, h3, h4, strong, a) { color: black; }
}