/* ============================================
   190 Expanded Wiki - Three Kingdoms theme (paper & ink)
   Silk/paper ground, ink text, vermilion seal accents,
   lacquer + bronze chrome. No raster art: grain, washes
   and seals are CSS/SVG so the page stays light and legible.
   Legacy token names (--title-cream, --gold-*, --bg-*) are kept as
   aliases because the per-page inline styles still use them; their
   VALUES now mean "ink on paper".
   ============================================ */

/* Self-hosted fonts (SIL OFL 1.1; licences in /total_war/fonts/OFL-*.txt)
   Cinzel            - Latin display / headings
   Source Serif 4    - body text
   Ma Shan Zheng     - brush face, subset to the Chinese glyphs the site uses */
@font-face { font-family: 'Cinzel'; font-weight: 600; font-style: normal; font-display: swap;
    src: url('../fonts/cinzel-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel'; font-weight: 700; font-style: normal; font-display: swap;
    src: url('../fonts/cinzel-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-weight: 400; font-style: normal; font-display: swap;
    src: url('../fonts/source-serif-4-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-weight: 400; font-style: italic; font-display: swap;
    src: url('../fonts/source-serif-4-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-weight: 600; font-style: normal; font-display: swap;
    src: url('../fonts/source-serif-4-latin-600-normal.woff2') format('woff2'); }
/* two subsets with unicode-range: a page downloads only the glyphs it shows (core ~14 KB; names ~350 KB, character pages only) */
@font-face { font-family: 'Ma Shan Zheng'; font-weight: 400; font-style: normal; font-display: swap;
    src: url('../fonts/MaShanZheng-core.woff2') format('woff2');
    unicode-range: U+3400, U+4E09, U+4E0B, U+5091, U+50B3, U+5206, U+5289, U+52E2, U+5353, U+5370, U+53F2, U+5408, U+5433, U+5668, U+570B, U+5716, U+5730, U+5927, U+5929, U+5B6B, U+5B8C, U+5C07, U+5DFE, U+6210, U+65D7, U+66F8-66F9, U+671D, U+672A, U+6CD5, U+6F22, U+7AE0, U+7D2B, U+7FA4, U+82F1, U+8463, U+8700, U+8853, U+8881, U+8A18, U+8B8A, U+9010, U+91D1, U+96C4, U+9B4F, U+9E7F, U+9EC3, U+9FFF; }
@font-face { font-family: 'Ma Shan Zheng'; font-weight: 400; font-style: normal; font-display: swap;
    src: url('../fonts/MaShanZheng-names.woff2') format('woff2');
    unicode-range: U+3762, U+458E, U+4D4B, U+4E01, U+4E07-4E08, U+4E0A, U+4E0D, U+4E15-4E16, U+4E18, U+4E1E, U+4E25-4E26, U+4E2D, U+4E39, U+4E3B, U+4E3D, U+4E42, U+4E59, U+4E7E, U+4E8E, U+4E94, U+4EA5, U+4EAC-4EAD, U+4EB6, U+4EBA, U+4EC1, U+4EC7, U+4ED6, U+4EE3-4EE4, U+4EF2, U+4EFB, U+4F0A, U+4F0D, U+4F0F-4F11, U+4F18, U+4F2F, U+4F34, U+4F36-4F37, U+4F4D, U+4F50, U+4F55, U+4F57, U+4F59, U+4F69, U+4F83, U+4F86, U+4FAF, U+4FCA, U+4FDE, U+4FE1, U+4FEE, U+5009, U+5029-502B, U+5049, U+5055, U+5065, U+5085, U+5095, U+5099, U+50C9, U+50CF, U+50D5, U+50EE, U+5100-5101, U+5109, U+510B, U+5112, U+512A, U+5138, U+513C, U+5140-5141, U+5143, U+5145, U+5148-5149, U+514D, U+5152, U+5154, U+5168, U+516B-516C, U+516E, U+5170, U+5178, U+5189, U+518F, U+51B0, U+51B2, U+51B7, U+51EF, U+51F1, U+5218, U+521D, U+5229, U+5230, U+5247, U+529B, U+52A9, U+52AD, U+52C3, U+52CB, U+52D1, U+52D6, U+52D9, U+52DB, U+52DD-52DE, U+52E4, U+52F3, U+52FF, U+5316-5317, U+5321, U+5339, U+5340, U+5343, U+5347, U+534E, U+5351, U+5354, U+5357, U+535A, U+535C, U+535E, U+537F, U+539F, U+53A5, U+53B2, U+53B7, U+53BB, U+53CB, U+53D4, U+53E1, U+53E4-53E5, U+53EF-53F0, U+53F8, U+5409, U+540C, U+540E, U+5411, U+541B, U+542B, U+5434, U+543E, U+5442, U+5449, U+5468, U+5473, U+547C, U+548C, U+54B8, U+54E1, U+5510, U+5546, U+5581, U+5583-5584, U+5588, U+559C, U+55AC, U+55AE, U+55E3, U+5606, U+5609, U+560F, U+56B4, U+56FA, U+5703, U+571F, U+572D, U+5747, U+57FA, U+5802, U+5805, U+582A, U+5864, U+58EB, U+58F9, U+58FD, U+590F, U+5914-5915, U+591A, U+5922, U+592A-592B, U+592E, U+5937, U+5947-5949, U+594E, U+5950, U+5955, U+595A, U+5962, U+5967, U+596E, U+5973-5974, U+5982-5983, U+5999, U+59D2-59D3, U+59DA, U+59DC, U+59EC, U+5A01, U+5A1C, U+5A1F, U+5A25, U+5A41, U+5A49, U+5A77, U+5A9B, U+5AAF, U+5B50, U+5B54, U+5B58-5B5A, U+5B5D, U+5B5F, U+5B63-5B64, U+5B7A, U+5B87, U+5B89, U+5B8B, U+5B8F, U+5B93, U+5B97, U+5B9A, U+5B9C-5B9D, U+5BA3, U+5BA6, U+5BAA-5BAB, U+5BAE, U+5BB0, U+5BB6, U+5BB9, U+5BC4, U+5BC6-5BC7, U+5BCC, U+5BD4, U+5BDF, U+5BE7, U+5BE9, U+5BF5-5BF6, U+5C01, U+5C04, U+5C0F, U+5C1A, U+5C24, U+5C31, U+5C39, U+5C45, U+5C48, U+5C4B, U+5C4F, U+5C60, U+5C71, U+5C90-5C91, U+5C9A, U+5CB1, U+5CFB, U+5D07, U+5D14, U+5D50, U+5D69, U+5DB7, U+5DDD-5DDE, U+5DE6, U+5DE8, U+5DF1-5DF4, U+5DFD, U+5E02-5E03, U+5E06, U+5E1B, U+5E26, U+5E2B, U+5E2D, U+5E38, U+5E73-5E74, U+5E79, U+5E7C, U+5E7E, U+5EA6, U+5EB6-5EB7, U+5EC9, U+5ED3, U+5ED6, U+5EDA, U+5EDE, U+5EE3, U+5EF6, U+5EFA, U+5F0F, U+5F17-5F18, U+5F20, U+5F35, U+5F37, U+5F3A, U+5F3C, U+5F4C, U+5F65-5F67, U+5F69-5F6A, U+5F6C-5F6D, U+5F70, U+5F8B, U+5F90, U+5F97, U+5F9E, U+5FA1, U+5FAA, U+5FAE, U+5FB5, U+5FB7, U+5FBD, U+5FC5, U+5FD7, U+5FD9, U+5FE0, U+601D, U+6042, U+6055, U+6062, U+6069-606A, U+606D, U+6085, U+608C, U+609D, U+60A6, U+60B3, U+60C7, U+60DF-60E0, U+60EA, U+60F2, U+6148, U+614E, U+6155, U+6167, U+616E, U+6182, U+61B2, U+61C9, U+61CC, U+61F7, U+61FF, U+620F, U+6232, U+6234, U+623F, U+6248, U+624D, U+6276, U+627F, U+62D3, U+62DB, U+6388, U+63D6, U+63DA, U+63F4, U+6469, U+64CD, U+64DA, U+6500, U+652F, U+6538, U+653E-653F, U+654F, U+6557, U+6566, U+656C, U+6587, U+65AD, U+65AF, U+65B9, U+65BC, U+65C2, U+65CB, U+65E5, U+65E9, U+65FB, U+6602, U+6606-6607, U+660C, U+660E, U+6614-6615, U+661F, U+6625, U+662D, U+662F, U+6631, U+6636, U+663A, U+6643, U+664F, U+6653, U+665E-665F, U+666E-666F, U+667A, U+6689, U+66A0, U+66A2, U+66A8, U+66B9, U+66C4, U+66DB-66DC, U+66FC, U+66FE, U+6703, U+6708, U+670D, U+6717, U+671B, U+6728, U+672B-672C, U+6731, U+6735, U+674E-6750, U+675C, U+6765, U+6768, U+677E, U+6797, U+679C, U+67CF, U+67D4, U+67EC, U+67EF, U+67F3-67F4, U+6817, U+6839, U+6840, U+6842-6843, U+6851, U+6853, U+6881, U+6885, U+689D, U+68C4, U+68D7, U+68E7, U+690D, U+694A, U+6959, U+6968, U+696B, U+696D, U+6977, U+6986, U+69A6, U+69AE, U+69D0, U+6A02, U+6A0A, U+6A13, U+6A21, U+6A38, U+6A4B, U+6A5F, U+6A6B, U+6A80, U+6B0A, U+6B23, U+6B3D, U+6B46, U+6B50, U+6B63, U+6B65-6B66, U+6B78, U+6BB5, U+6BC5, U+6BCC-6BCD, U+6BD2-6BD4, U+6BD7, U+6BDB, U+6C0F, U+6C11, U+6C38, U+6C3E, U+6C5C, U+6C5F, U+6C7E, U+6C88, U+6C96, U+6C99, U+6C9B, U+6CAE, U+6CB3, U+6CBB, U+6CBE-6CBF, U+6CC9, U+6CD3, U+6CE0, U+6CE2, U+6CE5, U+6CF0, U+6D01, U+6D0B, U+6D1B, U+6D1E, U+6D2A, U+6D3D, U+6D66, U+6D69, U+6D77, U+6D89, U+6DBC, U+6DD1, U+6DDA, U+6DE9, U+6DEE-6DEF, U+6DF3, U+6DF5, U+6E05, U+6E19, U+6E3E, U+6E58, U+6E5B, U+6E90, U+6EAB, U+6ED5, U+6EFF, U+6F14, U+6F31, U+6F41, U+6F54, U+6F58, U+6F5B, U+6F64, U+6FA4, U+6FB9, U+6FDF, U+6FE4, U+6FEC, U+6FEE, U+7075, U+707C, U+7085, U+708E, U+70C8, U+70CF, U+7109, U+7126, U+7136, U+715A, U+7168, U+7199, U+71BE, U+71D5, U+71EE, U+7228, U+7231, U+723D-723E, U+7259, U+725B, U+725F, U+7267, U+727D, U+72A2, U+72D0, U+72FC, U+731B, U+7372, U+7384, U+7389, U+738B, U+73A0, U+73A9, U+73B2, U+73CC-73CD, U+73DD, U+73E0, U+73E3, U+73EA, U+73ED, U+7403, U+7406, U+7426, U+7428, U+742A, U+742C, U+742E, U+7430, U+7433, U+7440-7441, U+744B, U+7452, U+7457, U+745C, U+745E, U+747E, U+7489, U+748B, U+749C-749D, U+74A0, U+74A3, U+74A9, U+74B0, U+74CA, U+74D8, U+74DA, U+7504, U+7518, U+751F, U+752B, U+7530-7531, U+7533, U+7537-7538, U+7545, U+7559, U+7562, U+756A, U+756F-7570, U+7576, U+757F, U+7586-7587, U+7591, U+767B-767D, U+7687, U+768E, U+7693, U+76CA, U+76DB, U+76E7, U+76EE, U+76F4, U+76F8, U+771E-771F, U+772D, U+7766, U+777F, U+77BF, U+77E2, U+77E9, U+77EF, U+77F3, U+782E, U+78A9, U+78AD, U+78D0, U+78FE, U+7940-7941, U+7947, U+7949, U+794E, U+7950, U+7956-7957, U+795D, U+7965, U+797A, U+797F, U+7981, U+7984, U+798E-798F, U+7995, U+79AA, U+79AE, U+79B0, U+79BA-79BB, U+79BF-79C0, U+79C9, U+79CB, U+79E6, U+7A0B, U+7A1A, U+7A20, U+7A2E, U+7A37, U+7A3D, U+7A46, U+7A4E, U+7A57, U+7A81, U+7AC7, U+7ACB, U+7AE6, U+7AEF, U+7AFA, U+7B26, U+7B2E, U+7B56, U+7BA1, U+7BC0, U+7BC4, U+7BC9, U+7BE4, U+7C21, U+7C4D, U+7C9F, U+7CB2, U+7CB9, U+7CF8, U+7D00, U+7D04, U+7D06, U+7D10, U+7D14, U+7D18, U+7D20, U+7D2F, U+7D39, U+7D50, U+7D71, U+7D93, U+7D9C-7D9D, U+7DA6, U+7DAD, U+7DB1, U+7DD2, U+7DEF, U+7DF4, U+7E3E, U+7E41, U+7E46-7E47, U+7E61, U+7E7C, U+7E82, U+7E8C, U+7EA2, U+7EEA, U+7F09, U+7F57, U+7F7D, U+7F85, U+7F8A, U+7F8E, U+7F95, U+7FA1, U+7FA3, U+7FA9, U+7FB2, U+7FBD, U+7FC1, U+7FCA, U+7FD2, U+7FD4-7FD5, U+7FE0, U+7FFC, U+8000-8001, U+8003, U+8010, U+803D, U+803F, U+8056, U+8058, U+8076, U+8085, U+8096, U+809C, U+80B1-80B2, U+80C4, U+80E1, U+80E4, U+80FD, U+8129, U+817F, U+81BA, U+81E7-81E8, U+81F3, U+81F6, U+81FA, U+8208-8209, U+820D, U+8212, U+826F, U+827E, U+829D, U+82AC, U+82AE, U+82B1, U+82B3, U+82D1, U+82D7, U+82DE, U+82E5-82E6, U+8302-8303, U+8309, U+8332, U+8334, U+8340, U+8342, U+837C, U+8389-838A, U+83AB, U+83B2, U+83CA, U+83E1, U+83EF, U+83F2, U+8407, U+840C-840D, U+842C, U+8431, U+845B, U+8499, U+84AF, U+84CB, U+84EE, U+8521, U+8523, U+8543, U+8559, U+8564, U+856D, U+8584, U+8587, U+859B, U+8607, U+862D, U+864E, U+8653-8654, U+865E, U+878D, U+87EC, U+884C-884D, U+885B-885C, U+885E, U+8861-8862, U+8868, U+889B, U+88A4, U+88D4-88D5, U+88F4, U+8912, U+891A, U+8944, U+8986, U+89BA, U+89BD, U+89C0, U+89D2, U+89E3, U+8A00, U+8A1F, U+8A31, U+8A55, U+8A61, U+8A69, U+8A70, U+8A79, U+8A95, U+8A98, U+8A9E, U+8ABC, U+8ADD, U+8AF6-8AF8, U+8B00, U+8B10, U+8B16, U+8B19, U+8B1D, U+8B59-8B5A, U+8B70, U+8B77, U+8B93, U+8BA1, U+8BD7, U+8BDE, U+8C26, U+8C37, U+8C46, U+8C50, U+8C54, U+8C61, U+8C68, U+8C6B, U+8C79, U+8C82, U+8C9D-8C9E, U+8CA2, U+8CB4, U+8CBB, U+8CC0-8CC1, U+8CC7-8CC8, U+8CE2, U+8CEA, U+8CF4, U+8D0A, U+8D24, U+8D39, U+8D64, U+8D75, U+8D77, U+8D85, U+8D8A, U+8D99, U+8DCB, U+8DEF, U+8E4B, U+8ECA, U+8EEB, U+8EFB, U+8F05, U+8F09, U+8F14, U+8F2F, U+8F3F, U+8F9B, U+8F9F, U+8FAF, U+8FDE, U+8FEA, U+8FF0, U+901A, U+9022-9023, U+9032, U+9035, U+9038, U+9042, U+9050, U+9053-9054, U+905C, U+9060, U+9075, U+9078, U+907A, U+907C, U+9088, U+908A, U+9095, U+9097, U+90A2-90A3, U+90A6, U+90AF, U+90B4-90B5, U+90C1, U+90C3, U+90CE, U+90D1, U+90DD, U+90E4, U+90ED, U+90FD, U+9112, U+9119, U+9127, U+912D, U+9130, U+9132, U+913A, U+9149, U+914D, U+919C, U+91B4, U+91C7, U+91CC-91CD, U+921E, U+9280, U+9285, U+92D2, U+9322, U+937E, U+9435, U+9452, U+9460, U+9497, U+949F, U+9523, U+955E, U+9577, U+957F-9580, U+958B, U+9594, U+95A8, U+95AD, U+95BB, U+95D3-95D5, U+95DC, U+95DE, U+95E1, U+961A, U+962E, U+9632-9633, U+963F, U+9673, U+9676, U+9678, U+967D, U+9686, U+968E, U+96A8, U+96B1, U+96C5, U+96CD, U+96D5, U+96D9, U+96E8, U+96F2, U+96F7, U+9707, U+970D, U+9732, U+9738, U+973E, U+9748, U+9752, U+9756, U+9759, U+975C, U+9773, U+978F, U+97AC, U+97CB, U+97D3, U+97D9, U+97DC, U+97E6, U+97E9, U+97F3, U+97F6, U+9806, U+9808, U+980C, U+980E, U+9810, U+9812-9813, U+982D, U+984F, U+9852, U+9867, U+986F, U+989C, U+98BA, U+98DB, U+9918, U+9952, U+9996, U+9999, U+99A5, U+99AC, U+99AE, U+99EE, U+99F1, U+99FF, U+9A04, U+9A2B, U+9A2D, U+9A30, U+9A88, U+9A9E, U+9AA8, U+9AD8, U+9AED-9AEE, U+9B31, U+9B37, U+9B41, U+9B5A, U+9B6F, U+9B91, U+9BAE, U+9C9C, U+9CF3, U+9D3B, U+9E1E, U+9E8B, U+9E97, U+9EA6, U+9EB4, U+9EB9, U+9EBB, U+9ECE, U+9ED8, U+9EE8, U+9F0E, U+9F4A, U+9F61, U+9F8D, U+9F90, U+9F94; }

:root {
    /* --- Ground --- */
    --paper: #efe4cc;
    --paper-light: #f7efdc;
    --paper-deep: #e3d4b1;
    --ink: #1f1913;
    --ink-soft: #4a3e31;
    --ink-faint: #6a5b48;
    --line: #cdbb94;
    --line-strong: #b39d70;
    --lacquer: #1d1511;
    --lacquer-2: #2b1d16;
    --silk-cream: #f3e8cc;
    --bronze: #8a6a1f;
    --bronze-dark: #6a4f12;
    --bronze-light: #c4a24f;
    --seal: #a3231d;
    --seal-dark: #6e1612;
    --seal-deep: #6e1612;   /* maroon for BACKGROUNDS; --seal-dark is the readable text/link red */
    --jade: #3d6b53;

    /* --- Legacy aliases (meaning inverted for the light theme) --- */
    --title-cream: var(--ink);
    --title-cream-dark: var(--ink-soft);
    --title-shadow: transparent;
    --gold-primary: var(--bronze);
    --gold-light: var(--bronze-dark);
    --gold-dark: var(--line-strong);
    --red-primary: var(--seal);
    --red-dark: var(--seal-deep);
    --red-darker: #3a0b09;
    --red-accent: var(--seal);
    --bg-primary: var(--paper);
    --bg-secondary: var(--paper-deep);
    --bg-card: var(--paper-light);
    --bg-card-hover: #fcf6e6;
    --text-primary: var(--ink);
    --text-secondary: var(--ink-soft);
    --text-muted: var(--ink-faint);

    /* --- Faction colours (darkened for contrast on paper) --- */
    --faction-han: #8a6a1f;
    --faction-yellow-turban: #b07d0e;
    --faction-nanman: #2e7050;
    --faction-nomad: #5b4aa8;
    --faction-korean: #2f6a9a;
    --faction-bandit: #7a3d16;

    /* theme helpers (overridden in dark mode) */
    --tint-rgb: 110, 75, 25;        /* brown wash on paper */
    --stroke-rgb: 80, 55, 20;       /* tree / connector lines */
    --paper-glass: rgba(247, 239, 220, .98);
    --glow-1: rgba(255, 248, 225, .7);
    --glow-2: rgba(150, 110, 50, .10);
    --sheen: rgba(255, 255, 255, .35);
    --tree-line: #7a6340;
    --c-green: #2e6b3f;
    --c-blue: #2b5f8f;
    --c-red: #8a2a2a;
    --c-purple: #473a8a;
    --c-olive: #63732a;
    --c-orange: #8a4a18;
    --c-pink: #8a3f78;
    color-scheme: light;

    --f-display: 'Cinzel', 'Ma Shan Zheng', 'Times New Roman', serif;
    --f-brush: 'Ma Shan Zheng', 'KaiTi', 'STKaiti', serif;
    --f-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

/* ============================================
   Dark mode: the same tokens, on lacquer and ink-wash.
   Set by theme.js (saved choice, else the system setting).
   ============================================ */
html[data-theme="dark"] {
    --paper: #17120e;
    --paper-light: #211a14;
    --paper-deep: #2b2219;
    --ink: #efe4cc;
    --ink-soft: #cdbf9f;
    --ink-faint: #a1927a;
    --line: #3b3027;
    --line-strong: #5a4a38;
    --lacquer: #0d0907;
    --lacquer-2: #1a100c;
    --bronze: #c4a24f;
    --bronze-dark: #d8b865;
    --seal: #b02a22;
    --seal-dark: #e58a82;
    --seal-deep: #8c2a24;
    --jade: #6fb08c;
    --bg-card-hover: #2a2018;

    --tint-rgb: 235, 210, 165;
    --stroke-rgb: 200, 180, 140;
    --paper-glass: rgba(33, 26, 20, .98);
    --glow-1: rgba(120, 70, 40, .22);
    --glow-2: rgba(60, 40, 20, .35);
    --sheen: rgba(255, 255, 255, .04);
    --tree-line: #8f7d60;
    --c-green: #7fc29a;
    --c-blue: #8ab4e0;
    --c-red: #e58a82;
    --c-purple: #b6a6ee;
    --c-olive: #b3c46a;
    --c-orange: #e0a46a;
    --c-pink: #e3a0cf;
    color-scheme: dark;

    --faction-han: #c4a24f;
    --faction-yellow-turban: #e0b030;
    --faction-nanman: #5fb38a;
    --faction-nomad: #9d8de0;
    --faction-korean: #6aa8d8;
    --faction-bandit: #c4814f;
}
/* element colours (character cards and page), readable on dark */
html[data-theme="dark"] .character-card[data-element="water"],  html[data-theme="dark"] .character-page[data-element="water"]  { --element-color: #7fa6d6; --theme: #7fa6d6; }
html[data-theme="dark"] .character-card[data-element="wood"],   html[data-theme="dark"] .character-page[data-element="wood"]   { --element-color: #7fbf8c; --theme: #7fbf8c; }
html[data-theme="dark"] .character-card[data-element="fire"],   html[data-theme="dark"] .character-page[data-element="fire"]   { --element-color: #e07a72; --theme: #e07a72; }
html[data-theme="dark"] .character-card[data-element="earth"],  html[data-theme="dark"] .character-page[data-element="earth"]  { --element-color: #d6b45f; --theme: #d6b45f; }
html[data-theme="dark"] .character-card[data-element="metal"],  html[data-theme="dark"] .character-page[data-element="metal"]  { --element-color: #b6a6ee; --theme: #b6a6ee; }
html[data-theme="dark"] .character-card[data-element="nanman"], html[data-theme="dark"] .character-page[data-element="nanman"] { --element-color: #b3c46a; --theme: #b3c46a; }
html[data-theme="dark"] .page-bg { mix-blend-mode: screen; opacity: .04; }
html[data-theme="dark"] .rm-progress-fill { background: linear-gradient(90deg, #8c2a24, #c9423a); }

/* the toggle lives in the nav bar (or floats top-right where a page has no nav) */
.theme-item { list-style: none; }
.theme-toggle {
    font-family: var(--f-display); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(243,232,204,.85); background: transparent; border: 1px solid rgba(196,162,79,.55);
    padding: .25rem .65rem; cursor: pointer; border-radius: 2px;
}
.theme-toggle:hover { color: #fff; border-color: var(--bronze-light); }
.theme-toggle-floating { position: absolute; right: 1rem; top: .8rem; }
header .top-nav { position: relative; }

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--f-body);
    font-size: 1.0625rem;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, var(--glow-1), transparent 70%),
        radial-gradient(ellipse 60% 40% at 100% 100%, var(--glow-2), transparent 70%),
        var(--paper);
    color: var(--ink);
    min-height: 100vh;
    line-height: 1.65;
}

a { color: var(--seal-dark); text-underline-offset: 2px; }
a:hover { color: var(--seal); }
:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }
::selection { background: rgba(163,35,29,.22); }

/* Paper grain over the whole page (procedural, ~no weight) */
.page-bg {
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.25  0 0 0 0 0.12  0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: .10;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1000;
}

/* ============================================
   Header - lacquer band with a brushed title
   ============================================ */

header {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(163,35,29,.28), transparent 65%),
        linear-gradient(180deg, var(--lacquer-2), var(--lacquer));
    color: var(--silk-cream);
    border-bottom: 3px double var(--bronze);
    padding: 1rem 2rem 2.75rem;
    text-align: center;
    position: relative;
}

/* faint ink-wash "mountains" low in the band */
header::before {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
    background:
        radial-gradient(ellipse 28% 100% at 18% 100%, rgba(243,232,204,.07), transparent 70%),
        radial-gradient(ellipse 36% 120% at 62% 100%, rgba(243,232,204,.06), transparent 70%),
        radial-gradient(ellipse 22% 80% at 90% 100%, rgba(243,232,204,.07), transparent 70%);
    pointer-events: none;
}

.top-nav { text-align: left; margin-bottom: 1.5rem; position: relative; }

.back-link {
    color: var(--bronze-light);
    text-decoration: none;
    font-size: .95rem;
    transition: color .2s;
}
.back-link:hover { color: var(--silk-cream); }

.header-content { position: relative; }

.header-content .subtitle {
    font-family: var(--f-display);
    font-size: .75rem;
    font-weight: 600;
    color: var(--bronze-light);
    letter-spacing: .4em;
    text-transform: uppercase;
    margin-bottom: .75rem;
}

header h1 {
    font-family: var(--f-display);
    font-size: clamp(2.2rem, 7vw, 4.25rem);
    font-weight: 700;
    color: var(--silk-cream);
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: .75rem;
    position: relative;
    text-shadow: 0 2px 0 rgba(0,0,0,.45);
}

/* brush-stroke rule under the title */
header h1::after {
    content: '';
    display: block;
    width: 60%;
    max-width: 320px;
    height: 6px;
    margin: .9rem auto 0;
    background: var(--seal);
    clip-path: polygon(0 55%, 8% 20%, 30% 40%, 55% 10%, 78% 35%, 100% 15%, 96% 70%, 70% 90%, 45% 70%, 20% 95%, 4% 80%);
    opacity: .9;
}

.tagline { font-style: italic; color: rgba(243,232,204,.82); font-size: 1.05rem; margin-top: .5rem; }

/* ============================================
   Navigation
   ============================================ */

nav.main-nav {
    background: var(--lacquer);
    border-bottom: 1px solid var(--bronze);
    box-shadow: 0 4px 10px rgba(40,25,10,.25);
    padding: .85rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

nav.main-nav ul {
    display: flex;
    justify-content: center;
    gap: 1.75rem;
    list-style: none;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    flex-wrap: wrap;
}

nav.main-nav a {
    font-family: var(--f-display);
    font-size: .8rem;
    font-weight: 600;
    color: rgba(243,232,204,.78);
    text-decoration: none;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: color .2s ease;
    padding: .3rem 0;
    border-bottom: 2px solid transparent;
}
nav.main-nav a:hover { color: var(--silk-cream); }
nav.main-nav a.active {
    color: var(--silk-cream);
    border-bottom-color: var(--seal);
}

/* ============================================
   Main content
   ============================================ */

main { max-width: 1200px; margin: 0 auto; padding: 3rem 2rem; }

h2, h3 { font-family: var(--f-display); letter-spacing: .04em; color: var(--ink); }

/* ============================================
   Home - wiki cards (hung-scroll motif) + seals
   ============================================ */

.wiki-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.75rem;
    margin-bottom: 3.5rem;
}

.wiki-card {
    background:
        linear-gradient(180deg, var(--sheen), transparent 30%),
        var(--paper-light);
    border: 1px solid var(--line);
    border-top: 0; border-bottom: 0;
    padding: 2.1rem 1.6rem 1.7rem;
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease;
    position: relative;
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 2px 6px rgba(70,45,15,.12);
}
/* scroll rods top and bottom */
.wiki-card::before, .wiki-card::after {
    content: '';
    position: absolute; left: -7px; right: -7px; height: 9px;
    background: linear-gradient(180deg, #3a271c, var(--lacquer) 60%, #3a271c);
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(196,162,79,.35);
}
.wiki-card::before { top: -4px; }
.wiki-card::after  { bottom: -4px; }

.wiki-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(70,45,15,.22); }
.wiki-card:hover h2 { color: var(--seal-dark); }

/* Seal (chop): square vermilion stamp with a brush character */
.card-icon, .uc-icon {
    width: 3.1rem; height: 3.1rem;
    display: grid; place-items: center;
    margin-bottom: 1rem;
    background: var(--seal);
    color: #f8e9d0;
    font-family: var(--f-brush);
    font-size: 1.9rem; line-height: 1;
    border-radius: 3px;
    transform: rotate(-3deg);
    box-shadow: inset 0 0 0 2px rgba(248,233,208,.28), inset 0 0 0 4px var(--seal), 0 1px 2px rgba(60,10,5,.35);
}
.uc-icon { margin: 0 auto 1.5rem; width: 4rem; height: 4rem; font-size: 2.4rem; }

.wiki-card h2 {
    font-size: 1.2rem;
    color: var(--ink);
    margin-bottom: .45rem;
    position: relative;
}

.wiki-card p { font-size: .95rem; color: var(--ink-soft); position: relative; line-height: 1.55; }

.quick-stats {
    display: flex;
    justify-content: center;
    gap: 4rem;
    padding: 2rem;
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    flex-wrap: wrap;
    background: linear-gradient(180deg, transparent, rgba(150,110,50,.06), transparent);
}
.stat { text-align: center; }
.stat-number {
    display: block;
    font-family: var(--f-display);
    font-size: 2.5rem; font-weight: 700;
    color: var(--seal-dark);
}
.stat-label { font-size: .85rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .12em; }

/* ============================================
   Factions
   ============================================ */

.intro {
    text-align: center; max-width: 800px;
    margin: 0 auto 3rem; padding-bottom: 2rem;
    border-bottom: 1px solid var(--line-strong);
}
.intro p { color: var(--ink-soft); font-size: 1.1rem; font-style: italic; }

.faction-category { margin-bottom: 3rem; }

.category-header {
    display: flex; align-items: center; gap: 1.5rem;
    margin-bottom: 1.5rem; cursor: pointer; user-select: none;
}
.category-header::before, .category-header::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--line-strong), transparent);
}
.category-header::after { background: linear-gradient(270deg, var(--line-strong), transparent); }

.category-title {
    font-family: var(--f-display);
    font-size: 1.15rem; font-weight: 700;
    color: var(--ink);
    letter-spacing: .15em; text-transform: uppercase;
    white-space: nowrap;
    display: flex; align-items: center; gap: .75rem;
}
.category-title .toggle-icon { font-size: .7rem; color: var(--seal); transition: transform .3s ease; }
.faction-category.collapsed .toggle-icon { transform: rotate(-90deg); }
.category-count { font-family: var(--f-body); font-size: .85rem; color: var(--ink-faint); font-weight: 400; }

.faction-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    overflow: hidden;
    transition: max-height .5s ease, opacity .3s ease;
}
.faction-category.collapsed .faction-grid { max-height: 0; opacity: 0; margin: 0; }

.faction-card {
    background: var(--paper-light);
    border: 1px solid var(--line);
    border-left: 4px solid var(--faction-color, var(--bronze));
    padding: 1rem 1.25rem;
    transition: transform .2s ease, box-shadow .2s ease, background .2s;
    position: relative;
}
.faction-card:hover {
    background: var(--bg-card-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(70,45,15,.18);
}
.faction-card[data-type="han"] { --faction-color: var(--faction-han); }
.faction-card[data-type="yellow-turban"] { --faction-color: var(--faction-yellow-turban); }
.faction-card[data-type="nanman"] { --faction-color: var(--faction-nanman); }
.faction-card[data-type="nomad"] { --faction-color: var(--faction-nomad); }
.faction-card[data-type="korean"] { --faction-color: var(--faction-korean); }
.faction-card[data-type="bandit"] { --faction-color: var(--faction-bandit); }

.faction-name { font-family: var(--f-display); font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: .25rem; letter-spacing: .03em; }
.faction-leader { font-size: .9rem; color: var(--ink-soft); margin-bottom: .75rem; }
.faction-tags { display: flex; gap: .5rem; flex-wrap: wrap; }

.faction-tag {
    font-size: .68rem; padding: .12rem .5rem;
    background: rgba(138,106,31,.10);
    border: 1px solid var(--line-strong);
    color: var(--bronze-dark);
    letter-spacing: .06em; text-transform: uppercase;
}
.faction-tag.modded { background: rgba(163,35,29,.09); border-color: rgba(163,35,29,.5); color: var(--seal-dark); }
.faction-tag.dlc { background: rgba(91,74,168,.09); border-color: rgba(91,74,168,.5); color: var(--c-purple); }

/* ============================================
   Footer
   ============================================ */

footer {
    background: var(--lacquer);
    color: rgba(243,232,204,.7);
    border-top: 3px double var(--bronze);
    padding: 2rem;
    text-align: center;
    margin-top: 4rem;
}
footer p { font-size: .9rem; color: rgba(243,232,204,.7); }
footer a { color: var(--silk-cream); text-decoration: none; }
footer a:hover { text-decoration: underline; color: #fff; }
footer .ext-links { margin-top: .5rem; font-size: .85rem; letter-spacing: .05em; }

.links-row { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; margin: 0 auto 3rem; }

.link-btn {
    font-family: var(--f-display);
    font-size: .78rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    padding: .6rem 1.1rem;
    border: 1px solid var(--line-strong);
    background: var(--paper-light);
    transition: all .2s ease;
}
.link-btn:hover { border-color: var(--seal); color: var(--seal-dark); background: var(--bg-card-hover); }
.link-btn.steam { border-left: 4px solid #1b2838; }
.link-btn.nexus { border-left: 4px solid #d98e04; }
.link-btn.discord { border-left: 4px solid #5865f2; }
.link-btn.github { border-left: 4px solid #6e5494; }

/* ============================================
   Animations (respect reduced motion)
   ============================================ */

.faction-card { opacity: 0; transform: translateY(12px); animation: fadeInUp .4s ease forwards; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
.faction-grid .faction-card:nth-child(1) { animation-delay: .02s; }
.faction-grid .faction-card:nth-child(2) { animation-delay: .04s; }
.faction-grid .faction-card:nth-child(3) { animation-delay: .06s; }
.faction-grid .faction-card:nth-child(4) { animation-delay: .08s; }
.faction-grid .faction-card:nth-child(5) { animation-delay: .10s; }
.faction-grid .faction-card:nth-child(6) { animation-delay: .12s; }
.faction-grid .faction-card:nth-child(7) { animation-delay: .14s; }
.faction-grid .faction-card:nth-child(8) { animation-delay: .16s; }
.faction-grid .faction-card:nth-child(9) { animation-delay: .18s; }
.faction-grid .faction-card:nth-child(10) { animation-delay: .20s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 768px) {
    body { font-size: 1rem; }
    header { padding: .75rem 1rem 2rem; }
    main { padding: 2rem 1rem; }
    nav.main-nav { padding: .5rem 0; }
    nav.main-nav ul { gap: .35rem 1rem; padding: 0 .75rem; }
    nav.main-nav a { font-size: .72rem; letter-spacing: .08em; padding: .45rem 0; }
    .category-title { font-size: 1rem; letter-spacing: .08em; white-space: normal; }
    .quick-stats { gap: 2rem; }
    .stat-number { font-size: 2rem; }
    .wiki-links { gap: 1.5rem; }
}

/* ============================================
   Under construction / locked records
   ============================================ */

.under-construction {
    background: var(--paper-light);
    border: 1px solid var(--line-strong);
    border-left: 4px solid var(--seal);
    padding: 3rem 2.5rem;
    max-width: 760px;
    margin: 4rem auto;
    text-align: center;
    position: relative;
}
.under-construction::before {
    content: "未完成";
    position: absolute; top: -1.2rem; left: 50%; transform: translateX(-50%);
    font-family: var(--f-brush);
    font-size: 1rem; letter-spacing: .3em;
    padding: .2rem .75rem;
    background: var(--paper);
    color: var(--ink-faint);
    border: 1px solid var(--line-strong);
}
.under-construction h2 { font-size: 1.6rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; }
.under-construction p { font-size: 1rem; color: var(--ink-soft); max-width: 560px; margin: 0 auto 1.5rem; line-height: 1.7; font-style: italic; }
.uc-divider { width: 60%; height: 1px; margin: 2rem auto; background: linear-gradient(90deg, transparent, var(--bronze), transparent); }
.uc-status { font-size: .8rem; color: var(--ink-faint); letter-spacing: .2em; text-transform: uppercase; }

/* In-page back links sit on paper, not on the lacquer header */
.back-link:not(header .back-link) { color: var(--seal-dark); }
.back-link:not(header .back-link):hover { color: var(--seal); text-decoration: underline; }

/* Character page header: name in Cinzel, Chinese name in brush */
header h1 .brush-name { font-family: var(--f-brush); font-weight: 400; text-transform: none; letter-spacing: .05em; margin-left: .25em; }

/* ---------- Support buttons (Ko-fi / Patreon) ---------- */
.support-row { margin-bottom: .9rem; font-size: .95rem; }
footer .support-row span { color: rgba(243,232,204,.75); margin-right: .4rem; }
.support-btn {
    display: inline-block; margin: .15rem .3rem;
    font-family: var(--f-display); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    text-decoration: none; padding: .4rem .85rem; border-radius: 2px;
    color: var(--silk-cream); background: transparent; border: 1px solid var(--bronze-light);
}
.support-btn:hover { color: #fff; text-decoration: none; }
.support-btn.kofi { border-left: 4px solid #ff5e5b; }
.support-btn.patreon { border-left: 4px solid #ff424d; }
.support-btn.kofi:hover { background: #ff5e5b; border-color: #ff5e5b; }
.support-btn.patreon:hover { background: #ff424d; border-color: #ff424d; }
/* on the home page the buttons sit with the other link buttons on paper */
.links-row .support-btn { color: var(--ink); border-color: var(--line-strong); background: var(--paper-light); margin: 0; padding: .6rem 1.1rem; font-size: .78rem; }
.links-row .support-btn:hover { color: #fff; }