/* jianghu-arena.com landing page (index.html, ). Loaded after site.css, which
keeps :root, body and footer. Every rule here is scoped under .lp; phone first,
481px = tablet (phone layout, 640 px content), 1024px = desktop. */
@font-face { font-family: "Chonburi"; src: url("/assets/fonts/chonburi-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Kanit"; src: url("/assets/fonts/kanit-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
/* first, uncached visit: until the woff2 files land, Latin text is set in a local face scaled to the web font's
metrics (Chonburi's Latin is ~25 % wider than Georgia: 17.89 / 14.28 em per 26 letters; Kanit 600 vs Arial Bold
67.99 / 70.58), so the swap does not re-wrap the H1 or move the hero (CLS 0.117 -> 0 on /en/ at 1024 px).
Latin only: Thai goes on to the next face in the stack, as before. */
@font-face { font-family: "Chonburi Fallback"; src: local("Georgia"), local("Times New Roman"), local("TimesNewRomanPSMT"); size-adjust: 125%; ascent-override: 76%; descent-override: 20%; line-gap-override: 0%; unicode-range: U+0000-024F, U+2000-206F; }
@font-face { font-family: "Kanit Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"); font-weight: 600; size-adjust: 96%; ascent-override: 114%; descent-override: 41%; line-gap-override: 0%; unicode-range: U+0000-024F, U+2000-206F; }
/* the Russian page takes only Kanit's digits and plus/minus: its "?", dashes and Latin words stay in the system
face that sets the Cyrillic around them */
@font-face { font-family: "Kanit Digits"; src: url("/assets/fonts/kanit-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0030-0039, U+002B, U+2212; }
.lp {
--lp-jade: #0b160e; --lp-jade-2: #10261a; --lp-jade-3: #23533a;
--lp-gold: #debf52; --lp-gold-hi: #f3dc7a; --lp-gold-lo: #c9a53a; --lp-gold-ink: #805208;
--lp-paper-hi: #fffaf0; --lp-paper: #fef8e6; --lp-paper-2: #f6e9c6;
--lp-ink: #302117; --lp-ink-2: #665445;
--lp-cream: #f6f1e0; --lp-mist: #8c948a;
--lp-live: #6bd17a; --lp-alert: #e66159;
--lp-line: rgba(128, 82, 8, .35); --lp-gold-line: rgba(222, 191, 82, .35); --lp-glass: rgba(254, 248, 230, .07);
--lp-ease: cubic-bezier(.2, .8, .2, 1);
--lp-shadow-card: 0 18px 40px rgba(0, 0, 0, .45);
--lp-shadow-paper: 0 0 0 6px rgba(222, 191, 82, .14), 0 26px 70px rgba(0, 0, 0, .55);
--lp-f-sys: system-ui, -apple-system, "Segoe UI", "Noto Sans Thai", "Leelawadee UI", "Sukhumvit Set", Roboto, sans-serif;
--lp-f-display: "Chonburi", "Chonburi Fallback", "Noto Serif Thai", "Leelawadee UI", "Sukhumvit Set", Georgia, serif;
--lp-f-ui: "Kanit", "Kanit Fallback", var(--lp-f-sys);
--lp-gutter: 16px;
/* text roles; paper surfaces redefine them */
--lp-head: var(--lp-gold); --lp-fg: var(--lp-cream); --lp-fg2: rgba(246, 241, 224, .8);
--lp-eye: rgba(246, 241, 224, .82); --lp-ring: #fff;
overflow-x: clip;
background: var(--lp-jade);
color: var(--lp-fg);
-webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
/* Pages whose script the local subsets (Latin + Thai) do not cover set their text in system fonts, chosen per
language so kanji/hanzi get their own forms; Kanit stays first in the UI face for digits and Latin words. The
display face is not used there (build_pages.py drops its preload on these pages).
The rules match the page (body.lp) AND any element inside it that carries its own lang (the language lists,
the suggestion bar), so "Русский" on the zh page gets a Cyrillic face, not the CJK font's full-width letters,
and 日本語 on the zh page gets Japanese glyphs. A Latin or Thai name there goes back to the default faces. */
:is(.lp, .lp [lang]):lang(zh) { --lp-f-lang: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC"; }
:is(.lp, .lp [lang]):lang(ja) { --lp-f-lang: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", YuGothic, Meiryo, "Noto Sans CJK JP", "Noto Sans JP"; }
:is(.lp, .lp [lang]):lang(zh-Hant) { --lp-f-lang: "PingFang TC", "Hiragino Sans TC", "Microsoft JhengHei", "Noto Sans CJK TC", "Noto Sans TC", "Source Han Sans TC"; } /* the suggestion bar for zh-TW / zh-HK */
:is(.lp, .lp [lang]):lang(ko) { --lp-f-lang: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Noto Sans KR"; }
:is(.lp, .lp [lang]):is(:lang(zh), :lang(ja), :lang(ko)) {
--lp-f-sys: var(--lp-f-lang), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--lp-f-display: var(--lp-f-lang), system-ui, sans-serif;
--lp-f-ui: "Kanit", var(--lp-f-lang), system-ui, sans-serif;
}
/* …and the body copy itself: site.css (protected) sets body text in a Latin/Thai stack, so without this the hanzi,
kana and hangul came from browser fallback, with narrow Latin quotes and dots pressed against them */
.lp:is(:lang(zh), :lang(ja), :lang(ko)) { font-family: var(--lp-f-sys); }
:is(.lp, .lp [lang]):lang(ru) {
--lp-f-sys: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
--lp-f-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
--lp-f-ui: "Kanit Digits", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
.lp [lang]:is(:lang(th), :lang(en), :lang(es), :lang(pt), :lang(de), :lang(fr)) {
--lp-f-sys: system-ui, -apple-system, "Segoe UI", "Noto Sans Thai", "Leelawadee UI", "Sukhumvit Set", Roboto, sans-serif;
--lp-f-ui: "Kanit", "Kanit Fallback", var(--lp-f-sys);
}
/* a system face at 400 reads thin where Chonburi (400) is heavy: the display headings go bold */
.lp:is(:lang(zh), :lang(ja), :lang(ko), :lang(ru)) :is(.lp-h1, .lp-h2) { font-weight: 700; }
/* line breaking per language: Korean breaks between words only, CJK keeps strict kinsoku (Japanese running
text also by phrase where the browser can: Chrome 119+, Safari keeps the nw spans in ja.json). The European
languages and Russian do not hyphenate automatically: Chromium ignores hyphenate-limit-chars and split short
words ("мо-нет", "Sekt-en", "Schadensredukti-on"); the few words too long for a narrow card carry in
their language file, and overflow-wrap is the safety net. */
:is(.lp, .lp [lang]):lang(ko) { word-break: keep-all; overflow-wrap: break-word; }
.lp [lang]:not(:lang(ko)) { word-break: normal; }
:is(.lp, .lp [lang]):is(:lang(zh), :lang(ja)) { line-break: strict; }
.lp:lang(ja) :is(p, li, summary, figcaption, h3):lang(ja) { word-break: auto-phrase; }
.lp:is(:lang(de), :lang(fr), :lang(es), :lang(pt), :lang(ru)) { overflow-wrap: break-word; }
.lp a[href^="mailto:"], .lp .lp-faq__a a { -webkit-hyphens: manual; hyphens: manual; overflow-wrap: anywhere; }
.lp [hidden] { display: none !important; }
.lp img { max-width: 100%; height: auto; }
.lp h1, .lp h2, .lp h3 { margin: 0; font-weight: 400; }
.lp .nw { white-space: nowrap; }
.lp :focus-visible { outline: 3px solid var(--lp-ring); outline-offset: 3px; }
.lp section[id] { scroll-margin-top: var(--lp-bar); } /* the sticky bar never covers a section's top */
.lp .lp-wrap { max-width: 1120px; margin-inline: auto; padding-inline: var(--lp-gutter); }
.lp .lp-paperband, .lp .lp-panel, .lp .lp-faq {
--lp-head: var(--lp-ink); --lp-fg: var(--lp-ink); --lp-fg2: var(--lp-ink-2); --lp-eye: var(--lp-gold-ink); --lp-ring: var(--lp-ink);
color: var(--lp-ink);
}
.lp .lp-paperband a:not([class]), .lp .lp-panel a:not([class]), .lp .lp-faq a:not([class]) { color: var(--lp-gold-ink); }
/* ── type ─────────────────────────────────────────────────────────────── */
.lp .lp-eyebrow { display: block; margin: 0 0 8px; font: 600 13px/1.6 var(--lp-f-ui); letter-spacing: .12em; color: var(--lp-eye); }
.lp .lp-h1 {
display: block; font-family: var(--lp-f-display); font-weight: 400; font-size: clamp(24px, 7vw, 44px); line-height: 1.3;
color: var(--lp-gold); text-wrap: balance; text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}
.lp .lp-h2 { display: block; font-family: var(--lp-f-display); font-weight: 400; font-size: clamp(24px, 5vw, 38px); line-height: 1.35; color: var(--lp-head); text-wrap: balance; }
.lp .lp-paperband h2::after {
content: ""; display: block; width: 160px; height: 10px; margin: 14px auto 0; background: var(--lp-gold-ink);
-webkit-mask: url("/assets/lp/rule.webp") center / 100% 100% no-repeat; mask: url("/assets/lp/rule.webp") center / 100% 100% no-repeat;
}
.lp .lp-lead { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--lp-fg); text-wrap: pretty; }
.lp .lp-intro { max-width: 720px; margin-inline: auto; text-align: center; }
/* ── buttons ──────────────────────────────────────────────────────────── */
.lp .lp-cta {
position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
min-height: 60px; padding: 6px 28px; overflow: hidden;
border: 2px solid #fff3c4; border-radius: 16px;
background: linear-gradient(180deg, var(--lp-gold-hi) 0%, var(--lp-gold) 55%, var(--lp-gold-lo) 100%);
box-shadow: 0 0 0 5px rgba(222, 191, 82, .22), 0 14px 32px rgba(0, 0, 0, .4);
color: var(--lp-ink); font-family: var(--lp-f-ui); font-weight: 600; line-height: 1.15; text-align: center; text-decoration: none;
-webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
@media (hover: hover) {
.lp .lp-cta:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 0 0 5px rgba(222, 191, 82, .35), 0 18px 36px rgba(0, 0, 0, .45); }
.lp .lp-cta--sm:hover, .lp .lp-cta--sticky:hover { box-shadow: 0 0 0 4px rgba(222, 191, 82, .4), 0 8px 20px rgba(0, 0, 0, .35); }
}
.lp .lp-cta:active { transform: translateY(1px); filter: brightness(.97); }
.lp .lp-cta:focus-visible { outline: 3px solid var(--lp-ring); outline-offset: 3px; }
.lp .lp-cta__th { font-size: 21px; }
.lp .lp-cta--sm, .lp .lp-cta--sticky { flex-direction: row; gap: 4px; white-space: nowrap; }
.lp .lp-cta--sm { min-height: 40px; padding: 0 18px; border-radius: 12px; font-size: 15px; box-shadow: 0 0 0 4px rgba(222, 191, 82, .18); }
.lp .lp-cta--sticky { flex: none; min-height: 48px; padding: 0 22px; border-radius: 14px; font-size: 17px; box-shadow: 0 0 0 4px rgba(222, 191, 82, .2); }
.lp .lp-btn-ghost {
display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; padding: 6px 20px;
border: 1.5px solid var(--lp-gold); border-radius: 12px; background: transparent; color: var(--lp-gold);
font: 600 15px/1.3 var(--lp-f-ui); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.lp .lp-btn-ghost:hover { background: rgba(222, 191, 82, .12); }
.lp .lp-panel .lp-btn-ghost, .lp .lp-faq .lp-btn-ghost { border-color: var(--lp-gold-ink); color: var(--lp-gold-ink); }
.lp .lp-center { margin: 32px 0 0; text-align: center; }
.lp .lp-center .lp-cta, .lp #cta-hero, .lp #cta-final { width: 100%; max-width: 420px; }
/* ── header: ONE full-width bar at every width, sticky, translucent jade over the hero art ───────
--lp-bar is its height with the notch; the hero pulls up under it (margin-top: -var(--lp-bar)), so the art
starts at the very top and the bar sits over it. Phones / tablets: brand · live count · (Play from 600 px) ·
menu button; from 1280 px: brand · inline menu · language · live count · Play. */
.lp { --lp-bar-h: 60px; --lp-bar: calc(var(--lp-bar-h) + env(safe-area-inset-top, 0px)); --lp-slot-w: 132px; }
.lp .lp-head { position: sticky; top: 0; z-index: 30; height: var(--lp-bar); padding-top: env(safe-area-inset-top, 0px); color: var(--lp-cream); }
/* the glass sits on its own layer: a backdrop-filter on the bar itself would make it the containing block of
the menu's fixed scrim. It is see-through only while it sits over the hero art (landing.js sets .is-solid once
the hero has scrolled out from under it); over the cream bands it is near-opaque jade, never a muddy grey. */
.lp .lp-head::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-color: rgba(11, 22, 14, .94);
-webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
border-bottom: 1px solid var(--lp-gold-line); box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
/* phone menu open: the page behind dims (a click on it closes the menu, landing.js) */
html.js .lp .lp-head:not(.is-solid)::before { background-color: rgba(11, 22, 14, .72); }
.lp .lp-head::after {
content: ""; position: fixed; top: var(--lp-bar); left: 0; right: 0; bottom: 0; z-index: -1;
background: rgba(4, 9, 6, .62); opacity: 0; visibility: hidden; pointer-events: none;
}
.lp .lp-head:is(.is-menu, :has(> .lp-head__in .lp-menu[open])) { z-index: 45; } /* over the sticky Play bar */
@media (max-width: 1279px) { .lp .lp-head:is(.is-menu, :has(> .lp-head__in .lp-menu[open]))::after { opacity: 1; visibility: visible; pointer-events: auto; } }
html.lp-menu-open { overflow: hidden; } /* landing.js, phones only: the page behind the full-width panel does not scroll */
.lp .lp-head__in {
display: flex; align-items: center; gap: 8px; height: var(--lp-bar-h);
padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
}
.lp .lp-brand {
display: inline-flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; margin-right: auto; border-radius: 10px;
color: var(--lp-cream); font: 600 15px/1.15 var(--lp-f-ui); text-decoration: none;
}
.lp .lp-brand img { flex: none; width: 36px; height: 36px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4)); }
.lp .lp-brand__name { display: flex; flex-direction: column; white-space: nowrap; }
.lp .lp-brand__name > [lang] { font-family: var(--lp-f-ui); } /* the Latin brand in Kanit on every page (the ru page sets only digits in Kanit) */
.lp .lp-brand small { font-size: 11px; line-height: 1.25; color: rgba(246, 241, 224, .72); }
.lp .lp-nav, .lp .lp-lang, .lp .lp-cta--sm { display: none; }
.lp .lp-head__end { display: flex; flex: none; align-items: center; gap: 8px; }
/* the static chip and the live pill share one cell of a fixed width */
.lp .lp-head__slot { display: grid; align-items: center; justify-items: center; width: var(--lp-slot-w); }
.lp .lp-head__slot > * { grid-area: 1 / 1; max-width: 100%; }
.lp .lp-head__note {
justify-self: end; display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 4px 8px; border-radius: 999px;
border: 1px solid var(--lp-gold-line); background: var(--lp-glass); color: var(--lp-cream);
font: 600 12px/1.2 var(--lp-f-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp .lp-head__ok { color: var(--lp-live); }
/* the check marks: one symbol face in every language (a CJK font's own ✓ is thin and small) */
.lp .lp-head__ok, .lp .lp-chips li > span[aria-hidden], .lp .lp-menu__langs a[aria-current]::after, .lp .lp-lang__list a[aria-current]::after {
font-family: system-ui, -apple-system, "Segoe UI Symbol", "Segoe UI", sans-serif;
}
/* the live count: online on the first line, all players smaller on the second (members alone: one line) */
.lp .lp-pill {
display: inline-flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; row-gap: 0; column-gap: 6px;
width: 100%; min-height: 40px; padding: 3px 10px; border-radius: 12px; border: 1px solid var(--lp-gold-line); background: rgba(11, 22, 14, .35);
color: var(--lp-cream); font: 600 13px/1.25 var(--lp-f-ui); white-space: nowrap;
}
.lp .lp-pill b { color: var(--lp-gold); font-weight: 600; font-variant-numeric: tabular-nums; }
.lp .lp-pill__o, .lp .lp-pill__m { display: inline-flex; align-items: center; gap: 5px; }
.lp .lp-pill__t, .lp .lp-pill__t > span { display: contents; }
.lp .lp-pill__sep { display: none; }
.lp .lp-pill__m { flex-basis: 100%; justify-content: center; font-size: 11px; color: var(--lp-fg2); }
html[data-live="members"] .lp .lp-pill__o { display: none; }
html[data-live="members"] .lp .lp-pill__m { font-size: inherit; color: inherit; }
/* the menu button (a : the menu opens without JavaScript too) */
.lp .lp-menu-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 10px;
border: 1px solid var(--lp-gold-line); border-radius: 12px; background: rgba(11, 22, 14, .35); color: var(--lp-cream);
font: 600 15px/1 var(--lp-f-ui); cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
}
.lp .lp-menu-btn::-webkit-details-marker { display: none; }
.lp .lp-menu-btn__i { flex: none; }
.lp .lp-menu-btn__x, .lp .lp-menu[open] .lp-menu-btn__bars, .lp .lp-menu-btn__t { display: none; }
/* below 1024 px the 10 languages live in the menu: the button shows the page's language code beside the bars */
.lp .lp-menu-btn__lang { display: none; font: 600 12px/1 var(--lp-f-ui); letter-spacing: .04em; color: var(--lp-fg2); }
/* from 390 px (the brand keeps its full width in every language: ru needs 147 px) */
@media (min-width: 390px) and (max-width: 1023px) {
.lp .lp-menu-btn { gap: 5px; padding: 0 9px 0 10px; }
.lp .lp-menu-btn__lang { display: inline; }
.lp .lp-menu[open] .lp-menu-btn__lang, .lp .lp-menu-btn:hover .lp-menu-btn__lang { color: inherit; }
}
.lp .lp-menu[open] .lp-menu-btn__x { display: inline; }
.lp .lp-menu[open] > .lp-menu-btn, .lp .lp-menu-btn:hover { border-color: var(--lp-gold); color: var(--lp-gold); }
.lp .lp-menu-btn:focus-visible, .lp .lp-lang__btn:focus-visible { outline: 3px solid var(--lp-ring); outline-offset: 2px; }
/* the panel: full width under the bar on phones, a card under the button from 768 px */
.lp .lp-menu__panel {
position: absolute; top: 100%; left: 0; right: 0;
max-height: calc(100vh - var(--lp-bar)); max-height: calc(100dvh - var(--lp-bar)); overflow-y: auto; overscroll-behavior: contain;
padding: 4px max(16px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
background: var(--lp-jade); border-bottom: 1px solid var(--lp-gold-line); box-shadow: 0 24px 48px rgba(0, 0, 0, .5);
}
.lp .lp-menu__panel ul { margin: 0; padding: 0; list-style: none; }
.lp .lp-menu__links a {
display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 4px;
border-bottom: 1px solid rgba(222, 191, 82, .16); color: var(--lp-cream); font: 600 18px/1.3 var(--lp-f-ui); text-decoration: none;
}
.lp .lp-menu__links a::after {
content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border-top: 2px solid var(--lp-gold); border-right: 2px solid var(--lp-gold);
transform: rotate(45deg); opacity: .8;
}
.lp .lp-menu__legal { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 6px !important; }
.lp .lp-menu__legal a {
display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--lp-fg2); font: 600 14px/1.3 var(--lp-f-ui);
text-decoration: underline; text-decoration-color: rgba(246, 241, 224, .3); text-underline-offset: 3px;
}
.lp .lp-menu__h { display: flex; align-items: center; gap: 6px; margin: 10px 0 8px; font: 600 13px/1.3 var(--lp-f-ui); letter-spacing: .06em; color: var(--lp-eye); }
.lp .lp-menu__langs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.lp .lp-menu__langs a {
display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 12px;
border: 1px solid var(--lp-gold-line); border-radius: 10px; color: var(--lp-cream); font: 600 15px/1.2 var(--lp-f-ui); text-decoration: none;
}
.lp .lp-menu__langs a[aria-current] { border-color: var(--lp-gold); background: rgba(222, 191, 82, .14); color: var(--lp-gold); }
.lp .lp-menu__langs a[aria-current]::after { content: "✓"; font-size: 14px; }
.lp .lp-menu__foot { margin-top: 18px; }
.lp .lp-menu__play { display: flex; width: 100%; min-height: 56px; }
@media (hover: hover) {
.lp .lp-menu__links a:hover, .lp .lp-menu__legal a:hover { color: var(--lp-gold); }
.lp .lp-menu__langs a:hover { border-color: var(--lp-gold); color: var(--lp-gold); }
}
.lp .lp-menu__panel a:focus-visible { outline-offset: -2px; }
/* language switcher (from 1024 px; below it the languages are in the menu) */
.lp .lp-lang__btn {
display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; border: 1px solid var(--lp-gold-line); border-radius: 10px;
background: rgba(11, 22, 14, .35); color: var(--lp-cream); font: 600 13px/1 var(--lp-f-ui); letter-spacing: .06em; cursor: pointer; list-style: none;
-webkit-tap-highlight-color: transparent;
}
.lp .lp-lang__btn::-webkit-details-marker { display: none; }
.lp .lp-lang__btn:hover, .lp .lp-lang[open] > .lp-lang__btn { color: var(--lp-gold); border-color: var(--lp-gold); }
.lp .lp-lang[open] .lp-caret { transform: rotate(180deg); }
.lp .lp-lang__list {
position: absolute; top: calc(100% + 10px); right: 0; z-index: 5; min-width: 200px; margin: 0; padding: 6px; list-style: none;
border: 1px solid var(--lp-gold-line); border-radius: 12px; background: rgba(11, 22, 14, .97); box-shadow: var(--lp-shadow-card);
}
.lp .lp-lang__list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 8px; color: var(--lp-cream); font: 600 15px/1.3 var(--lp-f-ui); text-decoration: none; }
.lp .lp-lang__list a:hover { background: rgba(222, 191, 82, .12); color: var(--lp-gold); }
.lp .lp-lang__list a:focus-visible { outline-offset: -2px; }
.lp .lp-lang__list a[aria-current] { color: var(--lp-gold); }
.lp .lp-lang__list a[aria-current]::after { content: "✓"; font-size: 14px; }
.lp :is(.lp-lang__list, .lp-menu__langs) a:is([lang="zh"], [lang="ja"], [lang="ko"]) { font-weight: 700; font-size: 16px; }
/* keyboard: skip the header */
.lp .lp-skip {
position: absolute; top: -200px; left: max(12px, env(safe-area-inset-left)); z-index: 100; padding: 10px 16px; border-radius: 10px;
background: var(--lp-gold); color: var(--lp-ink); font: 600 15px/1.2 var(--lp-f-ui); text-decoration: none;
}
.lp .lp-skip:focus { top: calc(8px + env(safe-area-inset-top)); }
/* narrow phones: the longest button and card titles step down one size (ru "Играть в браузере", fr "Jouer sur
navigateur" stay on one line; ru "Расстановка" stays inside its card) */
@media (max-width: 359px) {
.lp :is(#cta-final, .lp-center .lp-cta) { padding-inline: 12px; }
.lp :is(#cta-final, .lp-center .lp-cta) .lp-cta__th { font-size: 17px; }
.lp .lp-step__body h3 { font-size: 18px; }
}
/* narrow phones: one count only (online, or all players alone), no static chip in its place */
@media (max-width: 359px) {
.lp { --lp-slot-w: 104px; }
.lp .lp-head__in { gap: 6px; padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)); }
.lp .lp-brand { gap: 6px; }
.lp .lp-brand img { width: 32px; height: 32px; }
.lp .lp-brand small, .lp .lp-head__note { display: none; }
html[data-live="online"] .lp .lp-pill__m { display: none !important; }
.lp .lp-pill { padding-inline: 6px; }
/* all players alone: the number over its word ("20,000 / jugadores" does not fit one 104 px line) */
html[data-live="members"] .lp .lp-pill__m { flex-direction: column; gap: 0; line-height: 1.15; }
html[data-live="members"] .lp .lp-pill__m [data-plural] { font-size: 11px; color: var(--lp-fg2); }
}
@media (max-width: 359px) {
.lp .lp-menu__legal { column-gap: 12px; }
.lp .lp-menu__legal a { font-size: 13px; }
}
@media (max-width: 767px) {
.lp .lp-menu__panel { display: flex; flex-direction: column; min-height: calc(100vh - var(--lp-bar)); min-height: calc(100dvh - var(--lp-bar)); }
.lp .lp-menu__panel > * { flex: none; }
/* Play stays in reach: at the foot of the drawer, and pinned to the bottom of the screen while a short phone
scrolls the drawer (320 x 568, 375 x 548 with Safari's bars) */
.lp .lp-menu__foot {
position: sticky; bottom: 0; z-index: 1; margin-top: auto; padding-top: 16px;
background: linear-gradient(180deg, rgba(11, 22, 14, 0), var(--lp-jade) 16px);
}
.lp .lp-menu__langs { margin-bottom: 18px !important; }
}
/* short phones (320 x 568-700): rows a little shorter, the languages in three columns and Play right after them,
so the drawer fits without scrolling inside it */
@media (max-width: 767px) and (max-height: 760px) {
.lp .lp-menu__links a { min-height: 46px; font-size: 16px; }
.lp .lp-menu__h { margin-top: 6px; }
.lp .lp-menu__langs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-bottom: 0 !important; }
.lp .lp-menu__langs a { min-height: 42px; padding: 0 8px; font-size: 14px; }
.lp .lp-menu__langs li:has(> a[aria-current]) { display: none; } /* the menu button names it; nine make a clean 3 x 3 */
.lp .lp-menu__foot { margin-top: 8px; }
}
/* phones and tablets: once the sticky Play bar (with the same live count) is up, the header's count steps aside */
@media (max-width: 1023px) {
body:has(> .lp-sticky.is-on) .lp-head__slot { opacity: 0; visibility: hidden; }
}
@media (min-width: 600px) {
.lp { --lp-slot-w: 150px; }
.lp .lp-head__end { gap: 10px; }
.lp .lp-head__end > .lp-cta--sm { display: inline-flex; }
}
@media (min-width: 768px) {
.lp .lp-head__in { padding-inline: max(24px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-right)); }
.lp .lp-menu-btn { padding: 0 14px 0 12px; }
.lp .lp-menu-btn__t { display: inline; }
.lp .lp-head::after { background: rgba(4, 9, 6, .35); }
.lp .lp-menu__panel {
left: auto; right: max(16px, env(safe-area-inset-right)); width: 380px; max-height: calc(100vh - var(--lp-bar) - 16px); max-height: calc(100dvh - var(--lp-bar) - 16px);
padding: 8px 20px 16px; border: 1px solid var(--lp-gold-line); border-top: 0; border-radius: 0 0 18px 18px;
}
}
/* ── live counters: static and live layers share one grid cell (no layout shift). The live layers swap
in while online is known. A players count alone never stands as a lone headline: in the hero it takes the
third fact tile's place (.lp-tile-swap) and the line under the tiles swaps its fact for the time
(.lp-proof__line), in the final block it takes the place of the fourth static fact (.lp-stat__swap), and
it takes the sticky bar's line. "Shown" is visibility: inherit, so nothing shows through
the hidden sticky bar. ─ */
.lp .lp-dot { position: relative; display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lp-live); vertical-align: .06em; }
.lp .lp-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--lp-live); opacity: 0; }
.lp .lp-slot { display: grid; grid-template-columns: minmax(0, 1fr); } /* never wider than its box, whatever the content */
.lp .lp-slot > * { grid-area: 1 / 1; margin: 0; }
.lp .lp-slot > .lp-live { opacity: 0; visibility: hidden; }
html[data-live="online"] .lp .lp-slot > .lp-live, html[data-live="members"] .lp .lp-stat__swap > .lp-live, html[data-live="members"] .lp .lp-slot--online > .lp-live { opacity: 1; visibility: inherit; }
html[data-live="online"] .lp .lp-slot > .lp-static, html[data-live="members"] .lp .lp-stat__swap > .lp-static, html[data-live="members"] .lp .lp-slot--online > .lp-static { opacity: 0; visibility: hidden; }
html[data-live="members"] .lp .lp-tile-swap > .lp-live, html[data-live="members"] .lp .lp-proof__line > .lp-live { opacity: 1; visibility: inherit; }
html[data-live="members"] .lp .lp-tile-swap > .lp-static, html[data-live="members"] .lp .lp-proof__line > .lp-static { opacity: 0; visibility: hidden; }
html[data-live="members"] .lp .lp-live__o, html[data-live="members"] .lp .lp-live__sep { display: none; }
.lp .lp-pill { visibility: hidden; opacity: 0; }
html[data-live] .lp .lp-pill { visibility: inherit; opacity: 1; }
html[data-live] .lp .lp-head__note { visibility: hidden; opacity: 0; }
/* ── hero ─────────────────────────────────────────────────────────────── */
/* the hero pulls up under the sticky bar: the art starts at the very top, the bar over it. Below 1024 px the
art is a band at the top (--lp-art-h) and the same painting continues, dimmed, under the text to the
section's end (hero-m-bg, ::before), so the whole section is painted. The band (splash y 711-1991, 1.2:1) is
always drawn full width (--lp-art-h never exceeds width / 1.2) and moved up by --lp-art-p x the part that
does not fit; hero-m-bg (splash y 1000-2752, web/tools/lp_assets.py HERO_BG_Y0) is drawn at the same scale
and lined up with it, and the band's last --lp-fade px fade into it: one painting, no seam, no figure twice.
--lp-w is the hero's width (100cqw: the hero is a size container below 1024 px). */
.lp .lp-hero {
--lp-art-p: .12; --lp-fade: 96px;
--lp-art-h: min(calc(var(--lp-bar) + clamp(150px, 34vh, 250px)), var(--lp-w, 100vw) * 1280 / 1536);
position: relative; isolation: isolate; margin-top: calc(-1 * var(--lp-bar)); padding-bottom: 48px;
}
@supports (height: 1svh) { .lp .lp-hero { --lp-art-h: min(calc(var(--lp-bar) + clamp(150px, 34svh, 250px)), var(--lp-w, 100vw) * 1280 / 1536); } }
.lp .lp-art { position: relative; display: block; overflow: hidden; background: var(--lp-jade-2); height: var(--lp-art-h); }
.lp .lp-art img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% calc(var(--lp-art-p) * 100%); }
.lp .lp-art::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(11, 22, 14, .35) 0, rgba(11, 22, 14, 0) calc(var(--lp-bar) + 24px), rgba(11, 22, 14, 0) 50%, rgba(11, 22, 14, .72) 100%);
}
@media (max-width: 1023px) {
.lp .lp-hero { container-type: inline-size; }
@supports (width: 1cqw) { .lp .lp-hero { --lp-w: 100cqw; } }
.lp .lp-art {
-webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--lp-fade)), transparent);
mask-image: linear-gradient(180deg, #000 calc(100% - var(--lp-fade)), transparent);
}
/* the scrim reaches the band's own .72 where the band has faded out (--lp-fade below this box's top). Under it,
two layers of the same ink painting: hero-m-bg (the splash below the band, lined up with it) fades out into
hero-m-foot (misty mountains, anchored at the section's bottom), so the painting runs to the section's end
at every width and in every language (the splash alone ends ~250 px short on a 320-414 px phone) */
.lp .lp-hero::before {
content: ""; position: absolute; left: 0; right: 0; top: calc(var(--lp-art-h) - var(--lp-fade)); bottom: 0; z-index: -1; pointer-events: none;
background-color: var(--lp-jade);
background-image: radial-gradient(90% 34% at 50% 100%, rgba(35, 83, 58, .42), rgba(35, 83, 58, 0)),
linear-gradient(180deg, rgba(11, 22, 14, .4) 0, rgba(11, 22, 14, .72) var(--lp-fade), rgba(11, 22, 14, .8) 55%, rgba(11, 22, 14, .84)),
var(--lp-hero-bg, url("/assets/lp/hero-m-bg.webp")),
url("/assets/lp/hero-m-foot.webp");
background-repeat: no-repeat;
background-size: 100% 100%, 100% 100%, 100% auto, 100% auto;
/* splash y 1000 sits (1000 - 711) / 1536 of the width below the band image's top, which object-position lifts by
--lp-art-p x (drawn height - band height); this box starts --lp-fade above the band's bottom */
background-position: 0 0, 0 0, 50% calc(var(--lp-w, 100vw) * 289 / 1536 - var(--lp-art-p) * (var(--lp-w, 100vw) * 1280 / 1536 - var(--lp-art-h)) - var(--lp-art-h) + var(--lp-fade)), 50% 100%;
}
.lp .lp-hero :is(.lp-eyebrow, .lp-hook, .lp-lead, .lp-tiles__time, .lp-note) { text-shadow: 0 1px 8px rgba(11, 22, 14, .9); }
}
.lp .lp-hero__text { position: relative; max-width: 600px; margin: -28px auto 0; text-align: center; } /* 600: an H1 line never sits within a few px of the edge in Chonburi or in its fallback (fr "Dix sectes. Huit rivaux." is 558 / 564 px at 44 px) */
.lp .lp-hero__logo, .lp .lp-textlink { display: none; }
.lp .lp-hero .lp-eyebrow { margin: 0; }
.lp .lp-hook { margin: 2px 0 0; font: 600 14px/1.3 var(--lp-f-ui); letter-spacing: .06em; color: var(--lp-gold-hi); }
.lp .lp-hero .lp-lead { margin-top: 6px; line-height: 1.55; }
.lp .lp-hero__cta { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 14px; }
.lp .lp-inapp {
display: none; max-width: 420px; margin: 16px auto 0; padding: 12px 14px; text-align: left; font-size: 14px; line-height: 1.55;
border: 1px solid rgba(230, 97, 89, .6); border-radius: 12px; background: rgba(230, 97, 89, .1);
}
html.is-inapp .lp .lp-inapp { display: block; }
.lp .lp-inapp p { margin: 0; }
.lp .lp-inapp strong { color: #ffb4ad; }
.lp .lp-inapp__android, .lp .lp-inapp__ios { display: none; margin-top: 10px; }
html.is-android .lp .lp-inapp__android { display: flex; }
html.is-ios .lp .lp-inapp__ios { display: block; }
.lp .lp-inapp__ios .lp-btn-ghost { width: 100%; }
.lp .lp-inapp__hint { margin-top: 6px !important; font-size: 13px; color: var(--lp-fg2); text-align: center; }
.lp .lp-inapp__url {
display: block; width: 100%; min-height: 44px; margin-top: 8px; padding: 8px 12px; border: 1px solid var(--lp-gold-line); border-radius: 10px;
background: rgba(0, 0, 0, .3); color: var(--lp-cream); font: 15px/1.4 var(--lp-f-sys);
}
.lp .lp-note { max-width: 460px; margin: 14px auto 0; font-size: 13px; line-height: 1.55; color: var(--lp-fg2); text-wrap: pretty; }
.lp .lp-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.lp .lp-chips li {
display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 12px; border: 1px solid var(--lp-gold-line);
border-radius: 999px; background: var(--lp-glass); font: 600 13px/1.3 var(--lp-f-ui);
}
.lp .lp-chips li > span[aria-hidden] { color: var(--lp-live); }
/* proof slot, right under the hero CTA: three static fact tiles, or one or two stat tiles once live numbers
arrive. Every height inside is fixed in px and the slot reserves the tallest state (tiles + time line), so
the swap never moves anything, with or without the web fonts. Phone tile: 2 + 10 + 36 + 18 + 14 = 80; slot 80 + 22. */
.lp .lp-proof { --lp-tile-num: clamp(30px, 8.8vw, 34px); --lp-tile-n: 36px; min-height: 102px; margin-top: 14px; align-content: start; font-size: 13px; line-height: 1.6; color: var(--lp-fg2); }
.lp .lp-tiles { display: flex; justify-content: center; gap: 8px; max-width: 400px; margin: 0 auto; }
.lp .lp-tile {
display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 1 calc(50% - 4px); min-width: 0;
min-height: calc(var(--lp-tile-n) + 44px); margin: 0; padding: 5px 10px; text-align: center; white-space: nowrap;
border: 1px solid var(--lp-gold-line); border-radius: 14px; background: var(--lp-glass);
}
.lp .lp-tiles--3 .lp-tile { flex-basis: calc((100% - 16px) / 3); }
.lp .lp-tile__n {
display: flex; align-items: center; gap: 8px; height: var(--lp-tile-n);
font: 600 var(--lp-tile-num)/var(--lp-tile-n) var(--lp-f-ui); color: var(--lp-gold); font-variant-numeric: tabular-nums;
}
.lp .lp-tile__n .lp-dot { width: 10px; height: 10px; }
.lp .lp-tile__n .lp-long { font-size: .76em; } /* landing.js: 7+ characters (with the online dot) would not fit a 320 px tile */
.lp .lp-tile__n .lp-long.lp-xl { font-size: .64em; } /* 9+ characters online, 10+ members */
/* the label box is two short lines tall in every language (a one-line label sits in its middle), so a tile's
height never depends on the language or the state */
.lp .lp-tile__l {
display: flex; align-items: center; justify-content: center; height: 32px; overflow: hidden;
font-size: 13px; line-height: 16px; color: var(--lp-cream); white-space: normal; text-wrap: balance;
}
.lp .lp-tiles__time { margin: 6px 0 0; font-size: 12px; line-height: 16px; text-align: center; color: var(--lp-fg2); }
.lp .lp-tiles--3 > .lp-tile-swap { flex: 0 1 calc((100% - 16px) / 3); min-width: 0; }
.lp .lp-tile-swap > .lp-tile { min-width: 0; }
.lp .lp-proof__line > p { height: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* one line in any font */
/* ── bands ────────────────────────────────────────────────────────────── */
.lp .lp-band { padding-block: 72px; }
.lp .lp-paperband { background: linear-gradient(180deg, var(--lp-paper-hi), var(--lp-paper) 50%, var(--lp-paper-2)); }
.lp .lp-caption { margin: 20px 0 0; text-align: center; font-size: 13px; color: var(--lp-fg2); }
.lp .lp-extras { max-width: 720px; margin: 28px auto 0; text-align: center; font-size: 15px; line-height: 1.6; color: var(--lp-fg); }
.lp .lp-extras--rows { display: grid; gap: 12px; padding: 0; list-style: none; text-align: left; }
.lp .lp-extras--rows li { padding: 12px 16px; border: 1px solid var(--lp-line); border-radius: 14px; background: rgba(255, 250, 240, .6); }
.lp .lp-extras--rows b { font: 600 16px/1.3 var(--lp-f-ui); color: var(--lp-ink); }
@media (min-width: 768px) { .lp .lp-extras--rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* how a match works */
.lp .lp-seats { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin: 28px 0 0; border-radius: 16px; box-shadow: 0 14px 34px rgba(48, 33, 23, .18); }
.lp .lp-steps { display: grid; gap: 28px; margin: 36px 0 0; padding: 0; list-style: none; }
.lp .lp-step { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: start; align-content: start; }
.lp .lp-phone { position: relative; padding: 5px; border-radius: 18px; background: #1b120c; box-shadow: 0 12px 26px rgba(48, 33, 23, .28); }
.lp .lp-phone img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 13px; background: #2a1d14; }
.lp .lp-phone::after { content: ""; position: absolute; inset: 5px; border-radius: 13px; box-shadow: inset 0 0 0 1px rgba(222, 191, 82, .75); pointer-events: none; }
.lp .lp-seal {
display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--lp-alert);
color: var(--lp-paper-hi); font: 600 24px/1 var(--lp-f-ui); transform: rotate(-4deg); box-shadow: inset 0 0 0 2px rgba(255, 250, 240, .35);
}
.lp .lp-step h3 { margin: 10px 0 0; font: 600 19px/1.3 var(--lp-f-ui); color: var(--lp-ink); }
.lp .lp-timer {
display: inline-block; min-height: 26px; margin: 8px 0 0; padding: 3px 10px 2px; border: 1px solid var(--lp-line);
border-radius: 999px; background: rgba(222, 191, 82, .14); font: 600 12px/1.3 var(--lp-f-ui); color: var(--lp-gold-ink);
}
.lp .lp-step p:not(.lp-timer) { margin: 8px 0 0; font-size: 15px; line-height: 1.6; }
.lp .lp-newbie { max-width: 720px; margin: 20px auto 0; padding: 16px 20px; border: 1px solid var(--lp-line); border-radius: 16px; background: rgba(222, 191, 82, .16); font-size: 15px; }
.lp .lp-newbie p { margin: 0; }
/* sects */
.lp .lp-facts8 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.lp .lp-facts8 li {
display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 72px; padding: 7px 2px 6px;
border: 1px solid var(--lp-gold-line); border-radius: 12px; background: var(--lp-glass); text-align: center; line-height: 1.25;
}
.lp .lp-facts8 b { font: 600 28px/1.05 var(--lp-f-ui); color: var(--lp-gold); font-variant-numeric: tabular-nums; }
.lp .lp-facts8 span { font-size: 13px; }
/* phones: 2 x 4 tiles with the number beside its word, so a long label ("Ausführungen", "Снаряжение",
"Equipamento") fits whole instead of splitting or touching the border of a 4-column tile */
@media (max-width: 480px) {
.lp .lp-facts8 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.lp .lp-facts8 li { flex-flow: row wrap; align-items: baseline; justify-content: center; column-gap: 8px; min-height: 0; padding: 8px 8px; }
.lp .lp-facts8 b { font-size: 24px; }
.lp .lp-facts8 span { overflow-wrap: anywhere; }
/* Russian labels take the counted form ("54 предмета снаряжения"): a long one wraps beside its number */
.lp:lang(ru) .lp-facts8 li { flex-wrap: nowrap; }
.lp:lang(ru) .lp-facts8 span { min-width: 0; overflow-wrap: normal; text-align: left; }
}
.lp .lp-sects {
display: grid; grid-auto-flow: column; grid-auto-columns: 148px; gap: 12px; margin: 32px calc(-1 * var(--lp-gutter)) 0;
padding: 6px var(--lp-gutter) 18px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain;
scroll-snap-type: x mandatory; scroll-padding-inline: var(--lp-gutter); scrollbar-width: thin; scrollbar-color: var(--lp-gold-line) transparent;
}
.lp .lp-sects:focus-visible { outline-offset: -3px; }
.lp .lp-sect {
display: flex; flex-direction: column; align-items: center; padding: 18px 12px 14px; scroll-snap-align: start; text-align: center;
border: 1px solid var(--lp-gold-line); border-bottom: 3px solid var(--tone); border-radius: 16px; background: var(--lp-glass);
}
.lp .lp-sect img { width: 64px; height: 64px; border-radius: 50%; object-fit: contain; box-shadow: 0 0 0 3px var(--tone); }
.lp .lp-sect h3 { margin: 14px 0 0; font: 600 16px/1.3 var(--lp-f-ui); color: var(--lp-cream); }
.lp .lp-sect p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
.lp .lp-sect .lp-sect__at { margin-top: auto; padding-top: 10px; font-size: 12px; color: var(--lp-mist); }
.lp .lp-sect--flame { --tone: #e0703d; } .lp .lp-sect--fist { --tone: #f1b779; } .lp .lp-sect--metal { --tone: #f4b838; }
.lp .lp-sect--taoist { --tone: #99d178; } .lp .lp-sect--wind { --tone: #73dbb8; } .lp .lp-sect--sword { --tone: #8fcced; }
.lp .lp-sect--frost { --tone: #5898cf; } .lp .lp-sect--jiangshi { --tone: #8d7ade; } .lp .lp-sect--demon { --tone: #cc6ede; }
.lp .lp-sect--assassin { --tone: #fb8a92; }
/* leaders */
/* two dark bands meet here: a shorter join, like FAQ -> final */
.lp .lp-sectsband + .lp-leaders { padding-top: 32px; }
@media (min-width: 768px) { .lp .lp-sectsband + .lp-leaders { padding-top: 48px; } }
@media (min-width: 1024px) { .lp .lp-band.lp-sectsband { padding-bottom: 80px; } } /* the leaders text is centred on the taller card fan, so it starts lower still */
.lp .lp-leaders {
background: radial-gradient(60% 40% at 50% 72%, rgba(35, 83, 58, .7), rgba(35, 83, 58, 0) 70%),
linear-gradient(180deg, var(--lp-jade), var(--lp-jade-2) 160px);
}
.lp .lp-summon { margin: 14px 0 0; font-size: 14px; color: var(--lp-gold-hi); }
.lp .lp-leaders__fig { margin: 36px 0 0; text-align: center; }
.lp .lp-fan {
--w: 120px; position: relative; width: min(328px, 100% - 58px); height: calc(var(--w) * 1137 / 640 + 28px);
margin: 0 auto; padding: 0; list-style: none;
}
.lp .lp-card {
position: absolute; bottom: 6px; left: calc(var(--i) * (100% - var(--w)) / 4); z-index: var(--z); width: var(--w);
border-radius: calc(var(--w) * .03); box-shadow: var(--lp-shadow-card);
transform: rotate(var(--r)) translateY(var(--lift, 0px)); transform-origin: 50% 100%;
}
.lp .lp-card img { display: block; width: 100%; aspect-ratio: 640 / 1137; object-fit: cover; border-radius: inherit; background: var(--lp-jade-3); }
.lp .lp-card:nth-child(1) { --i: 0; --r: -8deg; --z: 1; } .lp .lp-card:nth-child(2) { --i: 1; --r: -4deg; --z: 2; }
.lp .lp-card:nth-child(3) { --i: 2; --r: 0deg; --z: 3; } .lp .lp-card:nth-child(4) { --i: 3; --r: 4deg; --z: 4; }
.lp .lp-card:nth-child(5) { --i: 4; --r: 8deg; --z: 5; }
.lp .lp-card:hover, .lp .lp-card:focus-visible { --z: 9; }
.lp .lp-rarity { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 22px 0 0; padding: 0; list-style: none; }
.lp .lp-rarity li { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1.2 var(--lp-f-ui); letter-spacing: .06em; color: var(--lp-fg2); }
.lp .lp-rarity li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 0 2px rgba(0, 0, 0, .3); }
.lp .lp-r--r { --rc: #4c7acc; } .lp .lp-r--sr { --rc: #995cdb; } .lp .lp-r--ssr { --rc: #e6ad38; } .lp .lp-r--ur { --rc: #e6423d; } .lp .lp-r--le { --rc: #ffdb66; }
.lp .lp-leaders figcaption { margin: 14px 0 0; font-size: 14px; color: var(--lp-fg); }
/* ranked */
.lp .lp-ranked__ship { position: relative; container-type: inline-size; width: 70vw; max-width: 360px; margin: 28px auto 0; }
.lp .lp-ranked__ship img { display: block; width: 100%; }
.lp .lp-ship__screen {
position: absolute; left: 20%; top: 28.6%; width: 56%; height: 21.6%; margin: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none;
}
/* painted onto the board like the SEASON 1 plaque: display face, gold leaf fill, a dark-brown 1 px outline */
.lp .lp-ship__screen { opacity: .94; }
.lp .lp-ship__screen b {
font: 400 20px/1.15 var(--lp-f-display); font-size: 8.4cqw; letter-spacing: .05em; color: transparent;
background: linear-gradient(180deg, #fff4c2 0%, #f3dc7a 38%, #d7ae45 70%, #a8781f 100%); -webkit-background-clip: text; background-clip: text;
filter: drop-shadow(1px 0 0 #3b230c) drop-shadow(-1px 0 0 #3b230c) drop-shadow(0 1px 0 #3b230c) drop-shadow(0 -1px 0 #3b230c) drop-shadow(0 2px 2px rgba(0, 0, 0, .45));
}
.lp .lp-ship__screen span {
margin-top: .3em; font: 600 11px/1.2 var(--lp-f-ui); font-size: max(11px, 3.8cqw); letter-spacing: .04em; color: #f4e6bf;
text-shadow: 1px 0 0 #3b230c, -1px 0 0 #3b230c, 0 1px 0 #3b230c, 0 -1px 0 #3b230c;
}
.lp .lp-ladder { display: grid; gap: 6px; margin: 28px 0 0; padding: 0; list-style: none; }
.lp .lp-tier {
display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 12px;
border: 1px solid var(--lp-line); border-radius: 12px; background: rgba(255, 250, 240, .6);
}
.lp .lp-tier__n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--lp-gold-ink); color: var(--lp-paper-hi); font: 600 15px/1 var(--lp-f-ui); }
.lp .lp-tier__th { font: 600 17px/1.3 var(--lp-f-ui); color: var(--lp-ink); white-space: nowrap; }
.lp .lp-tier--8 { border-color: #c9a53a; background: linear-gradient(90deg, #ffdb66, #f3dc7a 45%, #debf52); box-shadow: 0 0 0 1px rgba(255, 219, 102, .6), 0 6px 22px rgba(255, 219, 102, .6); }
.lp .lp-tier--7 { border-color: rgba(201, 165, 58, .6); background: linear-gradient(90deg, #fbecb8, #f6e4a0 50%, #efd98a); }
.lp .lp-rpbox { margin: 28px 0 0; }
.lp .lp-rp__title { margin: 0 0 10px; font: 600 16px/1.3 var(--lp-f-ui); color: var(--lp-ink); }
.lp .lp-rp { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.lp .lp-rp li { display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: 8px; font-size: 11px; line-height: 1.3; text-align: center; }
.lp .lp-rp b { font: 600 18px/1.2 var(--lp-f-ui); font-variant-numeric: tabular-nums; }
.lp .lp-rp .is-win { background: rgba(107, 209, 122, .2); color: #1f6b2b; }
.lp .lp-rp .is-loss { background: rgba(230, 97, 89, .18); color: #8a2a22; }
.lp .lp-rp__note { margin: 10px 0 0; font-size: 14px; line-height: 1.55; }
.lp .lp-bullets { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.lp .lp-bullets li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.55; }
.lp .lp-bullets li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 8px; height: 8px; background: var(--lp-gold-ink); transform: rotate(45deg); }
/* faq */
.lp .lp-faqband { padding-bottom: 32px; }
.lp .lp-faq__wrap { max-width: calc(760px + 2 * var(--lp-gutter)); }
.lp .lp-faqs { display: grid; gap: 12px; margin-top: 32px; }
.lp .lp-faq {
border-radius: 16px; background: linear-gradient(180deg, var(--lp-paper-hi), var(--lp-paper) 60%, var(--lp-paper-2));
box-shadow: 0 0 0 1px rgba(222, 191, 82, .5), 0 10px 28px rgba(0, 0, 0, .35);
}
.lp .lp-faq summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; border-radius: 16px; cursor: pointer; list-style: none; }
.lp .lp-faq summary::-webkit-details-marker { display: none; }
.lp .lp-faq summary:focus-visible { outline-offset: -4px; }
.lp .lp-faq summary::after {
content: ""; flex: none; width: 10px; height: 10px; margin: -4px 4px 0 auto;
border-right: 2px solid var(--lp-gold-ink); border-bottom: 2px solid var(--lp-gold-ink); transform: rotate(45deg);
}
.lp .lp-faq[open] summary::after { transform: translateY(5px) rotate(225deg); }
@media (hover: hover) {
.lp .lp-faq:hover { box-shadow: 0 0 0 1px var(--lp-gold-ink), 0 10px 28px rgba(0, 0, 0, .35); }
.lp .lp-faq summary:hover { background: #fff3d6; }
.lp .lp-faq summary:hover::after { border-color: var(--lp-ink); }
}
.lp .lp-faq__q { font: 600 17px/1.4 var(--lp-f-ui); color: var(--lp-ink); }
.lp .lp-faq__a { padding: 0 16px 16px; font-size: 16px; line-height: 1.6; }
.lp .lp-faq__a p { margin: 0 0 8px; }
.lp .lp-faq__a p:last-child { margin-bottom: 0; }
/* final band */
/* the glow starts from plain jade at the top edge, so there is no seam under the FAQ band */
.lp .lp-final {
--lp-heroes-w: min(90vw, 560px); --lp-over: calc(var(--lp-heroes-w) * .18); /* the art's feet stand on the panel: 26 % of its height overlaps it */
padding: 56px 0 72px;
background: linear-gradient(180deg, var(--lp-jade), rgba(11, 22, 14, 0) 160px), radial-gradient(60% 45% at 50% 30%, rgba(35, 83, 58, .55), rgba(11, 22, 14, 0) 70%), var(--lp-jade);
}
/* two whole cut-out figures (heroes.webp, 560 x 395) with one soft ground shadow baked in: no mask needed */
.lp .lp-final__heroes { position: relative; z-index: 1; display: block; width: var(--lp-heroes-w); margin: 0 auto calc(-1 * var(--lp-over)); }
.lp .lp-panel {
position: relative; max-width: 640px; margin: 0 auto; padding: calc(var(--lp-over) + 28px) 20px 28px; text-align: center;
border: 2px solid var(--lp-gold); border-radius: 24px; background: linear-gradient(180deg, var(--lp-paper-hi), var(--lp-paper) 50%, var(--lp-paper-2));
box-shadow: var(--lp-shadow-paper);
}
.lp .lp-panel .lp-lead { margin-bottom: 16px; }
.lp .lp-panel .lp-btn-ghost { margin-top: 16px; }
.lp .lp-final-stats {
--lp-num: clamp(32px, 8vw, 48px);
min-height: max(104px, calc(var(--lp-num) * 1.1 + 66px)); margin: 0 0 20px; /* the row fills it, so the static layer keeps its size while the live one (+ time line) appears */
}
/* equal columns (at most 132 px), centred as a group: the numbers sit evenly spaced for 2, 3 or 4 stats */
.lp .lp-final-stats > .lp-live { display: flex; flex-direction: column; justify-content: center; }
.lp .lp-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 132px); justify-content: center; align-content: center; gap: 12px 16px; }
.lp .lp-stat { display: flex; flex-direction: column; align-items: center; min-width: 0; margin: 0; line-height: 1.3; container-type: inline-size; }
.lp .lp-stat > b { display: inline-flex; align-items: center; gap: 8px; font: 600 var(--lp-num)/1.1 var(--lp-f-ui); color: var(--lp-gold-ink); font-variant-numeric: tabular-nums; }
/* a live count wider than its column steps its size down to fit (landing.js sets --lp-w = its width in
em; 96 % leaves room for Kanit's wide zeros if it swaps in later); the line height stays, so nothing moves */
.lp .lp-stat > b[data-stat] { font-size: min(var(--lp-num), 96cqi / var(--lp-w, 1)); line-height: calc(var(--lp-num) * 1.1); }
.lp .lp-stat > span { font-size: 14px; color: var(--lp-ink); text-wrap: balance; }
.lp .lp-stat > span .lp-dot { margin-right: 4px; }
/* narrow panels: the four static facts sit 2 x 2 in every state, so the slot's height never changes */
@media (max-width: 600px) {
.lp .lp-stats { column-gap: 8px; }
.lp .lp-final-stats > .lp-static { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
}
.lp .lp-stat__time { margin: 8px 0 0; font-size: 12px; line-height: 1.3; color: var(--lp-ink-2); }
.lp .lp-stat__facts { display: none; }
@media (max-width: 600px) {
.lp .lp-stat__facts { display: block; margin: 12px 0 0; font-size: 13px; line-height: 1.4; color: var(--lp-ink); }
}
.lp .lp-signin { margin: 20px 0 0; font-size: 14px; line-height: 1.6; }
.lp .lp-langs { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: var(--lp-ink-2); text-wrap: balance; }
.lp :is(.lp-summon, .lp-leaders__fig figcaption, .lp-signin, .lp-faq__q, .lp-faq__a p, .lp-sect p, .lp-extras li, .lp-leaders__extras,
.lp-rp__note, .lp-bullets li, .lp-step p, .lp-newbie p, .lp-note) { text-wrap: pretty; }
/* sticky bar and toast */
.lp .lp-sticky {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 12px;
min-height: calc(64px + env(safe-area-inset-bottom));
padding: 8px max(16px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
background: rgba(11, 22, 14, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--lp-gold-line);
visibility: hidden; transform: translateY(110%);
}
.lp .lp-sticky.is-on { visibility: visible; transform: none; }
.lp .lp-sticky .lp-slot { flex: 1; min-width: 0; align-items: center; font-size: 13px; line-height: 1.35; color: var(--lp-fg2); }
.lp .lp-sticky b { font: 600 17px/1 var(--lp-f-ui); color: var(--lp-gold); font-variant-numeric: tabular-nums; }
.lp .lp-sticky .lp-dot { margin-right: 4px; } /* clears the 3 px reduced-motion ring */
/* live line: online, then members */
.lp .lp-sticky .lp-live { display: flex; align-items: center; }
.lp .lp-live__o, .lp .lp-live__c { display: inline-flex; flex-direction: column; white-space: nowrap; }
.lp .lp-live__m { display: inline-flex; align-items: baseline; }
.lp .lp-live__sep { padding: 0 4px; }
/* online + members need 195 px beside the Play button: below 390 px the bar keeps online only */
@media (max-width: 389px) {
html[data-live="online"] .lp .lp-sticky [data-k="members"] { display: none; }
}
.lp .lp-toast {
position: fixed; left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); bottom: calc(88px + env(safe-area-inset-bottom));
z-index: 50; width: fit-content; margin: 0 auto;
padding: 10px 18px; border: 1px solid var(--lp-gold-line); border-radius: 999px; background: var(--lp-jade-3); color: var(--lp-cream);
font: 600 14px/1.3 var(--lp-f-ui); text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
opacity: 0; visibility: hidden; pointer-events: none;
}
.lp .lp-toast.is-on { opacity: 1; visibility: visible; }
/* first-visit language offer (landing.js suggest()), written in the visitor's language. Out of the flow (it never
moves the page). It never sits on the art's figures: the phone/tablet band is all faces, so below 1024 px the
offer docks IN the header bar, beside the seal logo, in place of the brand name and the count (hidden while it
shows; the hero repeats the name): on phones only the action ("Read in English ›") and ×, the sentence is its
accessible name; from 600 px the sentence too, up to the menu button. It rides with the bar until it is used
or dismissed; the open menu covers it. From 1024 px: a card
with the sentence at the hero's bottom right, over the ink soldiers and clouds, right of the text column; it
scrolls away with the hero. Hidden while the language list is open. */
.lp .lp-suggest {
--lp-sug-l: calc(max(12px, env(safe-area-inset-left)) + 44px); /* after the 36 px seal */
position: fixed; top: calc(env(safe-area-inset-top, 0px) + (var(--lp-bar-h) - 44px) / 2); z-index: 35;
left: var(--lp-sug-l); right: auto; width: max-content;
max-width: calc(100% - var(--lp-sug-l) - var(--lp-sug-r, 72px)); /* --lp-sug-r (landing.js): 8 px left of the menu button */
display: flex; align-items: center; justify-content: space-between; gap: 0; padding: 0;
border: 1px solid var(--lp-gold-line); border-radius: 12px;
background: rgba(16, 38, 26, .97); box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
color: var(--lp-cream); font: 14px/1.4 var(--lp-f-sys); white-space: normal;
}
@media (max-width: 359px) {
.lp .lp-suggest { --lp-sug-l: calc(max(10px, env(safe-area-inset-left)) + 38px); }
.lp .lp-suggest__go { padding: 0 10px 0 12px; } /* "Читать на русском ›" + × in the 210 px left of the menu button */
.lp .lp-suggest__x { width: 40px; }
}
@media (max-width: 1023px) {
html.lp-sug .lp :is(.lp-brand__name, .lp-head__slot, .lp-head__end > .lp-cta--sm) { visibility: hidden; }
}
body:has(.lp-lang[open]) .lp-suggest, .lp .lp-head:is(.is-menu, :has(> .lp-head__in .lp-menu[open])) ~ .lp-suggest { visibility: hidden; }
.lp .lp-suggest__t { display: none; margin: 0; text-wrap: balance; }
.lp .lp-suggest__go {
display: inline-flex; align-items: center; gap: 6px; min-height: 42px; min-width: 0; padding: 0 14px 0 16px; border-radius: 11px 0 0 11px; background: var(--lp-gold);
color: var(--lp-ink); font: 600 14px/1.2 var(--lp-f-ui); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp .lp-suggest__go::after { content: ""; flex: none; width: 6px; height: 6px; margin-left: 2px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.lp .lp-suggest__go:hover { background: var(--lp-gold-hi); }
.lp .lp-suggest__x {
flex: none; width: 44px; height: 42px; padding: 0; border: 0; border-radius: 0 11px 11px 0;
background: transparent; color: var(--lp-cream); font: 400 22px/1 var(--lp-f-sys); cursor: pointer;
}
.lp .lp-suggest__x:hover { background: rgba(222, 191, 82, .12); color: var(--lp-gold); }
.lp .lp-suggest__x:focus-visible { outline-offset: -3px; }
@media (min-width: 600px) and (max-width: 1023px) {
.lp .lp-suggest { right: var(--lp-sug-r, 72px); width: auto; max-width: none; gap: 10px; padding-left: 14px; }
.lp .lp-suggest__t { display: block; flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.25; }
.lp .lp-suggest__go { flex: none; min-height: 40px; border-radius: 9px; }
.lp .lp-suggest__x { margin-left: -6px; }
}
@media (min-width: 1024px) {
/* the hero's bottom edge is its min-height (landing.css hero), the card's bottom sits 24 px above it */
.lp .lp-suggest {
position: absolute; left: auto; right: var(--lp-edge); z-index: 25; translate: 0 -100%;
top: calc(max(620px, min(100vh, 75vw)) - 24px); top: calc(max(620px, min(100svh, 75vw)) - 24px);
justify-content: flex-start; max-width: 460px; gap: 8px 12px; padding: 6px 50px 6px 14px; border-radius: 14px; font-size: 14px;
background: rgba(16, 38, 26, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}
.lp .lp-suggest::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--lp-gold); }
.lp .lp-suggest__t { display: block; flex: 0 1 auto; min-width: 0; }
.lp .lp-suggest__go { flex: none; min-height: 44px; padding: 0 14px; border-radius: 10px; overflow: visible; }
.lp .lp-suggest__go::after { display: none; }
.lp .lp-suggest__x { position: absolute; top: 50%; right: 4px; width: 44px; height: 44px; margin-top: -22px; border-radius: 10px; }
}
/* words that must not break inside: CJK language names in running text, and each footer link (site.css stays as it is) */
.lp :is(span, a):is([lang="zh"], [lang="ja"], [lang="ko"]) { white-space: nowrap; }
.lp footer nav a { display: inline-block; }
.lp .lp-foot-langs ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 14px 0 0; padding: 0; list-style: none; }
.lp .lp-foot-langs a { margin: 0; font-size: 13px; color: rgba(246, 241, 224, .7); }
.lp .lp-foot-langs a[aria-current] { color: var(--lp-gold); }
@media (max-width: 399px) { .lp .lp-foot-langs ul { max-width: 250px; margin-inline: auto; } } /* rows of 4 / 3 / 3, no lone "Français" */
@media (max-width: 1023px) {
.lp footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
/* phones: the four match steps are a swipe row of cards, like the sects row */
@media (max-width: 480px) {
.lp .lp-steps {
grid-auto-flow: column; grid-auto-columns: min(300px, 84%); gap: 12px; margin: 28px calc(-1 * var(--lp-gutter)) 0;
padding: 4px var(--lp-gutter) 14px; overflow-x: auto; overscroll-behavior-x: contain;
scroll-snap-type: x mandatory; scroll-padding-inline: var(--lp-gutter); scrollbar-width: thin; scrollbar-color: var(--lp-line) transparent;
}
.lp .lp-steps:focus-visible { outline-offset: -3px; }
.lp .lp-step {
grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: start; gap: 0 12px; padding: 14px; scroll-snap-align: start;
border: 1px solid var(--lp-line); border-radius: 16px; background: rgba(255, 250, 240, .7);
}
.lp .lp-step__body { display: contents; }
.lp .lp-phone { grid-row: 1 / span 3; }
.lp .lp-seal, .lp .lp-step h3, .lp .lp-timer { grid-column: 2; justify-self: start; align-self: start; }
.lp .lp-step p:not(.lp-timer) { grid-column: 1 / -1; }
.lp .lp-step p:not(.lp-timer) { margin-top: 12px; }
}
/* ── tablet ───────────────────────────────────────────────────────────── */
@media (min-width: 481px) {
.lp .lp-hero { --lp-art-p: .3; --lp-art-h: min(calc(var(--lp-bar) + clamp(200px, 40vh, 380px)), var(--lp-w, 100vw) * 1280 / 1536); }
@supports (height: 1svh) { .lp .lp-hero { --lp-art-h: min(calc(var(--lp-bar) + clamp(200px, 40svh, 380px)), var(--lp-w, 100vw) * 1280 / 1536); } }
.lp .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
.lp .lp-step { grid-template-columns: minmax(0, 1fr); }
.lp .lp-phone { width: 168px; margin: 0; }
.lp .lp-fan { --w: 160px; width: min(480px, 100% - 80px); }
}
@media (min-width: 481px) and (max-width: 1023px) {
.lp .lp-wrap { max-width: calc(640px + 2 * var(--lp-gutter)); }
/* the row runs to the screen edges; its first card lines up with the 640 px column */
.lp .lp-sects { --lp-bleed: max(var(--lp-gutter), 50vw - 320px); margin-inline: calc(-1 * var(--lp-bleed)); padding-inline: var(--lp-bleed); scroll-padding-inline: var(--lp-bleed); }
.lp .lp-steps { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.lp .lp-step { grid-template-columns: 148px minmax(0, 1fr); gap: 24px; }
.lp .lp-phone { width: auto; }
.lp .lp-step h3 { margin-top: 8px; }
/* Ranked: the ladder, RP table and bullets sit under a centred heading and ship; at full width a tier's Thai
and English names end up 350 px apart */
.lp .lp-ranked .lp-ladder, .lp .lp-ranked .lp-rpbox, .lp .lp-ranked .lp-bullets { max-width: 520px; margin-inline: auto; }
}
@media (min-width: 768px) { .lp { --lp-gutter: 24px; } }
/* tablets: the 1080 px file of the painting under the text (the 720 px one drawn 1.1-1.4x read as a focus seam) */
@media (min-width: 600px) and (max-width: 1023px) { .lp .lp-hero { --lp-hero-bg: url("/assets/lp/hero-m-bg-1080.webp"); } }
/* ── desktop ──────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
.lp .lp-eyebrow { font-size: 15px; }
.lp .lp-lead { font-size: 17px; }
.lp .lp-band { padding-block: 112px; }
/* the bar grows to 64 px; header and hero text share one left edge, wider than the page's 1120 px column so
the text stays left of the fighters (the art puts them in the right 60 %) */
.lp { --lp-bar-h: 64px; --lp-edge: max(40px, 50vw - 780px); --lp-col: clamp(400px, 34vw, 560px); --lp-slot-w: 150px; }
.lp .lp-head__in { gap: 16px; padding-inline: max(var(--lp-edge), env(safe-area-inset-left)) max(var(--lp-edge), env(safe-area-inset-right)); }
.lp .lp-brand { gap: 10px; }
.lp .lp-brand img { width: 40px; height: 40px; }
.lp .lp-menu__panel { right: max(var(--lp-edge), env(safe-area-inset-right)); }
.lp .lp-head__end > .lp-lang { display: block; position: relative; }
/* the slot keeps the live pill's width (nothing moves when counts land): the chip fills it, as tall as the buttons */
.lp .lp-head__note { justify-self: stretch; justify-content: center; min-height: 40px; border-radius: 12px; }
/* hero: the art covers the whole section edge to edge, from the top of the page (under the bar), and the
section fills the first screen: max(620px, min(100vh, 75vw)) - 75vw keeps a tall 1024 px screen from
cropping the fighters away. The text column sits on the left over a jade wash that lets the misty
mountains show through. */
.lp .lp-hero {
--lp-tx: calc(var(--lp-edge) + var(--lp-col)); /* the text column's right edge */
display: flex; align-items: center; min-height: max(620px, min(100vh, 75vw)); min-height: max(620px, min(100svh, 75vw));
padding: calc(var(--lp-bar) + 20px) 0 56px;
}
.lp .lp-art { position: absolute; inset: 0; z-index: -1; width: auto; height: auto; }
.lp .lp-art img { object-position: 100% 40%; } /* hero-d (1536 x 1024): the four fighters fill x 40-95 %; 40 % keeps the flame crown under the bar clear */
/* wide and short (1920 x 937, 2560 x 950, 3440 x 1440): the art is cropped hard top and bottom, and at 40 % the
demon's horns went under the bar — take the cut from the ink soldiers at the foot instead */
@media (min-width: 1280px) and (min-aspect-ratio: 19/10) { .lp .lp-art img { object-position: 100% 24%; } }
/* the wash: a light jade veil from the left edge (the misty mountains stay visible on a wide screen) and a
soft oval behind the text column itself, so only the copy sits on a dense scrim */
.lp .lp-art::after {
background:
linear-gradient(180deg, rgba(11, 22, 14, .3) 0, rgba(11, 22, 14, 0) calc(var(--lp-bar) + 110px)),
linear-gradient(0deg, var(--lp-jade) 0, rgba(11, 22, 14, .6) 7%, rgba(11, 22, 14, 0) 24%),
radial-gradient(calc(var(--lp-col) * .72 + 60px) 58% at calc(var(--lp-edge) + var(--lp-col) * .45) 52%,
rgba(11, 22, 14, .62), rgba(11, 22, 14, .5) 45%, rgba(11, 22, 14, 0)),
linear-gradient(90deg, rgba(11, 22, 14, .56) 0, rgba(11, 22, 14, .52) calc(var(--lp-tx) - 80px), rgba(11, 22, 14, .26) calc(var(--lp-tx) + 60px),
rgba(11, 22, 14, 0) calc(var(--lp-tx) + 200px));
}
.lp .lp-hero__grid { display: block; max-width: none; width: 100%; margin: 0; padding: 0 0 0 max(var(--lp-edge), env(safe-area-inset-left)); }
.lp .lp-hero__text { width: var(--lp-col); max-width: none; margin: 0; text-align: left; text-shadow: 0 1px 12px rgba(11, 22, 14, .55); }
.lp .lp-hero .lp-h1 { font-size: clamp(36px, 3.2vw, 52px); }
.lp .lp-hero__logo { display: block; width: 144px; height: 144px; margin: 0 0 6px -8px; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .5)); }
/* short screens (1280 x 720, 1366 x 768): a smaller seal keeps the Play button and the tiles above the fold */
@media (max-height: 860px) { .lp .lp-hero__logo { width: 104px; height: 104px; margin-bottom: 2px; } }
@media (max-height: 700px) { .lp .lp-hero__logo { width: 80px; height: 80px; } }
.lp .lp-hero .lp-lead { margin-top: 8px; }
.lp .lp-hero__cta { flex-flow: row wrap; gap: 8px 16px; margin-top: 20px; }
.lp #cta-hero { width: auto; min-width: 280px; min-height: 56px; }
/* 1024-1279: the art is drawn taller than the screen is wide, so the fighters come further left. The seal
goes (the bar carries the logo): a shorter hero draws the art smaller. The image box is 48 px wider than the
section and clipped at the right (the art's right 5 % is empty mist), so the art always covers the left edge.
The same light veil as on wider screens (the misty mountains show), with a denser oval behind the copy. */
@media (max-width: 1279px) {
.lp { --lp-col: 380px; }
.lp .lp-tiles { max-width: 380px; }
.lp .lp-hero__logo { display: none; }
/* the box runs 140 px past the right edge (the art's right 5 % is empty mist), so the fighters start right of
the text column (the green-haired girl ~x 520, the swordsman's face ~x 545 at 1024 x 768) */
.lp .lp-art img { width: calc(100% + 140px); object-position: 100% 40%; }
.lp .lp-art::after {
background:
linear-gradient(180deg, rgba(11, 22, 14, .3) 0, rgba(11, 22, 14, 0) calc(var(--lp-bar) + 110px)),
linear-gradient(0deg, var(--lp-jade) 0, rgba(11, 22, 14, .6) 7%, rgba(11, 22, 14, 0) 24%),
radial-gradient(calc(var(--lp-col) * .7 + 70px) 60% at calc(var(--lp-edge) + var(--lp-col) * .45) 52%,
rgba(11, 22, 14, .68), rgba(11, 22, 14, .55) 45%, rgba(11, 22, 14, 0)),
linear-gradient(90deg, rgba(11, 22, 14, .62) 0, rgba(11, 22, 14, .56) calc(var(--lp-tx) - 40px), rgba(11, 22, 14, .3) calc(var(--lp-tx) + 50px),
rgba(11, 22, 14, .1) calc(var(--lp-tx) + 140px), rgba(11, 22, 14, 0) calc(var(--lp-tx) + 200px));
}
}
/* up to 1439 px (a 400-490 px column) the Play button and the text link share one row */
@media (max-width: 1439px) {
.lp #cta-hero { min-width: 250px; }
.lp .lp-hero__cta { column-gap: 14px; }
}
/* 1024-1279 (a 400-435 px column): the text link always sits under the button, so the row has the same shape in
every language and does not change when the web fonts land */
@media (max-width: 1279px) { .lp .lp-hero__cta { flex-direction: column; align-items: flex-start; row-gap: 2px; } }
/* wide, tall screens: the copy grows with the art (the fighters are drawn 1.25-1.7x there) */
@media (min-width: 1800px) and (min-height: 900px) {
.lp .lp-hero .lp-h1 { font-size: clamp(52px, 2.9vw, 66px); }
.lp .lp-hero .lp-eyebrow { font-size: 16px; }
.lp .lp-hero .lp-lead { font-size: 19px; }
.lp .lp-hero__logo { width: 168px; height: 168px; }
.lp #cta-hero { min-width: 320px; min-height: 64px; }
.lp #cta-hero .lp-cta__th { font-size: 23px; }
}
/* 2200 px and up (2560 x 1440): the copy column grows and moves in from the edge; the text column still ends
left of the fighters (they start at ~40 % of the art) */
@media (min-width: 2200px) and (min-height: 900px) {
.lp { --lp-edge: max(40px, 50vw - 900px); --lp-col: 620px; --lp-bar-h: 72px; }
.lp .lp-brand { font-size: 16px; }
.lp .lp-brand img { width: 44px; height: 44px; }
.lp .lp-cta--sm, .lp .lp-lang__btn, .lp .lp-head__note, .lp .lp-pill { min-height: 44px; }
.lp .lp-hero .lp-h1 { font-size: clamp(66px, 3vw, 80px); }
.lp .lp-hero .lp-eyebrow { font-size: 18px; }
.lp .lp-hero .lp-lead { font-size: 21px; }
.lp .lp-hero__logo { width: 192px; height: 192px; }
.lp .lp-tiles { max-width: 500px; }
}
.lp .lp-textlink {
display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 2px 0;
color: var(--lp-cream); font: 600 15px/1.25 var(--lp-f-ui); text-decoration: none; white-space: nowrap;
}
.lp .lp-textlink:hover { color: var(--lp-gold); }
.lp .lp-inapp, .lp .lp-note { margin-left: 0; }
.lp .lp-chips { justify-content: flex-start; }
.lp .lp-hero .lp-chips li { font-size: 12px; padding: 2px 10px; }
/* desktop tile: 2 + 16 + 42 + 18 + 14 = 92; slot 92 + 22 */
.lp .lp-proof { --lp-tile-num: 38px; --lp-tile-n: 42px; min-height: 114px; margin-top: 18px; }
.lp .lp-tiles { justify-content: flex-start; max-width: 440px; margin: 0; }
.lp .lp-tile { align-items: flex-start; min-height: 92px; padding: 8px 14px; text-align: left; }
.lp .lp-tile__l { justify-content: flex-start; }
.lp .lp-tiles__time { text-align: left; }
.lp .lp-how__top { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
.lp .lp-how__top .lp-intro, .lp .lp-leaders__text, .lp .lp-ranked .lp-intro { margin: 0; text-align: left; }
.lp .lp-how__top h2::after, .lp .lp-ranked h2::after { margin-left: 0; }
.lp .lp-seats { margin: 0; }
.lp .lp-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 64px; }
.lp .lp-phone { width: 200px; margin: 0; }
.lp .lp-facts8 { grid-template-columns: repeat(8, minmax(0, 1fr)); margin-top: 40px; }
.lp .lp-sects { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-columns: auto; gap: 16px; margin: 40px 0 0; padding: 0; overflow: visible; scroll-padding-inline: 0; }
.lp .lp-sect img { width: 72px; height: 72px; }
.lp .lp-leaders { background: radial-gradient(38% 55% at 70% 52%, rgba(35, 83, 58, .7), rgba(35, 83, 58, 0) 70%), linear-gradient(180deg, var(--lp-jade), var(--lp-jade-2) 200px); }
.lp .lp-leaders__grid { display: grid; grid-template-columns: 5fr 7fr; column-gap: 64px; align-items: center; }
.lp .lp-leaders__text { grid-column: 1; grid-row: 1; }
.lp .lp-leaders__extras { grid-column: 1; grid-row: 2; align-self: start; margin: 24px 0 0; text-align: left; }
.lp .lp-leaders__fig { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
/* the outer cards turn 10° about their bottom centre and reach 60 px past their slot: keep them in the column */
.lp .lp-fan { --w: 200px; width: min(600px, 100% - 128px); }
.lp .lp-card:nth-child(1) { --r: -10deg; } .lp .lp-card:nth-child(2) { --r: -5deg; }
.lp .lp-card:nth-child(4) { --r: 5deg; } .lp .lp-card:nth-child(5) { --r: 10deg; }
/* ship beside the intro, RP grid and bullets under the ship, ladder beside them: both columns end together */
.lp .lp-ranked__grid {
display: grid; grid-template-columns: 440px minmax(0, 1fr); grid-template-areas: "ship intro" "rp ladder" "bul ladder";
column-gap: 64px; row-gap: 28px; align-items: start;
}
.lp .lp-ranked__grid > .lp-intro { grid-area: intro; align-self: end; } /* the ladder follows the intro text; the (taller) ship sets the row */
.lp .lp-ranked__ship { grid-area: ship; align-self: center; width: 440px; max-width: none; margin: 0; } /* stays position: relative for the TOP 100 screen */
.lp .lp-ranked__grid > .lp-ladder { grid-area: ladder; margin: 0; }
.lp .lp-ranked__grid > .lp-rpbox { grid-area: rp; margin: 0; }
.lp .lp-ranked__grid > .lp-bullets { grid-area: bul; margin: 0; }
.lp .lp-rp { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp .lp-sticky { display: none; }
.lp .lp-faqband { padding-bottom: 48px; }
.lp .lp-final { padding: 72px 0 112px; }
.lp .lp-panel { padding: calc(var(--lp-over) + 24px) 48px 36px; }
}
/* from 1280 px: the inline menu, the language switcher, the live count and Play; no menu button */
@media (min-width: 1280px) {
.lp .lp-menu { display: none; }
.lp .lp-brand { margin-right: 0; }
.lp .lp-nav {
display: flex; flex: 1 1 auto; justify-content: center; align-items: center; gap: 2px; min-width: 0;
overflow-x: auto; scrollbar-width: none; /* a guard only: every language fits at 1280 px */
}
.lp .lp-nav::-webkit-scrollbar { display: none; }
.lp .lp-nav a {
flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 10px;
color: var(--lp-cream); font: 600 15px/1.2 var(--lp-f-ui); text-decoration: none; white-space: nowrap;
}
.lp .lp-nav a:hover { color: var(--lp-gold); background: rgba(222, 191, 82, .08); }
.lp .lp-nav a:focus-visible { outline-offset: -3px; }
.lp .lp-nav .lp-nav__legal { font-size: 14px; color: var(--lp-fg2); }
.lp .lp-nav a:not(.lp-nav__legal) + .lp-nav__legal { position: relative; margin-left: 9px; }
.lp .lp-nav a:not(.lp-nav__legal) + .lp-nav__legal::before { content: ""; position: absolute; left: -6px; top: 12px; bottom: 12px; width: 1px; background: var(--lp-gold-line); }
.lp .lp-head__end { gap: 10px; }
}
/* 1280-1439: all eight links stay (the menu is the same at every width); smaller type and tighter legal links keep
ru, the longest, 23 px clear of the brand and of the language button at 1280 px */
@media (min-width: 1280px) and (max-width: 1439px) {
.lp .lp-head__in { gap: 12px; }
.lp .lp-nav a { padding: 0 6px; font-size: 14px; }
.lp .lp-nav .lp-nav__legal { padding: 0 4px; font-size: 13px; }
}
/* 2560-class screens: the bar's menu grows with the bar (72 px) and the hero copy */
@media (min-width: 2200px) and (min-height: 900px) {
.lp .lp-nav a { padding: 0 12px; font-size: 16px; }
.lp .lp-nav .lp-nav__legal { font-size: 15px; }
}
/* touch screens: 44 px targets in the header too (iPad landscape and touch laptops get the desktop bar) */
@media (pointer: coarse) {
.lp .lp-nav a, .lp .lp-lang__btn, .lp .lp-cta--sm { min-height: 44px; }
.lp .lp-lang__list a { min-height: 44px; }
}
/* ── motion: only when the visitor has not asked for less ─────────────── */
@media (prefers-reduced-motion: no-preference) {
html:has(> body.lp) { scroll-behavior: smooth; }
html.js.lp-io .lp .lp-reveal.is-in { transition: opacity .4s var(--lp-ease), transform .4s var(--lp-ease); }
html.js.lp-io .lp .lp-reveal:not(.is-in) { opacity: 0; transform: translateY(12px); }
.lp .lp-slot > * { transition: opacity .25s, visibility .25s; }
.lp .lp-sticky { transition: transform .2s var(--lp-ease), visibility .2s; }
.lp .lp-toast { transition: opacity .2s, visibility .2s; }
.lp .lp-faq summary::after { transition: transform .2s var(--lp-ease); }
.lp .lp-cta { transition: transform .15s var(--lp-ease), box-shadow .15s var(--lp-ease), filter .15s; }
.lp .lp-head__note, .lp .lp-pill { transition: opacity .25s, visibility .25s; }
.lp .lp-head::after { transition: opacity .2s, visibility .2s; }
.lp .lp-menu[open] > .lp-menu__panel, .lp .lp-lang[open] > .lp-lang__list { animation: lp-drop .18s var(--lp-ease); }
.lp .lp-suggest { animation: lp-drop .3s var(--lp-ease) .15s both; }
.lp .lp-caret { transition: transform .15s var(--lp-ease); }
html[data-live="online"] .lp .lp-dot::after { animation: lp-ping 2s ease-out infinite; } /* only online dots mean anything, and only once shown */
.lp .lp-sticky:not(.is-on) .lp-dot::after { animation: none; } /* nor while the sticky bar is off screen */
.lp #cta-hero, .lp #cta-final { isolation: isolate; } /* the sheen (z-index -1) runs over the gold, under the label */
.lp #cta-hero::after, .lp #cta-final::after {
content: ""; position: absolute; top: 0; bottom: 0; left: 0; z-index: -1; width: 40%; pointer-events: none;
background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
transform: translateX(-150%) skewX(-20deg); animation: lp-sheen 6s ease-in-out 1s infinite;
}
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
.lp .lp-hero__logo { animation: lp-float 6s ease-in-out infinite; }
.lp .lp-art img { animation: lp-zoom 24s ease-in-out infinite alternate; } /* desktop only: below 1024 the band is lined up with the painting under it */
.lp .lp-card { transition: transform .15s var(--lp-ease); }
.lp .lp-card:hover, .lp .lp-card:focus-visible { --lift: -12px; }
}
@media (prefers-reduced-motion: reduce) {
.lp .lp-dot { box-shadow: 0 0 0 3px rgba(107, 209, 122, .3); }
.lp .lp-cta:hover, .lp .lp-cta:active { transform: none; }
}
@keyframes lp-drop { from { opacity: 0; transform: translateY(-8px); } }
@keyframes lp-zoom { from { transform: scale(1); } to { transform: scale(1.035); } }
@keyframes lp-ping { from { transform: scale(1); opacity: .55; } to { transform: scale(2.4); opacity: 0; } }
@keyframes lp-sheen { 0% { transform: translateX(-150%) skewX(-20deg); } 20%, 100% { transform: translateX(350%) skewX(-20deg); } }
@keyframes lp-float { 0%, 100% { transform: translateY(8px); } 50% { transform: translateY(-8px); } }
/* the drawer from 1024 px: the header shows the language list itself, so the drawer keeps to sections, legal and Play */
@media (min-width: 1024px) { .lp .lp-menu__h, .lp .lp-menu__langs { display: none; } }
/* 1280-1439 px: Privacy and Terms stay in the bar; Data deletion waits in the drawer and the footer, so the longer
languages (ru, fr, es) keep the nav on one line */
@media (min-width: 1280px) and (max-width: 1439px) { .lp .lp-nav__legal[href="/data-deletion"] { display: none; } }