/* Lamentosa UI v2 — base: fonts, design tokens and the reset that only
   applies under html.lx (in-game pages, see base_user.html).
   Every component class is prefixed lx- so it never collides with the
   legacy stylesheet (app1.css), which still styles screens not yet ported. */

@font-face { font-family: 'LX Alegreya Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(../v2/fonts/alegreya-sans-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'LX Alegreya Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(../v2/fonts/alegreya-sans-latin-ext-400.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'LX Alegreya Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(../v2/fonts/alegreya-sans-cyrillic-400.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'LX Alegreya Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(../v2/fonts/alegreya-sans-cyrillic-ext-400.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'LX Alegreya Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(../v2/fonts/alegreya-sans-latin-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'LX Alegreya Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(../v2/fonts/alegreya-sans-latin-ext-500.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'LX Alegreya Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(../v2/fonts/alegreya-sans-cyrillic-500.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'LX Alegreya Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(../v2/fonts/alegreya-sans-cyrillic-ext-500.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'LX Alegreya Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(../v2/fonts/alegreya-sans-latin-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'LX Alegreya Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(../v2/fonts/alegreya-sans-latin-ext-700.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'LX Alegreya Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(../v2/fonts/alegreya-sans-cyrillic-700.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'LX Alegreya Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(../v2/fonts/alegreya-sans-cyrillic-ext-700.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'LX Cinzel'; font-style: normal; font-weight: 500; font-display: swap; src: url(../v2/fonts/cinzel-latin-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'LX Cinzel'; font-style: normal; font-weight: 500; font-display: swap; src: url(../v2/fonts/cinzel-latin-ext-500.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'LX Cinzel'; font-style: normal; font-weight: 600; font-display: swap; src: url(../v2/fonts/cinzel-latin-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'LX Cinzel'; font-style: normal; font-weight: 600; font-display: swap; src: url(../v2/fonts/cinzel-latin-ext-600.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'LX Cinzel'; font-style: normal; font-weight: 700; font-display: swap; src: url(../v2/fonts/cinzel-latin-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'LX Cinzel'; font-style: normal; font-weight: 700; font-display: swap; src: url(../v2/fonts/cinzel-latin-ext-700.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'LX Cinzel Decorative'; font-style: normal; font-weight: 700; font-display: swap; src: url(../v2/fonts/cinzel-decorative-latin-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Legacy family names (base.styl) now draw the v2 faces, so screens not yet
   rebuilt share the same type. Same weight descriptors as the legacy
   @font-face rules; declared later, so these win. */
@font-face { font-family: 'Raleway Regular'; font-style: normal; font-weight: normal; font-display: swap; src: url(../v2/fonts/alegreya-sans-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Raleway Regular'; font-style: normal; font-weight: normal; font-display: swap; src: url(../v2/fonts/alegreya-sans-latin-ext-400.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Raleway Regular'; font-style: normal; font-weight: normal; font-display: swap; src: url(../v2/fonts/alegreya-sans-cyrillic-400.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Raleway Regular'; font-style: normal; font-weight: normal; font-display: swap; src: url(../v2/fonts/alegreya-sans-cyrillic-ext-400.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Raleway Semi'; font-style: normal; font-weight: normal; font-display: swap; src: url(../v2/fonts/alegreya-sans-latin-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Raleway Semi'; font-style: normal; font-weight: normal; font-display: swap; src: url(../v2/fonts/alegreya-sans-latin-ext-500.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Raleway Semi'; font-style: normal; font-weight: normal; font-display: swap; src: url(../v2/fonts/alegreya-sans-cyrillic-500.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Raleway Semi'; font-style: normal; font-weight: normal; font-display: swap; src: url(../v2/fonts/alegreya-sans-cyrillic-ext-500.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Raleway SemiBold'; font-style: normal; font-weight: normal; font-display: swap; src: url(../v2/fonts/alegreya-sans-latin-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Raleway SemiBold'; font-style: normal; font-weight: normal; font-display: swap; src: url(../v2/fonts/alegreya-sans-latin-ext-500.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Raleway SemiBold'; font-style: normal; font-weight: normal; font-display: swap; src: url(../v2/fonts/alegreya-sans-cyrillic-500.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Raleway SemiBold'; font-style: normal; font-weight: normal; font-display: swap; src: url(../v2/fonts/alegreya-sans-cyrillic-ext-500.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Raleway Bold'; font-style: normal; font-weight: bold; font-display: swap; src: url(../v2/fonts/alegreya-sans-latin-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Raleway Bold'; font-style: normal; font-weight: bold; font-display: swap; src: url(../v2/fonts/alegreya-sans-latin-ext-700.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Raleway Bold'; font-style: normal; font-weight: bold; font-display: swap; src: url(../v2/fonts/alegreya-sans-cyrillic-700.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Raleway Bold'; font-style: normal; font-weight: bold; font-display: swap; src: url(../v2/fonts/alegreya-sans-cyrillic-ext-700.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Cinzel Regular'; font-style: normal; font-weight: bold; font-display: swap; src: url(../v2/fonts/cinzel-latin-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cinzel Regular'; font-style: normal; font-weight: bold; font-display: swap; src: url(../v2/fonts/cinzel-latin-ext-500.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cinzel Bold'; font-style: normal; font-weight: bold; font-display: swap; src: url(../v2/fonts/cinzel-latin-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cinzel Bold'; font-style: normal; font-weight: bold; font-display: swap; src: url(../v2/fonts/cinzel-latin-ext-700.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cinzel Decorative Regular'; font-style: normal; font-weight: bold; font-display: swap; src: url(../v2/fonts/cinzel-decorative-latin-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cinzel Decorative Bold'; font-style: normal; font-weight: bold; font-display: swap; src: url(../v2/fonts/cinzel-decorative-latin-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

html.lx {
  --ink-0: #060405;
  --ink-1: #0c0809;
  --ink-2: #140e10;
  --ink-3: #1d1517;
  --ink-4: #2a1e21;
  --line: rgba(214, 200, 178, .12);
  --line-2: rgba(214, 200, 178, .24);
  --bone: #efe6d6;
  --text: #d3c8b8;
  --muted: #958a7d;
  --faint: #685f56;
  --blood: #6b1024;
  --blood-2: #9c2a44;
  --blood-glow: rgba(140, 28, 56, .42);
  --wine-hi: #8e2238;
  --wine-mid: #5a1122;
  --wine-lo: #2c0611;
  --gold: #c9a05a;
  --gold-2: #f0cf88;
  --gold-glow: rgba(240, 207, 136, .35);
  --wolf: #8fb0db;
  --heal: #6fbf7c;
  --metal: linear-gradient(180deg, #f6efe2 0%, #b9b0a3 45%, #6f675e 55%, #d8cfc1 100%);
  --metal-gold: linear-gradient(180deg, #fff1c4 0%, #e3bd6a 45%, #8a6326 55%, #f0cf88 100%);
  --display: 'LX Cinzel', Georgia, serif;
  --deco: 'LX Cinzel Decorative', 'LX Cinzel', Georgia, serif;
  --body: 'LX Alegreya Sans', 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --rail: 232px;
  --dock: 340px;
  --hud: 68px;
}

/* The legacy sheet sets font-family and color on every element (`*`).
   :where() keeps this at zero specificity: it beats that `*`, loses to
   any real rule, and lets text inherit from the v2 components again. */
:where(html.lx) * { font-family: inherit; color: inherit; }
html.lx { background: var(--ink-0); }
html.lx body {
  font: 400 16px/1.5 var(--body);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.lx-num { font-variant-numeric: lining-nums tabular-nums; }
:where(html.lx [class^='lx-'] img, html.lx [class*=' lx-'] img) { max-width: 100%; }
:where(html.lx button[class^='lx-']) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  html.lx *, html.lx *::before, html.lx *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------ icons */
.lx-ic {
  display: inline-block;
  width: 1em; height: 1em;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
          mask: var(--i) center / contain no-repeat;
}
.lx-ic--metal { background: var(--metal); }
.lx-ic--gold { background: var(--metal-gold); }
.lx-ic--blood { background: linear-gradient(180deg, #f08d9c, #9e2440 60%, #560c1e); }
.lx-ic--wolf { background: linear-gradient(180deg, #e3eefc, #8fb0db 55%, #4f6f99); }
.lx-i-swords { --i: url(../v2/icons/crossed-swords.svg); }
.lx-i-sword-clash { --i: url(../v2/icons/sword-clash.svg); }
.lx-i-fist { --i: url(../v2/icons/mailed-fist.svg); }
.lx-i-shield { --i: url(../v2/icons/checked-shield.svg); }
.lx-i-sprint { --i: url(../v2/icons/sprint.svg); }
.lx-i-brain { --i: url(../v2/icons/brain.svg); }
.lx-i-sands { --i: url(../v2/icons/sands-of-time.svg); }
.lx-i-heart { --i: url(../v2/icons/heart-organ.svg); }
.lx-i-crown { --i: url(../v2/icons/crowned-skull.svg); }
.lx-i-book { --i: url(../v2/icons/spell-book.svg); }
.lx-i-eye { --i: url(../v2/icons/eye.svg); }
.lx-i-download { --i: url(../v2/icons/lx-download.svg); }
.lx-i-coins { --i: url(../v2/icons/two-coins.svg); }
.lx-i-crystal { --i: url(../v2/icons/crystal-growth.svg); }
.lx-i-castle { --i: url(../v2/icons/castle.svg); }
.lx-i-banner { --i: url(../v2/icons/knight-banner.svg); }
.lx-i-bag { --i: url(../v2/icons/swap-bag.svg); }
.lx-i-podium { --i: url(../v2/icons/podium-winner.svg); }
.lx-i-scroll { --i: url(../v2/icons/scroll-unfurled.svg); }
.lx-i-vampire { --i: url(../v2/icons/vampire-dracula.svg); }
.lx-i-wolf { --i: url(../v2/icons/wolf-howl.svg); }
.lx-i-wolf-head { --i: url(../v2/icons/wolf-head.svg); }
.lx-i-drop { --i: url(../v2/icons/drop.svg); }
.lx-i-upgrade { --i: url(../v2/icons/upgrade.svg); }
.lx-i-flask { --i: url(../v2/icons/round-bottom-flask.svg); }
.lx-i-potion { --i: url(../v2/icons/health-potion.svg); }
.lx-i-bell { --i: url(../v2/icons/ringing-bell.svg); }
.lx-i-envelope { --i: url(../v2/icons/envelope.svg); }
.lx-i-chat { --i: url(../v2/icons/conversation.svg); }
.lx-i-cog { --i: url(../v2/icons/cog.svg); }
.lx-i-anvil { --i: url(../v2/icons/anvil.svg); }
.lx-i-shop { --i: url(../v2/icons/shop.svg); }
.lx-i-church { --i: url(../v2/icons/church.svg); }
.lx-i-laurels { --i: url(../v2/icons/laurels.svg); }
.lx-i-broken-shield { --i: url(../v2/icons/broken-shield.svg); }
.lx-i-dodge { --i: url(../v2/icons/dodging.svg); }
.lx-i-chest { --i: url(../v2/icons/open-treasure-chest.svg); }
.lx-i-dungeon { --i: url(../v2/icons/dungeon-gate.svg); }
.lx-i-moon { --i: url(../v2/icons/moon-bats.svg); }
.lx-i-claws { --i: url(../v2/icons/moon-claws.svg); }
.lx-i-skull { --i: url(../v2/icons/fanged-skull.svg); }
.lx-i-broken-skull { --i: url(../v2/icons/broken-skull.svg); }
.lx-i-candle { --i: url(../v2/icons/candle-flame.svg); }
.lx-i-menu { --i: url(../v2/icons/hamburger-menu.svg); }
.lx-i-search { --i: url(../v2/icons/magnifying-glass.svg); }
.lx-i-reflect { --i: url(../v2/icons/shield-reflect.svg); }
.lx-i-bloody-sword { --i: url(../v2/icons/bloody-sword.svg); }
.lx-i-quill { --i: url(../v2/icons/quill-ink.svg); }
.lx-i-trophy { --i: url(../v2/icons/trophy.svg); }
.lx-i-medal { --i: url(../v2/icons/medal-skull.svg); }
.lx-i-helm { --i: url(../v2/icons/visored-helm.svg); }
.lx-i-armor { --i: url(../v2/icons/breastplate.svg); }
.lx-i-sword { --i: url(../v2/icons/broadsword.svg); }
.lx-i-pendant { --i: url(../v2/icons/gem-pendant.svg); }
.lx-i-cross { --i: url(../v2/icons/gothic-cross.svg); }
.lx-i-wound { --i: url(../v2/icons/bleeding-wound.svg); }
.lx-i-hood { --i: url(../v2/icons/hood.svg); }
.lx-i-tomb { --i: url(../v2/icons/tombstone.svg); }
.lx-i-stopwatch { --i: url(../v2/icons/stopwatch.svg); }
.lx-i-rose { --i: url(../v2/icons/rose.svg); }
.lx-i-seal { --i: url(../v2/icons/wax-seal.svg); }
.lx-i-heart-drop { --i: url(../v2/icons/heart-drop.svg); }
.lx-i-lock { --i: url(../v2/icons/padlock.svg); }
.lx-i-gem { --i: url(../v2/icons/gem-pendant.svg); }
.lx-i-close { --i: url(../v2/icons/lx-close.svg); }
.lx-i-chevrons-right { --i: url(../v2/icons/lx-chevrons-right.svg); }
.lx-i-expand { --i: url(../v2/icons/lx-expand.svg); }
.lx-i-compress { --i: url(../v2/icons/lx-compress.svg); }

/* ------------------------------------------------------------ backdrop */
.lx-backdrop {
  position: fixed; inset: 0; z-index: -1;
  background: var(--bg) center 20% / cover no-repeat, var(--ink-0);
}
.lx-backdrop::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(110% 75% at 50% 10%, rgba(6, 4, 5, .05) 0%, rgba(6, 4, 5, .6) 55%, rgba(6, 4, 5, .95) 100%),
    linear-gradient(180deg, rgba(6, 4, 5, .15), rgba(6, 4, 5, .75) 60%, rgba(6, 4, 5, .95));
}

/* ------------------------------------------------------------ frame + plate */
/* 9-slice SVG frame: draws over the padding, never breaks at any size */
.lx-frame {
  position: relative;
  border: 6px solid transparent;
  border-image: url(../v2/svg/frame-silver.svg) 40 / 40px / 0 stretch;
  background:
    linear-gradient(180deg, rgba(255, 236, 210, .035), rgba(0, 0, 0, .25)),
    radial-gradient(120% 60% at 50% 0%, rgba(107, 16, 36, .08), transparent 70%),
    rgba(17, 12, 14, .92);
  background-clip: padding-box;
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .95);
}
.lx-frame--gold { border-image-source: url(../v2/svg/frame-gold.svg); }
.lx-frame--blood { border-image-source: url(../v2/svg/frame-blood.svg); }
.lx-frame--iron { border-image-source: url(../v2/svg/frame-iron.svg); }
.lx-frame--glass { background: rgba(12, 8, 9, .72); backdrop-filter: blur(6px); }

.lx-plate {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 46px;
  border: 0 solid transparent;
  border-width: 0 38px;
  border-image: url(../v2/svg/plate.svg) 0 44 fill / 0 38px stretch;
  font: 600 .86rem/1 var(--display);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--bone);
  text-shadow: 0 1px 0 #000;
  white-space: nowrap;
}
.lx-plate { padding: 0 6px; }
.lx-plate--gold { border-image-source: url(../v2/svg/plate-gold.svg); color: #fff3d0; }
.lx-plate--blood { border-image-source: url(../v2/svg/plate-blood.svg); }
.lx-plate .lx-ic { font-size: 1.15rem; }

.lx-divider { height: 20px; background: url(../v2/svg/divider.svg) center / contain no-repeat; }

.lx-section-head { display: flex; justify-content: center; margin: -22px 0 14px; position: relative; z-index: 3; }
/* a long title on a phone wraps inside its card instead of overflowing */
@media (max-width: 760px) {
  .lx-section-head .lx-plate { max-width: 100%; white-space: normal; text-align: center; line-height: 1.3; }
}

/* ------------------------------------------------------------ buttons */
.lx-btn {
  position: relative; margin: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 26px;
  font: 600 .82rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase;
  color: var(--bone);
  border-radius: 3px;
  background: linear-gradient(180deg, #2f2427, #171113);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(214, 200, 178, .28), inset 0 1px 0 rgba(255, 240, 220, .12), 0 8px 18px -10px #000;
  transition: transform .15s var(--ease), filter .2s, box-shadow .2s;
  white-space: nowrap;
}
.lx-btn::before, .lx-btn::after {
  content: ''; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  transform: rotate(45deg); background: var(--metal); box-shadow: 0 0 0 1px #000;
}
.lx-btn::before { left: -4px; }
.lx-btn::after { right: -4px; }
.lx-btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
.lx-btn:active { transform: translateY(1px); }
.lx-btn .lx-ic { font-size: 1.25rem; }
.lx-btn--blood {
  background: linear-gradient(180deg, var(--wine-hi) 0%, var(--wine-mid) 52%, var(--wine-lo) 100%);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(232, 170, 160, .28), inset 0 1px 0 rgba(255, 215, 200, .22), 0 10px 24px -10px var(--blood-glow);
  color: #f6e7da;
}
.lx-btn--blood:hover { box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(240, 190, 170, .42), 0 0 26px var(--blood-glow); }
.lx-btn--gold {
  color: #241707;
  text-shadow: 0 1px 0 rgba(255, 245, 210, .4);
  background: linear-gradient(180deg, #ffe6a8 0%, #d6ac5f 50%, #94692a 100%);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255, 248, 220, .6), 0 0 24px var(--gold-glow);
}
.lx-btn--ghost { background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px var(--line-2); }
.lx-btn--ghost::before, .lx-btn--ghost::after { display: none; }
.lx-btn--lg { min-height: 56px; padding: 0 38px; font-size: .95rem; }
.lx-btn--sm { min-height: 36px; padding: 0 16px; font-size: .7rem; }
.lx-btn--icon { min-width: 46px; padding: 0; }
.lx-btn--icon::before, .lx-btn--icon::after { display: none; }

/* ------------------------------------------------------------ checkbox
   Every checkbox (targets list, as_theme forms, Django widgets, file
   "clear") gets the v2 look instead of the browser's white box: a dark
   inset square, wine fill and a white tick when checked, a dash when
   indeterminate (select all, partly). The lf switch keeps its own track
   (.lf-switch-input is visually hidden), [hidden] ones stay hidden.
   html:is() outweighs the legacy form rules (.form-group … input). */
html:is(.lx, .lx-site) input[type='checkbox']:not(.lf-switch-input):not([hidden]) {
  -webkit-appearance: none; appearance: none; flex: none;
  display: inline-grid; place-content: center; vertical-align: middle;
  width: 18px; height: 18px; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 3px; cursor: pointer;
  background: #0b0708; box-shadow: inset 0 0 0 1px var(--line-2), inset 0 2px 4px rgba(0, 0, 0, .6);
  transition: background .15s, box-shadow .15s;
}
html:is(.lx, .lx-site) input[type='checkbox']:not(.lf-switch-input)::before {
  content: ''; width: 12px; height: 12px; background: #fff; transform: scale(0); transition: transform .15s var(--ease);
  -webkit-mask: url(../v2/icons/lx-check.svg) center / contain no-repeat;
          mask: url(../v2/icons/lx-check.svg) center / contain no-repeat;
}
html:is(.lx, .lx-site) input[type='checkbox']:not(.lf-switch-input):hover { box-shadow: inset 0 0 0 1px rgba(201, 160, 90, .55), inset 0 2px 4px rgba(0, 0, 0, .6); }
html:is(.lx, .lx-site) input[type='checkbox']:not(.lf-switch-input):is(:checked, :indeterminate) {
  background: linear-gradient(180deg, var(--wine-hi), var(--wine-mid));
  box-shadow: inset 0 0 0 1px rgba(240, 150, 170, .45), 0 0 10px -3px var(--blood-glow);
}
html:is(.lx, .lx-site) input[type='checkbox']:not(.lf-switch-input):checked::before { transform: scale(1); }
html:is(.lx, .lx-site) input[type='checkbox']:not(.lf-switch-input):indeterminate::before { transform: scale(1); height: 2px; border-radius: 1px; -webkit-mask: none; mask: none; }
html:is(.lx, .lx-site) input[type='checkbox']:not(.lf-switch-input):focus-visible { outline: 1px solid var(--gold-2); outline-offset: 2px; }
html:is(.lx, .lx-site) input[type='checkbox']:not(.lf-switch-input):disabled { opacity: .45; cursor: not-allowed; }

/* ------------------------------------------------------------ socket, bars, chips */
.lx-socket {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px;
  background: url(../v2/svg/socket.svg) center / contain no-repeat;
}
.lx-socket .lx-ic { font-size: 22px; }
.lx-socket--lg { width: 64px; height: 64px; }
.lx-socket--lg .lx-ic { font-size: 32px; }

.lx-bar {
  position: relative; height: 12px; border-radius: 2px; overflow: hidden;
  background: linear-gradient(180deg, #030202, #120c0e);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(214, 200, 178, .14), inset 0 2px 4px #000;
}
.lx-bar > i {
  position: absolute; inset: 0 auto 0 0; width: var(--v, 50%);
  background: linear-gradient(180deg, #b7ab9b, #6a6054);
  box-shadow: inset 0 1px 0 rgba(255, 240, 220, .45), inset 0 -2px 3px rgba(0, 0, 0, .4);
}
.lx-bar > b { /* value before (ghost) */
  position: absolute; inset: 0 auto 0 0; width: var(--w, 0);
  background: repeating-linear-gradient(135deg, rgba(156, 42, 68, .3) 0 4px, rgba(156, 42, 68, .12) 4px 8px);
}
.lx-bar--life > i { background: linear-gradient(180deg, #e25a6c, #a11d35 55%, #5c0a1a); }
.lx-bar--xp > i { background: linear-gradient(180deg, #ffe7a6, #d1a24f 55%, #87601f); }
.lx-bar--xp > i::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 250, 230, .55) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: sheen 5s ease-in-out infinite;
}
.lx-bar--gold > i { background: linear-gradient(180deg, #ffe7a6, #d1a24f 55%, #87601f); }
.lx-bar--tall { height: 20px; }
.lx-bar > span {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font: 700 .72rem/1 var(--body); letter-spacing: .04em;
  color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000;
}
@keyframes sheen { 0% { background-position: 150% 0; } 40%, 100% { background-position: -100% 0; } }

.lx-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 2px;
  font: 600 .64rem/1.2 var(--display); letter-spacing: .16em; text-transform: uppercase;
  background: rgba(0, 0, 0, .5); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text);
}
.lx-chip--blood { color: #f3d3d0; background: rgba(107, 16, 36, .45); box-shadow: inset 0 0 0 1px rgba(156, 42, 68, .7); }
.lx-chip--gold { color: var(--gold-2); background: rgba(107, 76, 28, .35); box-shadow: inset 0 0 0 1px rgba(201, 160, 90, .6); }
.lx-chip--wolf { color: #e3eefc; background: rgba(68, 95, 134, .35); box-shadow: inset 0 0 0 1px rgba(143, 176, 219, .55); }

.lx-badge {
  position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; display: flex; align-items: center; justify-content: center;
  font: 700 .66rem/1 var(--body); color: #fff;
  background: linear-gradient(180deg, #b8314f, #6b1024); box-shadow: 0 0 0 2px var(--ink-1), 0 0 10px var(--blood-glow);
}
.lx-badge[hidden] { display: none; }
.lx-badge--dot { min-width: 10px; width: 10px; height: 10px; padding: 0; top: 0; right: 0; }
.lx-badge--gold { color: #241707; background: linear-gradient(180deg, #ffe6a8, #c99a48); box-shadow: 0 0 0 2px var(--ink-1), 0 0 10px var(--gold-glow); }

/* item slot with rarity */
.lx-slot {
  --r: #8d857a;
  position: relative; width: 72px; height: 72px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 3px;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--r) 30%, #1e1618), #0a0708 75%);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px color-mix(in srgb, var(--r) 60%, transparent), inset 0 0 18px -6px var(--r);
}
.lx-slot img { width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 4px 6px #000); }
.lx-slot::before { /* rarity corner */
  content: ''; position: absolute; top: 3px; left: 3px; width: 0; height: 0;
  border-style: solid; border-width: 9px 9px 0 0; border-color: var(--r) transparent transparent transparent;
}
.lx-slot--empty { --r: #3a3330; }
.lx-slot--empty::before { display: none; }
.lx-slot--empty .lx-ic { font-size: 30px; opacity: .25; }
.lx-r-legendary { --r: #e0862f; }
.lx-r-unique { --r: #c9a05a; }
.lx-r-elite { --r: #7d6be0; }
.lx-r-set { --r: #4fbf6a; }
.lx-r-rare { --r: #4f8fe0; }


/* race shields (skin_images/vampire_sm.png, werewolf_sm.png: 93×103) */
.lx-race { display: inline-block; flex: none; width: 24px; height: auto; vertical-align: middle; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .8)); }
.lx-race--title { width: 54px; }
.lx-race--chip { width: 15px; margin: -3px 0; }

/* page intro: what this place is for, right under the page title.
   <div class="lx-intro lx-frame"><span class="lx-socket lx-socket--lg">icon</span>
   <div class="lx-intro-text"><strong>lead</strong><p>details</p></div></div> */
.lx-intro {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px;
  padding: 16px 24px 16px 18px; margin: 0 0 18px;
  background: linear-gradient(180deg, rgba(255, 236, 210, .035), rgba(0, 0, 0, .2)), rgba(14, 9, 11, .8);
  background-clip: padding-box; backdrop-filter: blur(6px);
}
.lx-intro-text strong { display: block; margin-bottom: 4px; font: 700 1.04rem/1.45 var(--body); color: var(--bone); }
.lx-intro-text p { font-size: .92rem; line-height: 1.55; color: var(--muted); }
@media (max-width: 760px) {
  .lx-intro { grid-template-columns: 1fr; justify-items: center; gap: 10px; padding: 14px 14px 16px; text-align: center; }
  .lx-intro .lx-socket--lg { width: 52px; height: 52px; }
}

/* ============================================================ PROFILE */
.lx-sheet-title { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 8px; text-align: center; }
.lx-sheet-title h1 {
  font: 700 2.5rem/1 var(--deco); letter-spacing: .04em;
  background: linear-gradient(180deg, #fffaf0 0%, #e6dccb 45%, #9a9084 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 10px rgba(0, 0, 0, .75)) drop-shadow(0 0 24px rgba(140, 28, 56, .3));
}
.lx-sheet-sub { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }

.lx-sheet {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
}
.lx-sheet-col h3 { margin-bottom: 10px; }

/* equipment column */
.lx-gear-list { display: flex; flex-direction: column; gap: 14px; }
.lx-gear-card { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; padding: 12px 14px; }
.lx-gear-card .lx-slot { width: 72px; height: 72px; }
.lx-gear-card strong { display: block; font: 600 .8rem/1.25 var(--display); letter-spacing: .06em; color: var(--bone); }
.lx-gear-card small { display: block; font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; margin-top: 2px; }
.lx-gear-card .lx-r-label { font: 700 .62rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--r); margin-top: 6px; display: inline-block; }

/* portrait + avatar frame skins
   A skin is a painted 4:7 image with a round window, a level gem and a dark
   plate. The component reads its geometry from custom properties, so a new
   skin is just data (frames/skins.py renders --skin and the geometry
   inline). Everything is sized in cqw, so the same markup works as the big
   portrait and as a thumbnail in the wardrobe. */
.lx-portrait { display: flex; flex-direction: column; align-items: center; }
.lx-frame-skin {
  --skin: url(../v2/skins/iron.webp);
  --win-x: 50%; --win-y: 36.2%; --win-d: 83%;
  --lv-x: 71.2%; --lv-y: 59.9%;
  --body-top: 66%; --body-bottom: 8%; --body-x: 15%;
  --name: var(--metal);
  --aura: transparent;
  position: relative; width: 100%; max-width: 360px; aspect-ratio: 4 / 7;
  container-type: inline-size; isolation: isolate;
}
.lx-frame-skin::before { /* tier aura behind the window */
  content: ''; position: absolute; left: 0; right: 0; top: 2%; height: 64%; z-index: -1;
  background: radial-gradient(closest-side, var(--aura), transparent); filter: blur(6px);
  animation: aura 5s ease-in-out infinite alternate;
}
.lx-frame-skin-photo {
  position: absolute; left: var(--win-x); top: var(--win-y); width: var(--win-d); aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; background: #0b0708;
}
.lx-frame-skin-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lx-frame-skin-art {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--skin) center / 100% 100% no-repeat;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .75));
  transition: opacity .25s;
}
.lx-frame-skin-lvl {
  position: absolute; left: var(--lv-x); top: var(--lv-y); transform: translate(-50%, -50%);
  font: 700 6.6cqw/1 var(--display); color: #fff3e2; letter-spacing: .02em;
  text-shadow: 0 1px 0 #000, 0 0 8px rgba(0, 0, 0, .9);
}
.lx-frame-skin-body {
  position: absolute; left: var(--body-x); right: var(--body-x); top: var(--body-top); bottom: var(--body-bottom);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.2cqw; text-align: center;
}
.lx-frame-skin-name {
  font: 700 7.6cqw/1.05 var(--deco); letter-spacing: .02em;
  background: var(--name); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #000);
}
.lx-frame-skin-name small { display: block; margin-bottom: 1.6cqw; font: 600 3.4cqw/1 var(--display); letter-spacing: .3em; }
.lx-frame-skin-meta { display: flex; flex-direction: column; gap: 1.4cqw; font: 500 3.9cqw/1.2 var(--body); color: var(--muted); }
.lx-frame-skin-meta b { color: var(--text); font-weight: 500; }
.lx-frame-skin.is-preview .lx-frame-skin-art { animation: skin-in .45s var(--ease); }
@keyframes aura { from { opacity: .55; } to { opacity: 1; } }
@keyframes skin-in { from { opacity: 0; transform: scale(.97); } }


@keyframes spin { to { transform: rotate(360deg); } }

.lx-medals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 380px; margin-top: 18px; }
.lx-medal { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px 10px; }
.lx-medal .lx-socket { width: 50px; height: 50px; }
.lx-medal .lx-socket .lx-ic { font-size: 26px; }
.lx-medal b { font: 700 1.1rem/1 var(--body); color: var(--bone); margin-top: 4px; }
.lx-medal small { font: 600 .56rem/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); text-align: center; }
.lx-medal.is-alert { box-shadow: 0 0 0 1px rgba(156, 42, 68, .7), 0 0 22px -4px var(--blood-glow); border-radius: 3px; }
.lx-medal.is-alert b { color: #ff8a92; }
.lx-medal .lx-hint { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap; }

/* attributes column */
.lx-attrs { padding: 18px 18px 20px; }
.lx-attr-vitals { display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.lx-vital-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.lx-vital-head span { display: flex; align-items: center; gap: 8px; font: 600 .68rem/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.lx-vital-head span .lx-ic { font-size: 18px; }
.lx-vital-head b { font: 700 .9rem/1 var(--body); color: var(--bone); }
.lx-vital-head b.is-gold { color: var(--gold-2); }
.lx-vital-note { font-size: .75rem; color: var(--gold-2); margin-top: 4px; }
.lx-attr-list li { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.lx-attr-list li:last-child { border-bottom: 0; }
.lx-attr-list .lx-attr-name { font: 600 .74rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--text); }
.lx-attr-list .lx-attr-name small { display: block; font: 400 .72rem/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--faint); margin-top: 3px; }
.lx-attr-list b { font: 700 1.25rem/1 var(--body); color: var(--bone); }
.lx-attrs .lx-btn { width: 100%; margin-top: 16px; }
.lx-train-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; font-size: .78rem; color: var(--muted); }
.lx-train-note b { color: #ff8a92; }

/* tabs */
.lx-tab .lx-badge { position: static; }
.lx-panel { display: none; }
.lx-panel.is-active { display: block; animation: fade .35s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }

.lx-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lx-card { padding: 22px 22px 22px; }
.lx-card h4 { display: flex; align-items: center; gap: 10px; font: 600 .8rem/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--bone); margin-bottom: 14px; }
.lx-card h4 .lx-ic { font-size: 20px; }
.lx-card p { font-size: .92rem; color: var(--text); }
.lx-card .lx-big { font: 700 1.6rem/1 var(--display); color: var(--gold-2); text-shadow: 0 0 16px var(--gold-glow); margin: 4px 0 10px; }
.lx-kv { display: flex; flex-direction: column; }
.lx-kv li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.lx-kv li:last-child { border: 0; }
.lx-kv span { color: var(--muted); }
.lx-kv b { color: var(--bone); font-weight: 600; text-align: right; }
.lx-talents { display: flex; flex-wrap: wrap; gap: 8px; }

.lx-records { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.lx-record { padding: 18px 10px 16px; text-align: center; }
.lx-record .lx-socket { margin: 0 auto 8px; }
.lx-record small { display: block; font: 600 .6rem/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); min-height: 2.6em; }
.lx-record b { display: block; font: 700 1.3rem/1.1 var(--body); color: var(--bone); margin: 6px 0 8px; }

/* ============================================================ REPORT */
.lx-result { text-align: center; margin: 6px 0 26px; }
.lx-result-kicker { font: 600 .7rem/1 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.lx-result-title { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 10px 0 6px; }
.lx-result-title .lx-ic { font-size: 54px; }
.lx-result-title .lx-ic:last-child { transform: scaleX(-1); }
.lx-result-title h1 {
  font: 700 4.2rem/1 var(--deco); letter-spacing: .05em;
  background: linear-gradient(180deg, #fff6d8 0%, #f0cf88 40%, #a7782c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #000) drop-shadow(0 0 30px rgba(240, 207, 136, .35));
  animation: rise .8s var(--ease) both;
}
.lx-result.is-defeat h1 { background: linear-gradient(180deg, #f0e6e6, #a39b98 50%, #4a4442); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 3px 0 #000); }
.lx-result-sub { font-size: 1.05rem; color: var(--text); }
.lx-result-sub b { color: var(--bone); }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.96); letter-spacing: .3em; } }

.lx-versus { display: grid; grid-template-columns: minmax(0, 1fr) 230px minmax(0, 1fr); gap: 22px; align-items: stretch; }

.lx-fighter { padding: 0 0 18px; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; }
.lx-fighter-art { position: relative; width: 100%; aspect-ratio: 1 / .82; overflow: hidden; }
.lx-fighter-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.lx-fighter-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(17, 12, 14, .7) 75%, rgb(17, 12, 14) 100%); }
.lx-fighter.is-loser .lx-fighter-art img { filter: grayscale(.85) brightness(.6) contrast(1.1); }
.lx-fighter-ribbon { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 2; }
.lx-fighter-head { position: relative; z-index: 2; margin-top: -54px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px; width: 100%; }
.lx-fighter-id { display: flex; align-items: center; gap: 10px; }
.lx-fighter-name { font: 700 1.5rem/1.1 var(--display); letter-spacing: .06em; color: var(--bone); text-shadow: 0 2px 6px #000; }
.lx-fighter.is-winner .lx-fighter-name { color: var(--gold-2); }
.lx-fighter-lvl { font: 700 .8rem/1 var(--display); padding: 5px 8px; border-radius: 3px; background: linear-gradient(180deg, var(--wine-hi), var(--wine-lo)); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255, 200, 180, .45); color: #fff; }
.lx-fighter-life { width: 100%; max-width: 300px; padding: 0 16px; margin-top: 4px; }
.lx-fighter-life .lx-bar { height: 20px; }
.lx-fighter-life small { display: flex; justify-content: space-between; margin-top: 4px; font-size: .76rem; color: var(--muted); }
.lx-fighter-life small b { color: #ff8a92; }
.lx-fighter-gear { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.lx-fighter-gear .lx-slot { width: 56px; height: 56px; }

.lx-vs-col { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 40px; }
.lx-vs-medal { position: relative; width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; }
.lx-vs-medal::before { content: ''; position: absolute; inset: 0; background: url(../v2/svg/rose.svg) center / contain no-repeat; animation: spin 90s linear infinite; }
.lx-vs-medal span {
  position: relative; width: 74px; height: 74px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 700 1.6rem/1 var(--deco); color: var(--bone);
  background: radial-gradient(circle at 50% 30%, var(--wine-mid), #17030a 75%);
  box-shadow: 0 0 0 2px #000, 0 0 0 4px #b9b0a3, 0 0 0 5px #000, 0 0 30px var(--blood-glow);
  text-shadow: 0 2px 0 #000;
}
.lx-duel-facts { width: 100%; }
.lx-duel-facts li { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.lx-duel-facts li:last-child { border: 0; }
.lx-duel-facts b { font: 700 1rem/1 var(--body); color: var(--text); }
.lx-duel-facts b:first-child { text-align: right; }
.lx-duel-facts b.is-win { color: var(--gold-2); }
.lx-duel-facts span { display: flex; flex-direction: column; align-items: center; gap: 3px; font: 600 .54rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lx-duel-facts span .lx-ic { font-size: 18px; }

.lx-loot { margin-top: 44px; padding: 34px 26px 26px; }
.lx-loot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.lx-loot-tile {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 3px;
  background: linear-gradient(180deg, rgba(201, 160, 90, .14), rgba(0, 0, 0, .35));
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(201, 160, 90, .4);
  animation: drop .6s var(--ease) both; animation-delay: calc(var(--n, 0) * 160ms + 500ms);
}
.lx-loot-tile::after { /* one pass of light when it lands */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 245, 220, .25) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: pass 1.2s ease-out both; animation-delay: calc(var(--n, 0) * 160ms + 900ms);
}
.lx-loot-tile .lx-socket { width: 52px; height: 52px; }
.lx-loot-tile .lx-socket .lx-ic { font-size: 28px; }
.lx-loot-tile b { display: block; font: 700 1.5rem/1 var(--display); color: var(--gold-2); text-shadow: 0 0 14px var(--gold-glow); }
.lx-loot-tile small { display: block; font-size: .78rem; color: var(--muted); margin-top: 4px; }
.lx-loot-tile.is-loss { background: linear-gradient(180deg, rgba(107, 16, 36, .16), rgba(0, 0, 0, .35)); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(156, 42, 68, .35); }
.lx-loot-tile.is-loss b { color: #ff8a92; text-shadow: none; }
@keyframes drop { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
@keyframes pass { to { transform: translateX(100%); } }

.lx-cta { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin: 26px -26px 0; padding: 18px 26px; background: linear-gradient(180deg, transparent, rgba(6, 4, 5, .92) 35%); }
@media (max-width: 1100px) { .lx-cta { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; } }

.lx-chronicle { margin-top: 44px; padding: 34px 24px 20px; }
.lx-compare { margin-bottom: 22px; }
.lx-compare summary { list-style: none; cursor: pointer; display: flex; justify-content: center; }
.lx-compare summary::-webkit-details-marker { display: none; }
.lx-compare-rows { margin-top: 14px; }
.lx-compare-rows li { display: grid; grid-template-columns: 70px 1fr 150px 1fr 70px; gap: 12px; align-items: center; padding: 7px 0; }
.lx-compare-rows li > b { position: relative; font: 700 .95rem/1 var(--body); color: var(--text); }
.lx-compare-rows li > b:first-child { text-align: right; }
.lx-cmp-v .is-win { color: var(--gold-2); }
.lx-compare-rows .lx-bar { height: 9px; }
.lx-compare-rows .lx-bar > i { width: var(--v1, var(--v, 50%)); transition: width .6s var(--ease); }
.lx-compare-rows .lx-bar.is-left > i { left: auto; right: 0; }
.lx-compare:not([data-mode="before"]) .lx-bar.is-win > i,
.lx-compare[data-mode="before"] .lx-bar.was-win > i { background: linear-gradient(180deg, #ffe7a6, #d1a24f 55%, #87601f); }
.lx-cmp-label { display: flex; align-items: center; justify-content: center; gap: 8px; font: 600 .64rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lx-cmp-label .lx-ic { font-size: 18px; }

/* duels of BattleEngine1: before magic / after magic */
.lx-cmp-modes { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 16px; }
.lx-cmp-modes .lx-seg { max-width: 100%; }
.lx-cmp-modes .lx-seg button { display: inline-flex; margin: 0; border: 0; background: none; box-shadow: none; min-height: 0; height: auto; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 2px; white-space: nowrap; font: 600 .64rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); transition: color .2s, background .2s; }
.lx-cmp-modes .lx-seg button .lx-ic { font-size: 16px; }
.lx-cmp-modes .lx-seg button:hover { color: var(--bone); }
.lx-cmp-modes .lx-seg button:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.lx-cmp-modes .lx-seg button.is-active { color: #fff; background: linear-gradient(180deg, var(--wine-hi), var(--wine-lo)); box-shadow: inset 0 1px 0 rgba(255, 220, 220, .16); }
.lx-cmp-modes .lx-seg button.is-active .lx-ic { background: var(--metal-gold); }
.lx-cmp-hint { margin: 0; max-width: 46ch; font-size: .82rem; line-height: 1.4; text-align: center; color: var(--muted); }
.lx-compare:not([data-mode="before"]) .lx-cmp-hint.is-before,
.lx-compare[data-mode="before"] .lx-cmp-hint.is-after { display: none; }
.lx-compare[data-lx-modes] .lx-compare-rows li { padding: 6px 0 20px; }
.lx-combat-sub { margin: 18px 0 2px; text-align: center; font: 600 .62rem/1.3 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.lx-cmp-label img { flex: none; width: 20px; height: 20px; object-fit: contain; filter: drop-shadow(0 1px 2px #000); }
.lx-compare-rows li.is-total .lx-cmp-v { font-size: 1.1rem; }
.lx-compare-rows li.is-total .lx-cmp-label { color: var(--bone); }
.lx-cmp-was { display: none; }
.lx-compare[data-mode="before"] .lx-cmp-now { display: none; }
.lx-compare[data-mode="before"] .lx-cmp-was { display: block; }
.lx-compare[data-lx-modes] .lx-cmp-v > span { animation: cmp-in .35s var(--ease); }
.lx-cmp-delta { position: absolute; top: calc(100% + 4px); left: 0; padding: 2px 5px; border-radius: 2px; font: 700 .62rem/1 var(--body); font-style: normal; letter-spacing: .02em; white-space: nowrap; transition: opacity .25s; }
.lx-compare-rows li > b:first-child .lx-cmp-delta { left: auto; right: 0; }
.lx-cmp-delta.is-up { color: var(--heal); background: rgba(111, 191, 124, .1); box-shadow: inset 0 0 0 1px rgba(111, 191, 124, .28); }
.lx-cmp-delta.is-down { color: #f08d9c; background: rgba(156, 42, 68, .18); box-shadow: inset 0 0 0 1px rgba(156, 42, 68, .45); }
.lx-compare[data-mode="before"] .lx-cmp-delta { opacity: 0; }
@keyframes cmp-in { from { opacity: 0; transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) {
  .lx-compare-rows .lx-bar > i { transition: none; }
  .lx-compare[data-lx-modes] .lx-cmp-v > span { animation: none; }
}

.lx-timeline { position: relative; }
.lx-timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--line-2) 5%, var(--line-2) 95%, transparent); }
.lx-round-mark { position: relative; display: flex; justify-content: center; margin: 18px 0 10px; }
.lx-round-mark span { font: 600 .62rem/1 var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); padding: 6px 12px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); border-radius: 2px; }
.lx-event { position: relative; display: flex; align-items: flex-start; gap: 10px; width: 50%; padding: 6px 26px 6px 0; }
.lx-event.is-right { margin-left: 50%; padding: 6px 0 6px 26px; flex-direction: row-reverse; text-align: right; }
.lx-event::after { content: ''; position: absolute; top: 18px; right: -4px; width: 7px; height: 7px; transform: rotate(45deg); background: var(--blood-2); box-shadow: 0 0 0 1px #000; }
.lx-event.is-right::after { right: auto; left: -4px; background: var(--wolf); }
.lx-event img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--line-2); }
.lx-event p { flex: 1; padding: 8px 12px; border-radius: 3px; background: rgba(255, 236, 210, .035); box-shadow: inset 0 0 0 1px var(--line); font-size: .92rem; line-height: 1.4; }
.lx-event p em { font-style: normal; font: 700 .7rem/1 var(--display); letter-spacing: .1em; padding: 3px 6px; border-radius: 2px; background: rgba(107, 16, 36, .35); color: #f3d3d0; white-space: nowrap; }
.lx-event.is-right p em { background: rgba(68, 95, 134, .35); color: #e3eefc; }
.lx-event p .lx-dmg { color: #ff7a82; font-weight: 700; }
.lx-event p .lx-heal { color: var(--heal); font-weight: 700; }
.lx-event.is-crit p { box-shadow: inset 0 0 0 1px rgba(156, 42, 68, .6), 0 0 18px -8px var(--blood-glow); }
.lx-more-rounds { display: flex; justify-content: center; margin-top: 18px; }


/* ------------------------------------------------------------ profile (game data) */
.lx-page { position: relative; }
.lx-frame-skin-name { max-width: 100%; overflow-wrap: anywhere; }
.lx-poison {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(100, 255, 100, .08) 0%, rgba(50, 200, 50, .28) 80%, rgba(20, 150, 20, .5) 100%);
  animation: poisonPulse 2s infinite alternate;
}
/* item rarity by item_type */
.lx-r-common { --r: #8d857a; }
.lx-r-rare { --r: #4f8fe0; }
.lx-r-elite, .lx-r-elite_light, .lx-r-elite_heavy { --r: #7d6be0; }
.lx-r-tenebris { --r: #4fbf6a; }
.lx-r-legendary, .lx-r-legendary_light, .lx-r-legendary_heavy { --r: #e0862f; }
.lx-r-unique, .lx-r-special { --r: #c9a05a; }
.lx-gear-card.is-empty strong { color: var(--faint); }
.lx-chip--rune img { width: 16px; height: 16px; object-fit: contain; }
.lx-medal.is-off b { text-decoration: line-through; color: var(--muted); }
.lx-medal .lx-hint { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); z-index: 2; white-space: nowrap; }
.lx-attr-actions { display: flex; gap: 10px; margin-top: 16px; }
.lx-attr-actions .lx-btn--blood { flex: 1; }
.lx-attrs .skills-bottom-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.lx-panel-note { margin: 14px 0; color: var(--muted); font-size: .9rem; text-align: center; }
.lx-muted { color: var(--muted); }
.lx-story p { white-space: normal; line-height: 1.6; margin-bottom: 14px; }
.lx-records { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

/* legacy character info rendered inside an lx card */
.lx-card .ga-char-info h3 { font: 700 1rem/1.2 var(--display); letter-spacing: .08em; color: var(--bone); margin-bottom: 12px; }
.lx-card .ga-char-info-base li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.lx-card .ga-char-info-base li span { color: var(--muted); }
.lx-card .ga-char-info-base li strong { color: var(--bone); font-weight: 500; text-align: right; }
.lx-card .ga-char-info .g-divisor { margin: 16px 0 !important; border-color: var(--line); }
.lx-card .ga-char-info h4 { font: 600 .7rem/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 10px; }
.lx-overview { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.lx-attrs > .lx-section-head { margin-top: -36px; }

/* ------------------------------------------------------------ report (game data) */
.lx-report > .container { max-width: 1100px; }
.lx-loot > .lx-section-head, .lx-chronicle > .lx-section-head { margin-top: -52px; }
.lx-loot-tile.is-item .lx-slot { width: 52px; height: 52px; }
.lx-loot-tile.is-item b { font-size: 1rem; }
.lx-event.is-solo { width: 100%; padding: 6px 0 6px 26px; }
.lx-event.is-solo::after { right: auto; left: -4px; }
.lx-timeline .lx-event p img { display: inline-block; max-height: 1.4em; vertical-align: middle; }
.lx-overview { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.lx-overview > * { min-width: 0; }
.lx-card .ga-char-info, .lx-card .ga-char-info-base { width: auto; max-width: 100%; }

/* ============================================================ FORUM + MESSAGES
   The forum keeps its recent markup (forum.styl, also served to visitors,
   who don't load v2.css); this layer frames it in v2. Messages
   (messages/*.html) are rebuilt: tab bar with compose, a mailbox list and
   the letter view. */

/* ------------------------------------------------------------ forum
   One framed panel per page (home board, a category's topics, a thread);
   inside it rows and posts are separated by hairlines, never boxed one by
   one. .forum-panel wraps breadcrumb, head and list (category_hx /
   topic_hx); on the home page the category grid is the panel. */
html.lx :is(.forum-panel, .forum-category-grid, .forum-my-conversations) {
  margin: 0 0 22px; padding: 0;
  border: 6px solid transparent; border-image: url(../v2/svg/frame-silver.svg) 40 / 30px / 0 stretch;
  background: linear-gradient(180deg, rgba(255, 236, 210, .03), rgba(0, 0, 0, .15)), rgba(14, 9, 11, .94);
  background-clip: padding-box; box-shadow: 0 30px 60px -30px #000;
}
html.lx .forum-panel > * { margin: 0; }

/* breadcrumb and heads become the panel's header rows */
html.lx .forum-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 22px;
  font: 600 .64rem/1.4 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  background: rgba(0, 0, 0, .28); box-shadow: inset 0 -1px 0 var(--line);
}
html.lx .forum-breadcrumb a { color: var(--text); }
html.lx .forum-breadcrumb a:hover { color: var(--gold-2); }
html.lx .forum-breadcrumb .fb-sep { color: var(--faint); }
html.lx .forum-breadcrumb .fb-current { color: var(--bone); }
html.lx :is(.forum-category-head, .forum-topic-head) { padding: 18px 22px; box-shadow: inset 0 -1px 0 var(--line); }
html.lx :is(.forum-category-head .fch-title h3, .forum-topic-head h3) { font: 700 1.15rem/1.3 var(--display); letter-spacing: .05em; color: var(--bone); }
html.lx :is(.forum-category-head .fch-title p, .forum-topic-head .fth-meta) { color: var(--muted); }
html.lx .forum-new-btn { color: #f6e7da; background: linear-gradient(180deg, var(--wine-hi) 0%, var(--wine-mid) 52%, var(--wine-lo) 100%); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(232, 170, 160, .28), 0 10px 24px -10px var(--blood-glow); }
html.lx .forum-panel :is(.forum-notice, .forum-visitor-note, .forum-battle-link, .forum-moderation) {
  margin: 0; padding: 12px 22px; border: 0; border-radius: 0; background: rgba(201, 160, 90, .06); box-shadow: inset 0 -1px 0 var(--line);
}

/* home: the category board */
html.lx .forum-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
html.lx .forum-category-card {
  min-width: 0; gap: 16px; padding: 18px 22px; border: 0; border-radius: 0; background: none;
  box-shadow: inset 0 -1px 0 var(--line), inset 3px 0 0 transparent; transform: none;
}
html.lx .forum-category-card:nth-child(odd) { box-shadow: inset 0 -1px 0 var(--line), inset -1px 0 0 var(--line), inset 3px 0 0 transparent; }
html.lx .forum-category-card:hover { background: rgba(255, 236, 210, .035); transform: none; }
html.lx .forum-category-card.has-unread { box-shadow: inset 0 -1px 0 var(--line), inset -1px 0 0 var(--line), inset 3px 0 0 var(--gold); }
html.lx .forum-category-card.has-replies { box-shadow: inset 0 -1px 0 var(--line), inset -1px 0 0 var(--line), inset 3px 0 0 var(--blood-2); }
html.lx .forum-category-card .fcc-body h3 { font: 600 .95rem/1.25 var(--display); letter-spacing: .06em; color: var(--bone); }
html.lx .forum-category-card .fcc-unread { font-family: var(--body); color: var(--gold-2); }
html.lx .forum-category-card .fcc-icon img { opacity: 1; filter: drop-shadow(0 2px 4px #000); }
html.lx .forum-my-conversations { padding: 14px 0 0; }
html.lx .forum-my-conversations h4 { padding: 0 22px 12px; font: 600 .7rem/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-2); box-shadow: inset 0 -1px 0 var(--line); }

/* topic rows */
html.lx .forum-topic-list { gap: 0; }
html.lx .forum-topic-row {
  gap: 18px; padding: 14px 22px; border: 0; border-radius: 0; background: none;
  box-shadow: inset 0 -1px 0 var(--line), inset 3px 0 0 transparent;
}
html.lx .forum-topic-row:last-child { box-shadow: inset 3px 0 0 transparent; }
html.lx .forum-topic-row:hover { background: rgba(255, 236, 210, .035); }
html.lx .forum-topic-row.is-unread { background: rgba(201, 160, 90, .04); box-shadow: inset 0 -1px 0 var(--line), inset 3px 0 0 var(--gold); }
html.lx .forum-topic-row.is-participating { background: rgba(107, 16, 36, .12); box-shadow: inset 0 -1px 0 var(--line), inset 3px 0 0 var(--blood-2); }
html.lx .forum-topic-row .ftr-title a { font: 600 .9rem/1.3 var(--display); letter-spacing: .03em; color: var(--bone); }
html.lx .forum-topic-row .ftr-title a:hover { color: var(--gold-2); }
html.lx .forum-panel .forum-empty { margin: 0; padding: 30px 22px; border: 0; background: none; }

/* thread: author column on the left, text on the right, one post per row */
html.lx .forum-posts { gap: 0; margin: 0; }
html.lx .forum-post {
  display: grid; grid-template-columns: 180px minmax(0, 1fr); grid-template-areas: 'head body' 'head actions';
  border: 0; border-radius: 0; background: none; overflow: visible; box-shadow: inset 0 -1px 0 var(--line);
}
html.lx .forum-post:last-child { box-shadow: none; }
html.lx .forum-post .fp-head {
  grid-area: head; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px;
  padding: 18px 14px; text-align: center; background: rgba(0, 0, 0, .22); box-shadow: inset -1px 0 0 var(--line);
}
html.lx .forum-post .fp-author { flex-direction: column; gap: 8px; }
html.lx .forum-post .fp-avatar { width: 64px; height: 64px; border: 0; box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(214, 200, 178, .25); }
html.lx .forum-post .fp-author-meta { font-size: .72rem; color: var(--muted); }
html.lx .forum-post .fp-date { font-size: .7rem; color: var(--faint); }
html.lx .forum-post .fp-date a { display: block; margin: 0 0 2px; color: var(--gold-2); }
html.lx .forum-post .fp-body { grid-area: body; padding: 18px 24px; font-size: .96rem; line-height: 1.7; color: var(--text); }
html.lx .forum-post .fp-body a { color: var(--gold-2); }
html.lx .forum-post .fp-actions { grid-area: actions; padding: 0 24px 14px; }
html.lx .forum-post.is-first-unread { box-shadow: inset 0 -1px 0 var(--line), inset 3px 0 0 var(--gold); }
html.lx .forum-unread-divider { margin: 0; padding: 8px 22px; background: rgba(201, 160, 90, .07); box-shadow: inset 0 -1px 0 var(--line); }
html.lx .forum-unread-divider span { font: 600 .62rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); }
html.lx .forum-tag { border-radius: 2px; font-family: var(--display); letter-spacing: .1em; }

@media (max-width: 1100px) {
  html.lx .forum-category-grid { grid-template-columns: 1fr; }
  html.lx .forum-category-card:nth-child(odd) { box-shadow: inset 0 -1px 0 var(--line), inset 3px 0 0 transparent; }
}
@media (max-width: 760px) {
  html.lx :is(.forum-panel, .forum-category-grid, .forum-my-conversations) { border-image-width: 22px; }
  html.lx .forum-breadcrumb, html.lx :is(.forum-category-head, .forum-topic-head), html.lx .forum-topic-row, html.lx .forum-category-card { padding-left: 14px; padding-right: 14px; }
  html.lx .forum-post { grid-template-columns: 1fr; grid-template-areas: 'head' 'body' 'actions'; }
  html.lx .forum-post .fp-head { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; padding: 12px 14px; box-shadow: inset 0 -1px 0 var(--line); }
  html.lx .forum-post .fp-author { flex-direction: row; }
  html.lx .forum-post .fp-avatar { width: 40px; height: 40px; }
  html.lx .forum-post .fp-body { padding: 14px; }
  html.lx .forum-post .fp-actions { padding: 0 14px 12px; }
}

/* ------------------------------------------------------------ messages */
.lx-badge--muted { background: linear-gradient(180deg, #6a6157, #3a3430); box-shadow: 0 0 0 2px var(--ink-1); }
.lx-tab .lx-badge { margin-left: 2px; }
.lx-msg-tabs { align-items: center; }
.lx-msg-compose::before, .lx-msg-compose::after { display: none; }

.lx-mailbox { padding: 6px 0; }
.lx-mailbox-head { display: flex; justify-content: flex-end; padding: 8px 14px 10px; box-shadow: inset 0 -1px 0 var(--line); }
.lx-mails { display: flex; flex-direction: column; }
.lx-mail {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 14px;
  padding: 12px 18px; border-bottom: 1px solid var(--line); transition: background .2s;
}
.lx-mail:last-child { border-bottom: 0; }
.lx-mail:hover { background: rgba(255, 236, 210, .03); }
.lx-mail-dot { width: 8px; height: 8px; transform: rotate(45deg); background: transparent; }
.lx-mail.is-new .lx-mail-dot { background: var(--blood-2); box-shadow: 0 0 8px var(--blood-glow); }
.lx-mail-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lx-mail-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 .95rem/1.3 var(--body); color: var(--text); }
.lx-mail.is-new .lx-mail-subject { font-weight: 700; color: var(--bone); }
.lx-mail-subject:hover { color: var(--gold-2); }
.lx-mail-subject .lx-chip { padding: 2px 6px; font-size: .52rem; vertical-align: 1px; }
.lx-mail-meta { font-size: .8rem; color: var(--muted); }
.lx-mail-meta a { color: var(--text); }
.lx-mail-meta a:hover { color: var(--gold-2); }
.lx-mail-fight { display: flex; align-items: center; gap: 10px; }
.lx-mail-gold { display: inline-flex; align-items: center; gap: 5px; font: 700 .9rem/1 var(--body); color: var(--gold-2); }
.lx-mail-date { font-size: .78rem; color: var(--faint); white-space: nowrap; }

.lx-letter { padding: 22px 26px 20px; }
.lx-letter-head { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.lx-letter-av img { display: block; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--gold), 0 0 12px var(--gold-glow); }
.lx-letter-head h3 { font: 700 1.15rem/1.3 var(--display); letter-spacing: .04em; color: var(--bone); }
.lx-letter-head p { margin-top: 4px; font-size: .86rem; color: var(--muted); }
.lx-letter-head p a { color: var(--gold-2); }
.lx-letter-body { padding: 20px 2px; font-size: 1rem; line-height: 1.7; color: var(--text); overflow-wrap: anywhere; }
.lx-letter-body a { color: var(--gold-2); }
.lx-letter-foot { display: flex; justify-content: flex-end; padding-top: 14px; border-top: 1px solid var(--line); }

@media (max-width: 760px) {
  .lx-mail { grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; padding: 12px; }
  .lx-mail-fight { grid-column: 2 / -1; }
  .lx-mail-date { grid-column: 3; grid-row: 1; font-size: .7rem; }
  .lx-letter { padding: 16px 14px; }
}

/* tab bar with an action on the right (messages: compose) */
.lx-subnav--actions { display: flex; align-items: center; }
.lx-subnav--actions > .lx-tabs { flex: 1; min-width: 0; }
.lx-subnav-actions { flex: none; padding: 6px 10px; }
@media (max-width: 760px) {
  .lx-subnav--actions { flex-direction: column; align-items: stretch; }
  .lx-subnav-actions { padding: 10px; box-shadow: inset 0 1px 0 var(--line); }
  .lx-subnav-actions .lx-btn { width: 100%; }
}

/* ============================================================ TERMS
   includes/_terms_text.html, in game (terms_of_service.html) and on the
   public site (visitor_terms.html: this file is in site.css too, so it
   relies only on 00_base / 10_system). A contents rail beside the text
   (a strip on top on narrow screens), one framed section per part, the
   rules as a list with the ones players break most in gold. The text is
   legal and translated: change classes here, never the template's text.
   --terms-top: what is fixed above the page (HUD in game, header on site). */
.lx-terms { --terms-top: var(--hud, 0px); display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; align-items: start; text-align: left; }
html.lx-site .lx-terms { --terms-top: 68px; }

.lx-terms-toc { position: sticky; top: calc(var(--terms-top) + 16px); display: flex; flex-direction: column; gap: 2px; padding: 12px; }
.lx-terms-toc a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 3px;
  font: 600 .68rem/1.35 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  transition: color .2s, background .2s, box-shadow .2s;
}
.lx-terms-toc .lx-ic { flex: none; font-size: 17px; background: linear-gradient(180deg, #a59b8e, #5f574e); }
.lx-terms-toc a:hover, .lx-terms-toc a.is-active { color: var(--bone); background: rgba(255, 236, 210, .04); }
.lx-terms-toc a:hover .lx-ic, .lx-terms-toc a.is-active .lx-ic { background: var(--metal-gold); }
.lx-terms-toc a.is-active { box-shadow: inset 2px 0 0 var(--gold-2); }

.lx-terms-body { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.lx-terms-sec { padding: 20px 26px 24px; scroll-margin-top: calc(var(--terms-top) + 16px); }
.lx-terms-h { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 0 0 14px; border-bottom: 1px solid var(--line); font: 700 1.08rem/1.25 var(--display); letter-spacing: .06em; color: var(--bone); }
.lx-terms-h .lx-socket { flex: none; width: 40px; height: 40px; }
.lx-terms-h .lx-socket .lx-ic { font-size: 20px; }

.lx-terms-text { font-size: .95rem; line-height: 1.75; color: var(--text); }
.lx-terms-text p { margin: 0 0 14px; }
.lx-terms-text p:last-child { margin-bottom: 0; }
.lx-terms-text.is-legal { font-size: .88rem; line-height: 1.85; color: var(--muted); }
.lx-terms-text a:not(.lx-btn) { color: var(--bone); text-decoration: underline; text-decoration-color: var(--wine-hi); text-underline-offset: 3px; }
.lx-terms-text a:not(.lx-btn):hover { color: var(--gold-2); }

.lx-terms-rules { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lx-terms-rules > li {
  padding: 11px 14px; border-left: 2px solid var(--line-2); border-radius: 0 3px 3px 0;
  background: rgba(255, 236, 210, .025); font-size: .93rem; line-height: 1.6; color: var(--text);
}
.lx-terms-rules > li.is-highlight { border-left-color: var(--gold-2); background: linear-gradient(90deg, rgba(107, 76, 28, .24), rgba(255, 236, 210, .02) 75%); color: var(--bone); }
.lx-terms-subrules { display: grid; gap: 6px; margin: 10px 0 2px 4px; padding: 0; list-style: none; }
.lx-terms-subrules li { padding: 2px 0 2px 12px; border-left: 1px solid var(--line-2); color: var(--muted); }

.lx-terms-note {
  display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 16px; padding: 12px 14px; border-radius: 3px;
  line-height: 1.6; color: var(--bone); background: rgba(107, 76, 28, .16); box-shadow: inset 0 0 0 1px rgba(201, 160, 90, .35);
}
.lx-terms-note.is-warn { background: rgba(107, 16, 36, .22); box-shadow: inset 0 0 0 1px rgba(156, 42, 68, .5); }
.lx-terms-note .lx-ic { flex: none; margin-top: 2px; font-size: 20px; }

.lx-terms-prices { max-width: 460px; margin: 4px 0 18px; overflow-x: auto; }
.lx-terms-prices table { width: 100%; border-collapse: collapse; }
.lx-terms-prices th { padding: 10px 14px; font: 600 .62rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); text-align: right; border-bottom: 1px solid var(--line-2); }
.lx-terms-prices td { padding: 9px 14px; font: 600 .92rem/1.2 var(--body); color: var(--bone); text-align: right; border-bottom: 1px solid var(--line); }
.lx-terms-prices :is(th, td):first-child { text-align: left; }
.lx-terms-prices td .lx-ic { font-size: 15px; vertical-align: -2px; }
.lx-terms-prices tr:last-child td { border-bottom: 0; }

.lx-terms-foot { display: flex; margin-top: 16px; }
.lx-terms-foot .lx-btn { max-width: 100%; height: auto; min-height: 38px; padding-top: 8px; padding-bottom: 8px; white-space: normal; text-align: left; }
.lx-terms-address { padding: 14px 16px; border-radius: 3px; line-height: 1.8; color: var(--text); background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px var(--line); }
.lx-terms-address strong { color: var(--bone); }

@media (max-width: 1000px) {
  .lx-terms { grid-template-columns: 1fr; gap: 14px; }
  /* the contents become one strip that scrolls sideways, kept in view */
  .lx-terms-toc { top: var(--terms-top); z-index: 5; flex-direction: row; gap: 4px; padding: 6px 8px; overflow-x: auto; scrollbar-width: none; }
  .lx-terms-toc::-webkit-scrollbar { display: none; }
  .lx-terms-toc a { flex: none; white-space: nowrap; }
  .lx-terms-toc a.is-active { box-shadow: inset 0 -2px 0 var(--gold-2); }
  .lx-terms-sec { scroll-margin-top: calc(var(--terms-top) + 70px); }
}
@media (max-width: 760px) {
  .lx-terms-sec { padding: 16px 14px 18px; }
  .lx-terms-h { font-size: .96rem; }
  .lx-terms-rules > li { padding: 10px 12px; font-size: .9rem; }
}

/* ============================================================ PUBLIC SITE
   dist/css/site.css = v2/00_base + v2/10_system + v2/30_pages + src/site/*.
   Pages: templates/site/base.html (header, footer, share tags), landing.html,
   seo/article.html (keyword pages), seo/article_v2/default.html,
   seo/profile/base.html (character pages). app1.css still loads for the
   legacy modal (forgot password, VK) so every rule here sits under
   html.lx-site. */

html.lx-site { scroll-behavior: smooth; scroll-padding-top: 84px; }
html.lx-site body { margin: 0; padding: 0; background: var(--ink-0); }
html.lx-site #mainContent { margin: 0; padding: 0; min-height: 0; }
html.lx-site a { text-decoration: none; }
html.lx-site img { max-width: 100%; }
.lx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.lx-site .lx-kicker { display: block; font: 600 .66rem/1.2 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-2); }
html.lx-site .lx-link { display: inline-flex; align-items: center; gap: 6px; color: var(--gold-2); font-size: .9rem; border-bottom: 1px dashed rgba(240, 207, 136, .45); }
html.lx-site .lx-link:hover { border-bottom-color: var(--gold-2); }

/* header: over the hero, solid once the page scrolls (site.js adds is-solid) */
.lx-site-head { position: fixed; inset: 0 0 auto; z-index: 900; transition: background .25s, box-shadow .25s; }
.lx-site-head.is-solid, html.lx-site:not(:has(.lx-land)) .lx-site-head { background: rgba(8, 5, 6, .92); box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(0, 0, 0, .45); backdrop-filter: blur(8px); }
.lx-site-bar { display: flex; align-items: center; gap: 22px; max-width: 1240px; height: 68px; margin: 0 auto; padding: 0 24px; }
.lx-site-logo { display: block; flex: none; }
html.lx-site .lx-site-logo img { display: block; width: auto; height: 50px; margin: 0; }
.lx-site-nav { display: flex; gap: 22px; margin-right: auto; }
.lx-site-nav a, .lx-site-signin { font: 600 .68rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--text); transition: color .2s; }
.lx-site-nav a:hover, .lx-site-signin:hover { color: var(--gold-2); }
.lx-site-lang { position: relative; }
.lx-site-lang summary { display: flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font: 600 .68rem/1 var(--display); letter-spacing: .14em; color: var(--muted); }
.lx-site-lang summary::-webkit-details-marker { display: none; }
.lx-site-lang summary .lx-ic { font-size: 16px; }
.lx-site-lang ul { position: absolute; top: calc(100% + 12px); right: 0; z-index: 2; min-width: 170px; margin: 0; padding: 6px; list-style: none; border-radius: 3px; background: var(--ink-2); box-shadow: 0 0 0 1px var(--line-2), 0 18px 40px rgba(0, 0, 0, .6); }
.lx-site-lang li a { display: block; padding: 9px 12px; border-radius: 2px; color: var(--text); font-size: .9rem; }
.lx-site-lang li a:hover { background: rgba(107, 16, 36, .35); color: var(--bone); }
.lx-site-play { flex: none; }

/* footer */
html.lx-site footer.lx-site-foot { margin: 0; padding: 56px 24px 40px; height: auto; background: linear-gradient(180deg, var(--ink-0), #050304); box-shadow: inset 0 1px 0 var(--line); color: var(--muted); }
.lx-site-foot-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; max-width: 1240px; margin: 0 auto; }
html.lx-site .lx-site-foot-brand img { width: auto; height: 44px; margin: 0 0 14px; }
.lx-site-foot-brand p { max-width: 320px; font-size: .92rem; line-height: 1.6; }
.lx-site-foot h2 { margin: 0 0 14px; }
.lx-site-foot ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.lx-site-foot li a { color: var(--text); font-size: .9rem; }
.lx-site-foot li a:hover { color: var(--gold-2); }
.lx-site-foot-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 24px; box-shadow: inset 0 1px 0 var(--line); font-size: .8rem; }
.lx-site-social { display: flex; gap: 16px; }
.lx-site-social a { color: var(--text); }

@media (max-width: 860px) {
  .lx-site-nav { display: none; }
  .lx-site-bar { gap: 14px; padding: 0 14px; height: 60px; }
  html.lx-site .lx-site-logo img { height: 34px; }
  .lx-site-lang { margin-left: auto; }
  .lx-site-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .lx-site-play { display: none; }
  .lx-site-foot-in { grid-template-columns: minmax(0, 1fr); }
  html.lx-site footer.lx-site-foot { padding: 40px 18px 96px; }
}

/* the Articles dropdown (desktop) and the full menu (phones): every link of
   the old visitor drawer, kept in the HTML for crawlers */
.lx-site-drop { position: relative; }
.lx-site-drop summary { list-style: none; cursor: pointer; font: 600 .68rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--text); }
.lx-site-drop summary::-webkit-details-marker { display: none; }
.lx-site-drop summary::after { content: ''; display: inline-block; width: 5px; height: 5px; margin: 0 0 3px 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
.lx-site-drop[open] summary, .lx-site-drop summary:hover { color: var(--gold-2); }
.lx-site-drop ul, .lx-site-menu-panel { position: absolute; z-index: 3; border-radius: 3px; background: var(--ink-2); box-shadow: 0 0 0 1px var(--line-2), 0 18px 40px rgba(0, 0, 0, .6); }
.lx-site-drop ul { top: calc(100% + 16px); left: -12px; min-width: 260px; margin: 0; padding: 6px; list-style: none; }
.lx-site-drop li a, .lx-site-menu-panel li a { display: block; padding: 9px 12px; border-radius: 2px; color: var(--text); font-size: .92rem; line-height: 1.35; }
.lx-site-drop li a:hover, .lx-site-menu-panel li a:hover { background: rgba(107, 16, 36, .35); color: var(--bone); }
.lx-site-menu { display: none; }
.lx-site-menu summary { display: grid; place-items: center; width: 40px; height: 40px; list-style: none; cursor: pointer; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--bone); }
.lx-site-menu summary::-webkit-details-marker { display: none; }
.lx-site-menu summary .lx-ic { font-size: 20px; }
.lx-site-menu[open] summary { background: rgba(107, 16, 36, .4); }
.lx-site-menu-panel { top: 100%; left: 0; right: 0; display: grid; gap: 18px; max-height: calc(100svh - 60px); overflow-y: auto; padding: 18px 14px 24px; border-radius: 0; }
.lx-site-menu-panel ul { margin: 6px 0 0; padding: 0; list-style: none; }
.lx-site-menu-panel .lx-kicker { margin: 0 0 2px 12px; }
.lx-site-foot-in { grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) {
  .lx-site-menu { display: block; position: static; }
  .lx-site-bar { position: relative; }
}
@media (max-width: 860px) { .lx-site-foot-in { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .lx-site-foot-in { grid-template-columns: minmax(0, 1fr); } }
.lx-site-nav .lx-site-drop li a { font: 400 .92rem/1.35 var(--body); letter-spacing: 0; text-transform: none; }

/* ---------------------------------------------- the sign-up (site/_join.html) */
.lx-join { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.lx-join-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.lx-join-sides legend { width: 100%; margin: 0 0 12px; padding: 0; text-align: center; }
.lx-join-side { position: relative; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 10px 10px 14px; border-radius: 4px; cursor: pointer; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, transform .2s, background .2s; }
.lx-join-side input { position: absolute; opacity: 0; pointer-events: none; }
html.lx-site .lx-join-side img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; margin: 0; object-fit: cover; object-position: 50% 22%; border-radius: 3px; filter: saturate(.7) brightness(.72); transition: filter .25s; }
.lx-join-side > span { display: flex; flex-direction: column; gap: 3px; text-align: center; }
.lx-join-side strong { font: 700 .82rem/1.2 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--bone); }
.lx-join-side small { font-size: .8rem; line-height: 1.35; color: var(--muted); }
.lx-join-side:hover { transform: translateY(-2px); }
.lx-join-side:hover img { filter: none; }
.lx-join-side:has(input:focus-visible) { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.lx-join-side.is-vampire:has(input:checked) { background: rgba(107, 16, 36, .35); box-shadow: inset 0 0 0 2px var(--blood-2), 0 0 28px -6px var(--blood-glow); }
.lx-join-side.is-werewolf:has(input:checked) { background: rgba(40, 60, 92, .35); box-shadow: inset 0 0 0 2px var(--wolf), 0 0 28px -6px rgba(143, 176, 219, .45); }
.lx-join-side:has(input:checked) img { filter: none; }
.lx-join-side.is-vampire:has(input:checked) strong { color: #f3b3c0; }
.lx-join-side.is-werewolf:has(input:checked) strong { color: #cfe0f6; }
.lx-join.is-compact .lx-join-side { flex-direction: row; justify-content: center; padding: 12px; }

.lx-join-balance { display: flex; flex-direction: column; gap: 6px; }
.lx-join-balance-bar { position: relative; display: block; height: 6px; border-radius: 3px; overflow: hidden; background: linear-gradient(90deg, rgba(143, 176, 219, .55), rgba(143, 176, 219, .85)); box-shadow: 0 0 0 1px #000; }
.lx-join-balance-bar i { position: absolute; inset: 0 auto 0 0; width: var(--v); background: linear-gradient(90deg, var(--wine-hi), var(--blood-2)); }
.lx-join-balance small { text-align: center; font-size: .78rem; color: var(--muted); }

.lx-join-row { display: flex; gap: 10px; }
.lx-join-field { position: relative; display: flex; flex: 1; min-width: 0; margin: 0; }
.lx-join-field .lx-ic { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); font-size: 18px; color: var(--muted); pointer-events: none; }
html.lx-site .lx-join-field input { width: 100%; height: 52px; margin: 0; padding: 0 14px 0 44px; border: 0; border-radius: 3px; background: rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 2px 6px rgba(0, 0, 0, .6); color: var(--bone); font: 400 1rem/1 var(--body); transition: box-shadow .2s; }
html.lx-site .lx-join-field input::placeholder { color: var(--faint); }
html.lx-site .lx-join-field input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 3px rgba(201, 160, 90, .2); }
.lx-join-row .lx-btn { flex: none; min-height: 52px; }
.lx-join-spin { display: none; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: lx-join-spin .7s linear infinite; }
.lx-join.is-busy .lx-join-spin { display: inline-block; }
.lx-join.is-busy .lx-btn { pointer-events: none; opacity: .85; }
@keyframes lx-join-spin { to { transform: rotate(360deg); } }
.lx-join-error { margin: 0; padding: 10px 12px; border-radius: 3px; background: rgba(107, 16, 36, .35); box-shadow: inset 0 0 0 1px rgba(156, 42, 68, .6); color: #f3d3d0; font-size: .88rem; }
.lx-join-error[hidden] { display: none; }
.lx-join-next { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font-size: .8rem; color: var(--muted); text-align: center; }
.lx-join-next .lx-ic { flex: none; color: var(--gold-2); }

@media (max-width: 480px) {
  .lx-join-row { flex-direction: column; }
  .lx-join-row .lx-btn { width: 100%; }
  .lx-join-side small { display: none; }
  .lx-join.is-compact .lx-join-side { padding: 10px 6px; }
}

/* ---------------------------------------------------------------- landing */
.lx-land { display: block; }
.lx-land-hero { position: relative; display: flex; align-items: center; min-height: min(100svh, 900px); padding: 100px 24px 60px; overflow: hidden; isolation: isolate; }
.lx-land-hero-art { position: absolute; inset: 0; z-index: -2; }
html.lx-site .lx-land-hero-art img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: 62% 40%; }
.lx-land-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 4, 5, .85) 0%, rgba(6, 4, 5, .35) 40%, rgba(6, 4, 5, 0) 62%, rgba(6, 4, 5, .35) 100%),
    linear-gradient(180deg, rgba(6, 4, 5, .55) 0%, transparent 18%, transparent 72%, var(--ink-0) 100%); }
html.lx-site .lx-land-hero-art img { filter: brightness(1.25) contrast(1.05); }
.lx-land-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 48px; align-items: center; width: 100%; max-width: 1240px; margin: 0 auto; }
.lx-land-pitch { display: flex; flex-direction: column; gap: 18px; max-width: 580px; }
.lx-land-eyebrow { margin: 0; font: 600 .74rem/1.2 var(--display); letter-spacing: .34em; text-transform: uppercase; color: var(--gold-2); }
html.lx-site .lx-land-pitch h1 { margin: 0; font: 700 clamp(2.2rem, 5.2vw, 4rem)/1.05 var(--deco); color: var(--bone); text-shadow: 0 2px 0 #000, 0 0 40px rgba(0, 0, 0, .8); text-transform: none; letter-spacing: 0; }
.lx-land-lead { margin: 0; font-size: clamp(1.02rem, 1.6vw, 1.22rem); line-height: 1.6; color: var(--text); text-shadow: 0 1px 8px rgba(0, 0, 0, .9); }
.lx-land-card { display: flex; flex-direction: column; gap: 18px; padding: 26px 24px 20px; background: rgba(10, 6, 8, .84); backdrop-filter: blur(6px); }
.lx-land-alt { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lx-land-login { text-align: center; }
.lx-land-login summary { list-style: none; cursor: pointer; font-size: .9rem; color: var(--muted); }
.lx-land-login summary::-webkit-details-marker { display: none; }
.lx-land-login summary b { color: var(--gold-2); font-weight: 500; border-bottom: 1px dashed rgba(240, 207, 136, .45); }
.lx-land-login[open] summary { margin-bottom: 14px; }
.lx-land-login-form { display: grid; gap: 10px; text-align: left; }
.lx-land-login-form .lx-btn { width: 100%; }
.lx-land-login-form .lx-link { justify-self: center; }

/* section titles */
html.lx-site .lx-land-title { margin: 0 0 30px; text-align: center; font: 700 clamp(1.5rem, 3vw, 2.2rem)/1.15 var(--deco); color: var(--bone); text-transform: none; letter-spacing: 0; }
html.lx-site .lx-land-title::after { content: ''; display: block; width: 220px; height: 14px; margin: 12px auto 0; background: url(../v2/svg/divider.svg) center / contain no-repeat; opacity: .8; }

/* why */
.lx-land-why { max-width: 1240px; margin: 0 auto; padding: 40px 24px 20px; }
.lx-land-why ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.lx-land-why li { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 26px 20px 22px; text-align: center; }
.lx-land-why li > div { display: flex; flex-direction: column; gap: 8px; }
html.lx-site .lx-land-why h3 { margin: 0; font: 700 .9rem/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--bone); }
.lx-land-why p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--text); }

/* the long read from the CMS (seo/landing_page.html: <section class="first|second"><div class="container">) */
.lx-land-story, .lx-article-body { max-width: 860px; margin: 0 auto; padding: 30px 24px 10px; }
html.lx-site .lx-land-story section, html.lx-site .lx-article-body section { margin: 0; padding: 34px 0; background: none; box-shadow: inset 0 -1px 0 var(--line); }
html.lx-site .lx-land-story section:last-child, html.lx-site .lx-article-body section:last-child { box-shadow: none; }
html.lx-site .lx-land-story .container, html.lx-site .lx-land-story .d-container,
html.lx-site .lx-article-body .container, html.lx-site .lx-article-body .d-container { width: auto; max-width: none; margin: 0; padding: 0; }
html.lx-site :is(.lx-land-story, .lx-article-body) section h2 { margin: 0 0 18px; font: 700 clamp(1.4rem, 2.6vw, 1.9rem)/1.2 var(--deco); color: var(--bone); text-transform: none; letter-spacing: 0; text-align: left; }
html.lx-site :is(.lx-land-story, .lx-article-body) section h3 { margin: 26px 0 10px; font: 700 .95rem/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); text-align: left; }
html.lx-site :is(.lx-land-story, .lx-article-body) section p, html.lx-site :is(.lx-land-story, .lx-article-body) section li { margin: 0 0 14px; font-size: 1.04rem; line-height: 1.75; color: var(--text); text-align: left; }
html.lx-site :is(.lx-land-story, .lx-article-body) section strong, html.lx-site :is(.lx-land-story, .lx-article-body) section b { color: var(--bone); font-weight: 700; }
html.lx-site :is(.lx-land-story, .lx-article-body) section em { color: var(--gold-2); }
html.lx-site :is(.lx-land-story, .lx-article-body) section a { color: var(--gold-2); border-bottom: 1px dashed rgba(240, 207, 136, .45); }
html.lx-site :is(.lx-land-story, .lx-article-body) section ol, html.lx-site :is(.lx-land-story, .lx-article-body) section ul { margin: 0 0 14px; padding-left: 0; list-style: none; }
html.lx-site :is(.lx-land-story, .lx-article-body) section li { position: relative; padding-left: 22px; }
html.lx-site :is(.lx-land-story, .lx-article-body) section li::before { content: ''; position: absolute; left: 2px; top: .7em; width: 7px; height: 7px; transform: rotate(45deg); background: var(--blood-2); box-shadow: 0 0 0 1px #000; }
html.lx-site :is(.lx-land-story, .lx-article-body) section img { display: block; height: auto; margin: 18px auto; border-radius: 3px; box-shadow: 0 0 0 1px var(--line-2), 0 14px 30px rgba(0, 0, 0, .5); }

/* final call */
.lx-land-final { max-width: 760px; margin: 40px auto 70px; padding: 36px 28px 26px; }
html.lx-site .lx-land-final .lx-land-title { margin-bottom: 22px; }
.lx-land-final .lx-join-sides legend { display: none; }

/* phone dock: shown by site.js once the hero form leaves the screen */
.lx-land-dock { position: fixed; inset: auto 0 0; z-index: 800; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, rgba(6, 4, 5, .92) 30%); }
.lx-land-dock .lx-btn { width: 100%; }
.lx-land-dock[hidden] { display: none; }
@media (min-width: 861px) { .lx-land-dock { display: none !important; } }

@media (max-width: 1100px) {
  .lx-land-why ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .lx-land-hero { align-items: flex-start; min-height: 0; padding: 88px 16px 30px; }
  .lx-land-hero-in { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .lx-land-pitch { gap: 12px; padding-top: 18vh; }
  .lx-land-card { max-width: 520px; width: 100%; margin: 0 auto; }
  .lx-land-hero::after { background: linear-gradient(180deg, rgba(6, 4, 5, .5) 0%, rgba(6, 4, 5, .15) 25%, rgba(6, 4, 5, .7) 52%, var(--ink-0) 78%); }
}
@media (max-width: 700px) {
  html.lx-site .lx-land-hero-art img { object-position: 60% 20%; height: 78%; }
  .lx-land-hero-art { background: var(--ink-0); }
}
@media (max-width: 560px) {
  .lx-land-pitch { padding-top: clamp(40px, 22vh - 60px, 150px); }
  html.lx-site .lx-join-side img { aspect-ratio: 16 / 9; }
  .lx-land-card { padding: 22px 14px 16px; }
  .lx-land-why { padding: 26px 14px 10px; }
  .lx-land-why ul { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lx-land-why li { flex-direction: row; align-items: flex-start; text-align: left; padding: 18px 16px; }
  .lx-land-story, .lx-article-body { padding: 20px 16px 0; }
  .lx-land-final { margin: 24px 14px 40px; padding: 30px 14px 20px; }
}

/* ----------------------------------------- articles, keyword and character pages */
.lx-article { display: block; padding-bottom: 40px; }
.lx-article-head { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 130px 24px 46px; text-align: center;
  background: linear-gradient(180deg, rgba(6, 4, 5, .55), var(--ink-0)), url(../images/site/hero-1280.webp) center 35% / cover no-repeat; box-shadow: inset 0 -1px 0 var(--line); }
html.lx-site .lx-article-head h1 { max-width: 900px; margin: 0; font: 700 clamp(1.9rem, 4.4vw, 3.2rem)/1.1 var(--deco); color: var(--bone); text-shadow: 0 2px 0 #000, 0 0 30px rgba(0, 0, 0, .8); text-transform: none; letter-spacing: 0; }
.lx-article-lead { max-width: 680px; margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--text); text-shadow: 0 1px 6px #000; }

.lx-site-cta { max-width: 760px; margin: 30px auto; padding: 26px 24px 20px; }
.lx-article-body .lx-site-cta { margin: 10px 0 30px; }
.lx-site-cta-title { margin: 0 0 16px; text-align: center; font: 700 1.3rem/1.2 var(--deco); color: var(--bone); }
.lx-site-cta .lx-join-sides legend { display: none; }

/* keyword pages */
.lx-article-gallery ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
html.lx-site .lx-article-gallery li { padding: 0; margin: 0; }
html.lx-site .lx-article-gallery li::before { display: none; }
html.lx-site .lx-article-gallery a { display: block; border: 0; }
html.lx-site .lx-article-gallery img { width: 100%; height: auto; aspect-ratio: 13 / 16; margin: 0; object-fit: cover; border-radius: 3px; }
.lx-article-video-link { position: relative; display: block; overflow: hidden; border-radius: 3px; box-shadow: 0 0 0 1px var(--line-2); }
html.lx-site .lx-article-video-link { border: 0; }
html.lx-site .lx-article-video-link img { width: 100%; margin: 0; filter: brightness(.6); transition: filter .25s; }
.lx-article-video-link:hover img { filter: brightness(.8); }
.lx-article-video-play { position: absolute; top: 50%; left: 50%; width: 76px; height: 76px; transform: translate(-50%, -50%); border-radius: 50%; background: linear-gradient(180deg, var(--wine-hi), var(--wine-lo)); box-shadow: 0 0 0 2px #000, 0 0 0 3px rgba(232, 170, 160, .35), 0 0 30px var(--blood-glow); }
.lx-article-video-play::after { content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border: 14px solid transparent; border-left: 22px solid #fff; border-right: 0; }
.lx-article-video-label { position: absolute; left: 16px; bottom: 12px; font: 600 .7rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--bone); }
.lx-article-players { max-width: 1000px; margin: 40px auto 0; padding: 0 24px; }
.lx-article-players ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.lx-article-players a { display: flex; align-items: center; gap: 14px; padding: 12px; }
html.lx-site .lx-article-players img { width: 64px; height: 64px; margin: 0; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--line-2); }
.lx-article-players span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lx-article-players strong { color: var(--bone); overflow-wrap: anywhere; }
.lx-article-players small { font-size: .8rem; color: var(--muted); }

/* character pages */
.lx-char-sheet { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; align-items: start; max-width: 1000px; margin: 30px auto 0; padding: 0 24px; }
.lx-char-portrait .lx-frame-skin { width: 100%; max-width: 280px; }
.lx-char-stats { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lx-char-medals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.lx-char-medals li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 8px; text-align: center; }
.lx-char-medals b { font: 700 1.5rem/1 var(--deco); color: var(--gold-2); }
.lx-char-medals small { font: 600 .6rem/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lx-char-attrs { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 20px; list-style: none; }
.lx-char-attrs li { display: grid; grid-template-columns: 110px minmax(0, 1fr) 70px; align-items: center; gap: 12px; }
.lx-char-attrs span:first-child { font: 600 .66rem/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.lx-char-attrs .lx-bar { height: 8px; }
.lx-char-attrs b { text-align: right; color: var(--bone); }
.lx-char .lx-article-body { padding-top: 10px; }

@media (max-width: 760px) {
  .lx-article-head { padding: 104px 16px 34px; }
  .lx-site-cta { margin: 24px 14px; padding: 22px 14px 16px; }
  .lx-article-body .lx-site-cta { margin: 6px 0 24px; }
  .lx-char-sheet { grid-template-columns: minmax(0, 1fr); padding: 0 14px; }
  .lx-char-portrait { justify-self: center; width: 100%; max-width: 260px; }
  .lx-char-attrs { padding: 16px 14px; }
  .lx-char-attrs li { grid-template-columns: 88px minmax(0, 1fr) 56px; gap: 8px; }
  .lx-char-medals b { font-size: 1.2rem; }
  .lx-article-players { padding: 0 14px; }
}

/* ------------------------------- sign-up step 2 (players/player_form.html) */
.lx-create-head { padding-bottom: 70px; }
.lx-create-steps { display: flex; align-items: center; gap: 0; margin: 4px 0 0; padding: 0; list-style: none; }
.lx-create-steps li { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink-2); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px var(--line-2); color: var(--faint); }
.lx-create-steps li + li { margin-left: 46px; }
.lx-create-steps li + li::before { content: ''; position: absolute; right: 100%; top: 50%; width: 46px; height: 2px; margin-top: -1px; background: var(--line-2); }
.lx-create-steps .lx-ic { font-size: 18px; }
.lx-create-steps li.is-done { background: linear-gradient(180deg, var(--wine-hi), var(--wine-lo)); color: #fff; }
.lx-create-steps li.is-now { color: var(--gold-2); box-shadow: 0 0 0 1px #000, inset 0 0 0 2px var(--gold), 0 0 18px var(--gold-glow); }
.lx-create-steps li.is-now::before { background: linear-gradient(90deg, var(--wine-hi), var(--gold)); }

.lx-create-card { max-width: 560px; margin: -40px auto 40px; padding: 28px 26px 22px; background: rgba(10, 6, 8, .92); }
.lx-create-form { display: flex; flex-direction: column; gap: 18px; }
.lx-create-bitten { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; padding: 12px 14px; border-radius: 3px; background: rgba(107, 16, 36, .3); box-shadow: inset 0 0 0 1px rgba(156, 42, 68, .55); color: var(--bone); font-size: .92rem; line-height: 1.5; }
.lx-create-bitten .lx-ic { flex: none; font-size: 20px; }
.lx-create-note { margin: -6px 0 0; text-align: center; font-size: .84rem; line-height: 1.5; color: var(--muted); }
.lx-create-sides.has-error .lx-join-side { box-shadow: inset 0 0 0 1px rgba(196, 42, 51, .7); }
.lx-create-submit { width: 100%; }
.lx-create-submit .lf-btn-spinner { display: none; }
.lx-create-submit.is-loading { pointer-events: none; opacity: .85; }
.lx-create-submit.is-loading .lf-btn-spinner { display: inline-block; }
.lx-create-terms { margin: 0; text-align: center; font-size: .8rem; line-height: 1.5; color: var(--muted); }

@media (max-width: 560px) {
  .lx-create-head { padding-bottom: 56px; }
  .lx-create-card { margin: -34px 12px 30px; padding: 22px 14px 18px; }
  .lx-create-steps li + li { margin-left: 30px; }
  .lx-create-steps li + li::before { width: 30px; }
}
html.lx-site:has(.lx-create) .lx-site-play { display: none; }

/* -------------------- visitor ranking (ranking/playerrank_list_visitor.html) */
.lx-rank-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 16px; max-width: 900px; margin: 34px auto 0; padding: 0 24px; list-style: none; }
.lx-rank-podium .is-1 { order: 2; }
.lx-rank-podium .is-2 { order: 1; }
.lx-rank-podium .is-3 { order: 3; }
.lx-rank-podium a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 12px 18px; text-align: center; }
.lx-rank-podium .is-1 a { padding-top: 40px; box-shadow: 0 0 40px -10px var(--gold-glow); }
.lx-rank-place { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; min-width: 36px; height: 28px; padding: 0 8px; border-radius: 2px; background: var(--ink-3); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px var(--line-2); font: 700 .8rem/1 var(--deco); color: var(--bone); }
.lx-rank-podium .is-1 .lx-rank-place { background: var(--metal-gold); color: #2a1a06; }
html.lx-site .lx-rank-podium a > img { width: 84px; height: 84px; margin: 0; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--line-2); }
html.lx-site .lx-rank-podium .is-1 a > img { width: 108px; height: 108px; box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--gold); }
.lx-rank-podium strong { max-width: 100%; overflow-wrap: anywhere; font: 700 1rem/1.2 var(--display); color: var(--bone); }
.lx-rank-podium small { font-size: .8rem; color: var(--muted); }

.lx-rank-list, .lx-char-table { max-width: 1000px; margin: 20px auto 0; padding: 0 24px; }
html.lx-site :is(.lx-rank-list, .lx-char-table) .lx-table-wrap { overflow-x: auto; padding: 0; }
html.lx-site :is(.lx-rank-list, .lx-char-table) .lx-table { width: 100%; margin: 0; border-collapse: collapse; font-size: .92rem; white-space: nowrap; }
html.lx-site :is(.lx-rank-list, .lx-char-table) .lx-table :is(th, td) { padding: 11px 14px; border: 0; background: none; text-align: right; box-shadow: inset 0 -1px 0 var(--line); color: var(--bone); }
html.lx-site .lx-rank-list .lx-table thead th { font: 600 .6rem/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
html.lx-site .lx-rank-list .lx-table .is-pos { width: 1%; text-align: center; color: var(--gold-2); }
html.lx-site .lx-rank-list .lx-table .is-name, html.lx-site .lx-rank-list .lx-table thead th:nth-child(2) { text-align: left; }
html.lx-site .lx-rank-list .lx-table .is-name a { color: inherit; }
html.lx-site .lx-rank-list .lx-table tbody tr:hover { background: rgba(107, 16, 36, .18); }

html.lx-site .lx-char-table .lx-table th { font-weight: 500; color: var(--text); text-align: left; white-space: normal; }
html.lx-site .lx-char-table .lx-table td:last-child { color: var(--muted); font-size: .82rem; }

.lx-site-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 20px 0 0; }
.lx-site-pager :is(a, span) { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); font: 600 .85rem/1 var(--body); }
html.lx-site .lx-site-pager a:hover { color: var(--gold-2); box-shadow: inset 0 0 0 1px var(--gold); }
.lx-site-pager [aria-current] { background: linear-gradient(180deg, var(--wine-hi), var(--wine-lo)); color: #fff; box-shadow: 0 0 0 1px #000; }
.lx-site-pager .is-gap { box-shadow: none; min-width: 20px; }

@media (max-width: 640px) {
  .lx-rank-podium { gap: 8px; padding: 0 10px; margin-top: 28px; }
  .lx-rank-podium a { padding: 22px 6px 12px; }
  html.lx-site .lx-rank-podium a > img { width: 58px; height: 58px; }
  html.lx-site .lx-rank-podium .is-1 a > img { width: 74px; height: 74px; }
  .lx-rank-podium strong { font-size: .82rem; }
  .lx-rank-podium small { font-size: .7rem; }
  .lx-rank-list, .lx-char-table { padding: 0 10px; }
  html.lx-site :is(.lx-rank-list, .lx-char-table) .lx-table :is(th, td) { padding: 10px 8px; }
}

/* -------- narrow public pages: login, password recovery (accounts/*.html) */
.lx-site-narrow-head { padding-bottom: 70px; }
.lx-site-card { max-width: 460px; margin: -40px auto 50px; padding: 28px 26px 22px; background: rgba(10, 6, 8, .92); }
.lx-site-card-form { display: flex; flex-direction: column; gap: 16px; }
.lx-site-card-lead { margin: 0; text-align: center; font-size: .92rem; line-height: 1.5; color: var(--muted); }
.lx-site-card-aside { align-self: flex-end; margin-top: -6px; font-size: .84rem; }
.lx-site-card-submit { width: 100%; }
.lx-site-card-submit .lf-btn-spinner { display: none; }
.lx-site-card-submit.is-loading { pointer-events: none; opacity: .85; }
.lx-site-card-submit.is-loading .lf-btn-spinner { display: inline-block; }
.lx-site-card-switch { margin: 18px 0 0; padding-top: 16px; text-align: center; font-size: .9rem; color: var(--muted); box-shadow: inset 0 1px 0 var(--line); }
.lx-site-card-note { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 12px 14px; border-radius: 3px; background: rgba(107, 76, 28, .2); box-shadow: inset 0 0 0 1px rgba(201, 160, 90, .4); color: var(--bone); font-size: .88rem; line-height: 1.5; }
.lx-site-card-note.is-error { background: rgba(107, 16, 36, .3); box-shadow: inset 0 0 0 1px rgba(156, 42, 68, .6); }
.lx-site-card-note .lx-ic { flex: none; font-size: 18px; margin-top: 1px; }
.lx-site-card-done { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 10px 0; text-align: center; }
.lx-site-card-done > .lx-ic { font-size: 44px; }
.lx-site-card-done p { margin: 0; color: var(--bone); line-height: 1.6; }
.lx-site-card #vkid-onetap { margin-bottom: 4px; }

/* terms (includes/_terms_text.html, styled by v2/47_terms.css) */
html.lx-site .lx-site-terms .lx-terms { max-width: 1140px; margin: 0 auto; padding: 30px 20px 50px; }

@media (max-width: 560px) {
  .lx-site-narrow-head { padding-bottom: 56px; }
  .lx-site-card { margin: -34px 12px 34px; padding: 22px 14px 18px; }
  html.lx-site .lx-site-terms .lx-terms { padding: 20px 10px 40px; }
}