/* Catacomb Crawlers — site styles
   Layout concept: the site reads like the game's own terminal. Hairline-framed screens sit over a
   near-black void, cream fill marks whatever is selected, champagne gold marks what matters. */
:root {
  --void: #07080b;
  --deep: #0c0e13;
  --raise: #13161c;
  --panel: rgba(15, 18, 24, .8);
  --scrim: rgba(7, 8, 11, .72);
  --line: rgba(236, 229, 211, .12);
  --line-2: rgba(236, 229, 211, .3);
  --ink: #ece6d6;
  --ink-2: #b4ae9f;
  --ink-3: #85817a;
  --gold: #d7bc83;
  --gold-2: #f1dcaa;
  --gold-3: #8a6c3c;
  --cream: #efe8d8;
  --on-cream: #14161b;
  --live: #8fd18a;
  --hue: var(--gold);
  --font-display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --font-ui: "Rajdhani", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "Barlow", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cut: 12px;
  /* Content width: 1280px up to a 1920px window, then it grows with the window (1600 at 2560,
     2040 at 3440) so wide and ultrawide monitors aren't a narrow strip with empty sides. */
  --wrap: clamp(1280px, calc(50vw + 320px), 2240px);
  --hud-h: 72px;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hud-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font: 400 1.0625rem/1.7 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
figure { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: .01em; text-wrap: balance; color: var(--ink); }
button { font: inherit; color: inherit; }
::selection { background: var(--gold); color: var(--on-cream); }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.ic { width: 1em; height: 1em; flex: none; fill: currentColor; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--cream); color: var(--on-cream); font: 700 .85rem var(--font-ui); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 96px);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 760px) {
  .wrap { padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: max(40px, env(safe-area-inset-right, 0px)); }
}
@media (min-width: 1200px) {
  .wrap { padding-left: max(48px, env(safe-area-inset-left, 0px)); padding-right: max(48px, env(safe-area-inset-right, 0px)); }
}

.band { position: relative; padding-block: clamp(80px, 11vw, 150px); }
.band--deep { background: var(--deep); }
.band--dots {
  background-image: radial-gradient(rgba(236, 229, 211, .055) 1px, transparent 1.3px);
  background-size: 24px 24px;
}
.band + .band:not(.band--deep)::before {
  content: ""; position: absolute; top: 0; left: 50%; width: min(calc(var(--wrap) - 180px), 86vw); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}

/* ---------- Type ---------- */
.t-xl { font-size: clamp(2.5rem, 5.4vw, 4.6rem); }
.t-l { font-size: clamp(2.05rem, 3.9vw, 3.3rem); }
.t-m { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.t-s { font-size: 1.25rem; }
.label {
  font: 600 .78rem/1.25 var(--font-ui);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.lede { font-size: 1.15rem; line-height: 1.7; color: var(--ink-2); max-width: 60ch; }
.copy { display: grid; gap: 1.1em; color: var(--ink-2); max-width: 62ch; }
.gold { color: var(--gold); }
.num { font-family: var(--font-ui); font-variant-numeric: tabular-nums; }

/* Section header: glyph, screen name, hairline to the edge, meta */
.shead { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; min-width: 0; }
.shead .label { color: var(--gold); white-space: nowrap; }
.shead__rule { flex: 1; min-width: 24px; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent 90%); }
.shead__meta { color: var(--ink-3); white-space: nowrap; }
.glyph { position: relative; width: 14px; height: 14px; flex: none; }
.glyph::before, .glyph::after { content: ""; position: absolute; transform: rotate(45deg); }
.glyph::before { inset: 2px; border: 1px solid currentColor; }
.glyph::after { inset: 5px; background: currentColor; }
.shead .glyph { color: var(--gold); }
@media (max-width: 560px) {
  .shead { flex-wrap: wrap; row-gap: 6px; }
  .shead .label { white-space: normal; }
  .shead__meta { flex-basis: 100%; padding-left: 28px; }
}
.section-intro { display: grid; gap: 22px; margin-bottom: clamp(36px, 5vw, 60px); }
.section-intro--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: 22px 64px; }
@media (max-width: 900px) { .section-intro--split { grid-template-columns: 1fr; } }

/* Diamond rule, like the in-game dividers */
.drule { position: relative; height: 12px; display: flex; align-items: center; gap: 10px; color: var(--gold-3); }
.drule::before, .drule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-2)); }
.drule::after { background: linear-gradient(90deg, var(--line-2), transparent); }
.drule span { width: 8px; height: 8px; border: 1px solid var(--gold); transform: rotate(45deg); }

/* ---------- Frames ---------- */
.ticks { position: relative; }
.ticks::after {
  --t: var(--tick, var(--line-2)); --l: 14px;
  content: ""; position: absolute; inset: -1px; pointer-events: none; z-index: 2;
  background:
    linear-gradient(var(--t) 0 0) top left / var(--l) 1px no-repeat,
    linear-gradient(var(--t) 0 0) top left / 1px var(--l) no-repeat,
    linear-gradient(var(--t) 0 0) top right / var(--l) 1px no-repeat,
    linear-gradient(var(--t) 0 0) top right / 1px var(--l) no-repeat,
    linear-gradient(var(--t) 0 0) bottom left / var(--l) 1px no-repeat,
    linear-gradient(var(--t) 0 0) bottom left / 1px var(--l) no-repeat,
    linear-gradient(var(--t) 0 0) bottom right / var(--l) 1px no-repeat,
    linear-gradient(var(--t) 0 0) bottom right / 1px var(--l) no-repeat;
}
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
}
.cut {
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

/* ---------- Buttons ---------- */
.btn {
  --cut: 10px; --bg: var(--void); --fg: var(--ink); --bd: var(--line-2); --in: 1px;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  min-height: 50px; padding: 0 1.5em;
  font: 700 .84rem/1 var(--font-ui); letter-spacing: .17em; text-transform: uppercase; white-space: nowrap;
  color: var(--fg); text-decoration: none; background: var(--bd); border: 0; cursor: pointer;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: color .2s;
}
.btn::before {
  content: ""; position: absolute; inset: var(--in); z-index: -1; background: var(--bg);
  clip-path: polygon(calc(var(--cut) - .6px) 0, 100% 0, 100% calc(100% - var(--cut) + .6px), calc(100% - var(--cut) + .6px) 100%, 0 100%, 0 calc(var(--cut) - .6px));
  transition: background .2s;
}
.btn .ic { width: 1.15em; height: 1.15em; }
.btn:hover { --bd: var(--gold); --bg: #17161a; }
.btn:focus-visible { outline: none; --bd: var(--gold-2); --in: 3px; }
.btn--cream { --bg: var(--cream); --fg: var(--on-cream); --bd: var(--cream); }
.btn--cream:hover { --bg: #fffaee; --bd: #fffaee; }
.btn--cream:focus-visible { --bd: var(--gold); }
.btn--sm { min-height: 40px; padding: 0 1.1em; font-size: .78rem; --cut: 8px; }
.btn__dia { width: 7px; height: 7px; transform: rotate(45deg); background: currentColor; flex: none; }

/* Store buttons */
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store {
  --cut: 12px; --bg: rgba(10, 11, 15, .82); --fg: var(--ink); --bd: var(--line-2); --in: 1px;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 22px 0 18px;
  color: var(--fg); text-decoration: none; background: var(--bd);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: color .2s;
}
.store::before {
  content: ""; position: absolute; inset: var(--in); z-index: -1; background: var(--bg);
  clip-path: polygon(calc(var(--cut) - .6px) 0, 100% 0, 100% calc(100% - var(--cut) + .6px), calc(100% - var(--cut) + .6px) 100%, 0 100%, 0 calc(var(--cut) - .6px));
  transition: background .2s;
}
.store .ic { width: 26px; height: 26px; }
.store__text { display: grid; line-height: 1.1; }
.store__small { font: 600 .68rem/1.2 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; opacity: .78; }
.store__big { font: 700 1.2rem/1.1 var(--font-ui); letter-spacing: .04em; }
.store:hover { --bg: var(--cream); --bd: var(--cream); --fg: var(--on-cream); }
.store:focus-visible { outline: none; --bd: var(--gold-2); --in: 3px; }

@media (max-width: 420px) {
  .store { padding: 0 14px 0 12px; gap: 9px; min-height: 54px; }
  .store .ic { width: 22px; height: 22px; }
  .store__big { font-size: 1.05rem; }
  .store__small { font-size: .6rem; letter-spacing: .1em; }
}

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 4px;
  font: 600 .72rem/1.2 var(--font-ui); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2); border: 1px solid var(--line-2); background: rgba(7, 8, 11, .55);
}
.chip--live { color: var(--live); border-color: rgba(143, 209, 138, .45); }
.chip--live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.chip--plan::before { content: ""; width: 7px; height: 7px; border: 1px solid currentColor; transform: rotate(45deg); }
.chip--hue { color: var(--hue); border-color: color-mix(in srgb, var(--hue) 45%, transparent); }
/* "Upcoming" (a champion not in the game yet): gold, with the pulsing diamond of the marketplace's "Coming soon" */
.chip--soon { color: var(--gold-2); border-color: rgba(215, 188, 131, .55); background: linear-gradient(90deg, rgba(215, 188, 131, .16), rgba(7, 8, 11, .55) 70%); }
.chip--soon::before { content: ""; width: 7px; height: 7px; flex: none; background: currentColor; transform: rotate(45deg); box-shadow: 0 0 8px var(--gold); animation: blink 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .chip--soon::before { animation: none; } }

kbd {
  display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 6px;
  font: 700 .72rem/1 var(--font-ui); color: var(--ink); border: 1px solid var(--line-2); border-radius: 4px;
  background: rgba(236, 229, 211, .06);
}

/* ---------- HUD (site header) ---------- */
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 61; background: var(--void);
}
.hud {
  position: fixed; inset: 0 0 auto; z-index: 60;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background .35s, border-color .35s, backdrop-filter .35s;
  border-bottom: 1px solid transparent;
  background: linear-gradient(180deg, rgba(7, 8, 11, .82), rgba(7, 8, 11, 0));
}
.hud.is-solid {
  background: rgba(9, 10, 14, .86);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.hud__inner { height: var(--hud-h); display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.brand__mark { width: 34px; height: 37px; color: var(--gold); fill: currentColor; flex: none; transition: color .2s, transform .3s; }
.brand:hover .brand__mark { color: var(--gold-2); transform: rotate(-6deg); }
/* Logo picture: on hover a sheen crosses the metal, then a golden glint blooms on the upper edge */
.brand__logo { position: relative; flex: none; display: block; width: 39px; height: 46px; }
.brand__mark--img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .55)); transition: filter .5s ease; }
.brand:hover .brand__mark--img, .brand:focus-visible .brand__mark--img { transform: none; filter: brightness(1.08) drop-shadow(0 0 10px rgba(241, 220, 170, .32)) drop-shadow(0 3px 8px rgba(0, 0, 0, .55)); }
.brand__logo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 246, 222, .95) 50%, transparent 58%) 140% 0 / 300% 100% no-repeat;
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
}
.brand__flare { position: absolute; left: 74%; top: 17%; width: 0; height: 0; z-index: 2; pointer-events: none; }
.brand__flare::before, .brand__flare::after { content: ""; position: absolute; left: 0; top: 0; opacity: 0; mix-blend-mode: screen; transform: translate(-50%, -50%) scale(0); }
.brand__flare::before {
  width: 30px; height: 30px;
  background:
    radial-gradient(circle, #fffdf6 0, rgba(255, 238, 196, .9) 9%, rgba(241, 214, 150, .35) 26%, transparent 58%),
    linear-gradient(90deg, transparent, rgba(255, 242, 208, .95) 50%, transparent) center / 100% 1.5px no-repeat,
    linear-gradient(0deg, transparent, rgba(255, 242, 208, .95) 50%, transparent) center / 1.5px 100% no-repeat;
}
.brand__flare::after {
  width: 120px; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(241, 214, 150, .5) 32%, rgba(255, 248, 228, .95) 50%, rgba(241, 214, 150, .5) 68%, transparent);
}
.brand:hover .brand__logo::before, .brand:focus-visible .brand__logo::before { animation: logo-sheen .85s cubic-bezier(.3, .6, .3, 1) both; }
.brand:hover .brand__flare::before, .brand:focus-visible .brand__flare::before { animation: logo-glint 1.1s cubic-bezier(.2, .9, .3, 1) .2s both; }
.brand:hover .brand__flare::after, .brand:focus-visible .brand__flare::after { animation: logo-streak 1.1s cubic-bezier(.2, .9, .3, 1) .2s both; }
@keyframes logo-sheen { from { opacity: 1; background-position: 140% 0; } to { opacity: 1; background-position: -40% 0; } }
@keyframes logo-glint {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-35deg); }
  35% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(0deg); }
  100% { opacity: .8; transform: translate(-50%, -50%) scale(.85) rotate(12deg); }
}
@keyframes logo-streak {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(.1); }
  35% { opacity: .85; transform: translate(-50%, -50%) scaleX(1); }
  100% { opacity: .3; transform: translate(-50%, -50%) scaleX(.7); }
}
@media (prefers-reduced-motion: reduce) {
  .brand:hover .brand__logo::before, .brand:hover .brand__flare::before, .brand:hover .brand__flare::after { animation: none; }
}
.brand__text { display: grid; line-height: 1; min-width: 0; }
.brand__name { font: 700 1.02rem/1 var(--font-ui); letter-spacing: .24em; text-transform: uppercase; white-space: nowrap; }
.brand__sub { margin-top: 5px; font: 600 .62rem/1 var(--font-ui); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a {
  position: relative; padding: 10px 14px; text-decoration: none;
  font: 600 .86rem/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2);
  transition: color .2s;
}
.nav a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::before {
  content: ""; position: absolute; left: 2px; top: 50%; width: 5px; height: 5px; margin-top: -3px; background: var(--gold); transform: rotate(45deg);
}
.hud__cta { flex: none; }
.menu-btn {
  display: none; margin-left: auto; width: 48px; height: 48px; padding: 0; border: 1px solid var(--line-2); background: rgba(7, 8, 11, .5);
  cursor: pointer; place-items: center;
}
.menu-btn span { display: block; width: 20px; height: 1.5px; background: var(--ink); position: relative; }
.menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; width: 20px; height: 1.5px; background: var(--ink); }
.menu-btn span::before { top: -6px; }
.menu-btn span::after { top: 6px; width: 12px; }
@media (max-width: 1080px) {
  .nav, .hud__cta { display: none; }
  .menu-btn { display: grid; }
  :root { --hud-h: 64px; }
}
@media (max-width: 420px) { .brand__sub { display: none; } .brand__name { letter-spacing: .18em; font-size: .92rem; } }

/* ---------- Language picker (top bar) ----------
   A small chamfered button with the current language; the list opens under it. site.js opens and closes it
   and remembers the choice. On the first visit to an English page the country check hides the page for a
   moment (html.lang-wait) in case it moves the visitor to their language. */
html.lang-wait body { visibility: hidden; }
.lang { position: relative; flex: none; }
.lang__btn {
  --cut: 7px; --bd: var(--line-2); --bg: rgba(7, 8, 11, .55);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 12px 0 10px; border: 0; cursor: pointer; color: var(--ink-2); background: var(--bd);
  font: 700 .78rem/1 var(--font-ui); letter-spacing: .16em;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: color .2s;
}
.lang__btn::before {
  content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--bg);
  clip-path: polygon(calc(var(--cut) - .6px) 0, 100% 0, 100% calc(100% - var(--cut) + .6px), calc(100% - var(--cut) + .6px) 100%, 0 100%, 0 calc(var(--cut) - .6px));
  transition: background .2s;
}
.lang__btn .ic { width: 17px; height: 17px; color: var(--gold); }
.lang__btn:hover, .lang.is-open .lang__btn { --bd: var(--gold); --bg: #17161a; color: var(--ink); }
.lang__btn:focus-visible { outline: none; --bd: var(--gold-2); }
.lang__list {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 70; min-width: 230px; padding: 8px;
  display: grid; gap: 2px;
  background: rgba(9, 10, 14, .97); border: 1px solid var(--line-2); box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.lang__list[hidden] { display: none; }
.lang__list::before { content: ""; position: absolute; top: -1px; left: 12px; right: 12px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.lang__list a {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; text-decoration: none; color: var(--ink-2);
  font: 500 .96rem/1.1 var(--font-body); letter-spacing: 0; transition: background .15s, color .15s;
}
.lang__list a:hover, .lang__list a:focus-visible { outline: none; background: rgba(215, 188, 131, .08); color: var(--ink); }
.lang__list a[aria-current] { color: var(--ink); background: rgba(215, 188, 131, .11); }
.lang__list a[aria-current]::after { content: ""; margin-left: auto; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); flex: none; }
.lang__code { width: 26px; flex: none; font: 700 .72rem/1 var(--font-ui); letter-spacing: .14em; color: var(--gold); }
@media (max-width: 1080px) {
  .lang { margin-left: auto; }
  .lang ~ .menu-btn { margin-left: -14px; }
}
/* Wider screens whose bar is still too full for the menu (site.js measures it; depends on the language) */
.hud.is-compact :is(.nav, .hud__cta) { display: none; }
.hud.is-compact .menu-btn { display: grid; }
.hud.is-compact .lang { margin-left: auto; }
.hud.is-compact .lang ~ .menu-btn { margin-left: -14px; }
@media (max-width: 420px) {
  .lang__btn { padding: 0 9px 0 8px; gap: 5px; }
}

/* ---------- Soundtrack player (under the top bar, right side) ----------
   The OST loops on every page; visitors can mute it (the note) or set the volume. The equalizer follows the music
   (site.js reads it through the Web Audio API) or, where that isn't possible, sways on its own. The speaker at the
   end mutes the sound effects on their own; without music the bar holds only that. */
html:has(.ost) { scroll-padding-top: calc(var(--hud-h) + 58px); }
.ost { position: fixed; left: 0; right: 0; top: calc(var(--hud-h) + env(safe-area-inset-top, 0px)); z-index: 59; pointer-events: none; }
.ost__wrap { display: flex; justify-content: flex-end; }
.ost__panel {
  --cut: 10px;
  position: relative; pointer-events: auto; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px 0 18px;
  background: rgba(9, 10, 14, .74); border: 1px solid var(--line); border-top-color: transparent;
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  transition: background .35s;
}
.ost__panel::before { content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 1px; background: var(--gold); }
.hud.is-solid + .ost .ost__panel { background: rgba(9, 10, 14, .88); }
.ost__eq { display: flex; align-items: flex-end; gap: 2px; height: 16px; flex: none; }
.ost__eq i {
  display: block; width: 3px; height: 100%; background: linear-gradient(0deg, var(--gold-3), var(--gold) 55%, var(--gold-2));
  transform-origin: 50% 100%; transform: scaleY(.12); opacity: .5; transition: transform .45s ease, opacity .45s;
}
.ost.is-playing .ost__eq i { opacity: 1; }
.ost.is-live.is-playing .ost__eq i { transition: transform .07s linear, opacity .45s; }
/* Without access to the sound (another origin, an old browser) the bars sway on their own */
.ost.is-playing:not(.is-live) .ost__eq i { animation: ost-sway .95s ease-in-out infinite alternate; }
.ost.is-playing:not(.is-live) .ost__eq i:nth-child(3n) { animation-duration: .7s; animation-delay: -.3s; }
.ost.is-playing:not(.is-live) .ost__eq i:nth-child(3n+1) { animation-duration: 1.15s; animation-delay: -.8s; }
.ost.is-playing:not(.is-live) .ost__eq i:nth-child(4n+2) { animation-duration: .82s; animation-delay: -.5s; }
@keyframes ost-sway { 0% { transform: scaleY(.18); } 45% { transform: scaleY(.9); } 100% { transform: scaleY(.38); } }
.ost__meta { display: flex; align-items: baseline; gap: 10px; padding-right: 14px; border-right: 1px solid var(--line); white-space: nowrap; min-width: 0; }
.ost__label { font: 700 .64rem/1 var(--font-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.ost__title { font: 600 .74rem/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); max-width: 230px; overflow: hidden; text-overflow: ellipsis; transition: color .3s; }
.ost.is-muted .ost__title { color: var(--ink-3); }
.ost__mute { display: grid; place-items: center; width: 30px; height: 30px; margin-right: -4px; padding: 0; border: 0; background: none; color: var(--ink-2); cursor: pointer; transition: color .2s; }
.ost__mute:hover { color: var(--ink); }
.ost__mute .ic { width: 18px; height: 18px; }
.ost__off, .ost.is-muted .ost__on { display: none; }
.ost.is-muted .ost__off { display: block; }
.ost.is-muted .ost__mute { color: var(--ink-3); }
/* Waiting for the visitor's first click (browsers don't allow sound before it): the music's button glows */
.ost.is-waiting .ost__mute { color: var(--gold-2); animation: ost-call 1.8s ease-in-out infinite; }
@keyframes ost-call { 50% { opacity: .4; } }
.ost__vol { --v: 35%; -webkit-appearance: none; appearance: none; width: 92px; height: 24px; margin: 0; padding: 0; background: transparent; cursor: pointer; transition: opacity .3s; }
.ost__vol::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--gold) var(--v), var(--line-2) var(--v)); }
.ost__vol::-moz-range-track { height: 2px; background: var(--line-2); }
.ost__vol::-moz-range-progress { height: 2px; background: var(--gold); }
.ost__vol::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 10px; height: 10px; margin-top: -4px; border: 0; border-radius: 0; background: var(--cream); transform: rotate(45deg); box-shadow: 0 0 0 3px rgba(9, 10, 14, .9); }
.ost__vol::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 0; background: var(--cream); transform: rotate(45deg); box-shadow: 0 0 0 3px rgba(9, 10, 14, .9); }
.ost__vol:hover::-webkit-slider-thumb { background: #fffaee; }
.ost__vol:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.ost.is-muted .ost__vol { opacity: .45; }
.ost__pct { width: 3ch; font: 700 .74rem/1 var(--font-ui); letter-spacing: .04em; color: var(--ink-2); text-align: right; }
.ost__sep { width: 1px; height: 18px; flex: none; background: var(--line); }
.ost__sfx { display: grid; place-items: center; width: 30px; height: 30px; margin: 0 -4px; padding: 0; border: 0; background: none; color: var(--ink-2); cursor: pointer; transition: color .2s; }
.ost__sfx:hover { color: var(--ink); }
.ost__sfx .ic { width: 18px; height: 18px; }
.ost__sfx-off, .ost.is-sfx-off .ost__sfx-on { display: none; }
.ost.is-sfx-off .ost__sfx-off { display: block; }
.ost.is-sfx-off .ost__sfx { color: var(--ink-3); }
.ost--sfx .ost__panel { padding: 0 8px 0 12px; }
@media (max-width: 640px) {
  .ost__meta { display: none; }
  .ost__panel { gap: 10px; height: 38px; padding: 0 10px 0 14px; }
  .ost__vol { width: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .ost.is-playing .ost__eq i { animation: none; transform: scaleY(.45); }
  .ost.is-playing .ost__eq i:nth-child(3n+1) { transform: scaleY(.75); }
  .ost.is-waiting .ost__mute { animation: none; }
}
@media print { .ost { display: none; } }

/* ---------- Scroll ruler (right edge, computers) ----------
   site.js builds it: a strip of ticks as long as the page (one every 1%, a longer one and a number every 5%, a
   diamond where each named part starts) sliding past the gold marker with the percentage; the parts' names fly,
   letter by letter, between the list at the bottom right, standing beside the ruler and the stack at the top
   right. Blurred corners keep the names readable over the page. */
.ruler { display: none; }
@media (min-width: 1200px) {
  .ruler.is-on { display: block; position: fixed; inset: 0; z-index: 58; pointer-events: none; }
}
.ruler__bar {
  position: absolute; top: 0; bottom: 0; right: 0; width: 52px; overflow: hidden; pointer-events: auto; cursor: crosshair; touch-action: none;
  background: linear-gradient(270deg, rgba(7, 8, 11, .7), rgba(7, 8, 11, .45) 60%, rgba(7, 8, 11, 0));
}
.ruler__strip {
  --step: 100px; --major: 500px;
  position: absolute; left: 0; right: 0; top: 0; will-change: transform;
  background:
    repeating-linear-gradient(180deg, rgba(236, 228, 210, .55) 0 1px, transparent 1px var(--major)) right top / 16px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(236, 228, 210, .22) 0 1px, transparent 1px var(--step)) right top / 8px 100% no-repeat;
}
.ruler__num { position: absolute; right: 21px; transform: translateY(-50%); font: 600 10px/1 var(--font-ui); letter-spacing: .06em; color: var(--ink-3); }
.ruler__mark { position: absolute; left: 7px; width: 5px; height: 5px; margin-top: -2.5px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 6px rgba(215, 188, 131, .6); }
.ruler__hover { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink-2); opacity: 0; transition: opacity .2s; }
.ruler__bar.is-hover .ruler__hover { opacity: .55; }
.ruler__now { position: absolute; left: 0; right: 0; top: 0; height: 0; will-change: transform; }
.ruler__now::before { content: ""; position: absolute; left: 0; right: 0; top: -.5px; height: 1px; background: var(--gold); box-shadow: 0 0 8px var(--gold), 0 0 2px var(--gold); }
.ruler__pct { position: absolute; right: 3px; top: 5px; display: flex; font: 700 10px/1 var(--font-ui); letter-spacing: .04em; color: var(--gold-2); }
.ruler__pct i { font-style: normal; margin-left: 1px; }
.ruler__dig { display: block; height: 1em; overflow: hidden; }
.ruler__col { display: block; transition: transform .35s cubic-bezier(.3, .7, .2, 1); }
.ruler__col b { display: block; height: 1em; font-weight: inherit; text-align: center; }
.ruler__names { position: absolute; inset: 0; }
.ruler__name { position: absolute; left: 0; top: 0; color: var(--ink-3); text-decoration: none; font: 700 24px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; white-space: pre; transition: color .45s; }
.ruler__name span { position: absolute; left: 0; top: 0; display: block; pointer-events: auto; cursor: pointer; will-change: transform; text-shadow: 0 0 8px rgba(7, 8, 11, .9), 0 0 2px rgba(7, 8, 11, .9); }
.ruler__name.is-ride { color: var(--ink-2); }
.ruler__name.is-now { color: var(--gold); }
.ruler__name:hover { color: var(--ink); }
.ruler__name.is-now:hover { color: var(--gold-2); }
.ruler.is-measuring .ruler__name { position: relative; display: inline-block; }
.ruler.is-measuring .ruler__name span { position: static; display: inline-block; }
.ruler__glass {
  position: absolute; right: 0; width: 360px; height: 0; opacity: 0; transition: opacity .4s;
  background: rgba(7, 8, 11, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ruler__glass--top { top: 0; -webkit-mask-image: radial-gradient(100% 100% at 100% 0%, #000 40%, rgba(0, 0, 0, .5) 70%, transparent 98%); mask-image: radial-gradient(100% 100% at 100% 0%, #000 40%, rgba(0, 0, 0, .5) 70%, transparent 98%); }
.ruler__glass--bottom { bottom: 0; -webkit-mask-image: radial-gradient(100% 100% at 100% 100%, #000 40%, rgba(0, 0, 0, .5) 70%, transparent 98%); mask-image: radial-gradient(100% 100% at 100% 100%, #000 40%, rgba(0, 0, 0, .5) 70%, transparent 98%); }
@media (prefers-reduced-motion: reduce) {
  .ruler__col, .ruler__name, .ruler__glass { transition: none; }
}
@media print { .ruler { display: none !important; } }

/* While the music plays, the site's pages open in place so it never stops (site.js, "Page changes"). If the next
   page takes a moment, a thin light runs along the bottom of the top bar. The new page's content takes the focus. */
html.is-loading { cursor: progress; }
html.is-loading .hud::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--gold-2), transparent) no-repeat;
  background-size: 34% 100%; opacity: 0;
  animation: page-load 1.1s .25s linear infinite;
}
@keyframes page-load { from { opacity: 1; background-position: -45% 0; } to { opacity: 1; background-position: 145% 0; } }
@media (prefers-reduced-motion: reduce) { html.is-loading .hud::after { animation: none; opacity: .8; background-position: 50% 0; } }
#main:focus { outline: none; }

/* Mobile menu */
.drawer {
  position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column;
  background: var(--void);
  background-image: radial-gradient(rgba(236, 229, 211, .06) 1px, transparent 1.3px);
  background-size: 22px 22px;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow-y: auto;
}
.drawer__top { height: var(--hud-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.drawer__close { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line-2); background: transparent; cursor: pointer; }
.drawer__close .ic { width: 20px; height: 20px; }
.drawer__nav { display: grid; padding-block: 28px; }
.drawer__nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0;
  border-bottom: 1px solid var(--line); text-decoration: none;
  font: 600 1.7rem/1.1 var(--font-display); color: var(--ink);
}
.drawer__nav a span { font: 600 .72rem/1 var(--font-ui); letter-spacing: .22em; color: var(--ink-3); text-transform: uppercase; }
.drawer__nav a[aria-current="page"] { color: var(--gold); }
.drawer__foot { display: grid; gap: 24px; padding-bottom: 32px; }
.drawer-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: clip; background: var(--void); }
.hero__media {
  position: absolute; inset: 0 0 0 20%; z-index: -2;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
  mask-image: linear-gradient(90deg, transparent 0, #000 30%);
}
.hero__media video, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 38% 22%; }
.hero__veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 8, 11, .55) 0, transparent 22%, transparent 62%, var(--void) 100%),
    linear-gradient(90deg, var(--void) 0, rgba(7, 8, 11, .7) 32%, rgba(7, 8, 11, 0) 62%),
    radial-gradient(rgba(236, 229, 211, .07) 1px, transparent 1.3px) 0 0 / 4px 4px;
}
.hero__inner { position: relative; display: grid; align-content: end; gap: 56px; padding-top: calc(var(--hud-h) + clamp(72px, 12vh, 140px)); padding-bottom: 36px; min-height: min(92vh, 900px); }
.hero__content { display: grid; gap: 26px; max-width: 600px; }
.hero__eyebrow { display: flex; align-items: center; gap: 12px; color: var(--gold); }
.hero__eyebrow .label { color: var(--gold); }
.hero__logo { width: min(440px, 82vw); height: auto; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .6)); }
.hero__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.65rem, 3vw, 2.55rem); line-height: 1.15; letter-spacing: .01em; }
.hero__title em { font-style: normal; color: var(--gold-2); }
.hero__text { color: var(--ink-2); font-size: 1.12rem; max-width: 50ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero__stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 760px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.stat { display: grid; gap: 6px; padding: 18px 20px 16px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat__v { font: 700 1.75rem/1 var(--font-ui); letter-spacing: .02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat__v small { font-size: .62em; color: var(--gold); margin-left: 4px; }
.stat .label { order: 2; font-size: .7rem; letter-spacing: .18em; color: var(--ink-3); }
.hero__stats, .stat dd { margin: 0; }
/* A star suffix (★) is drawn: a faint outline with a gold star over it that fills from the bottom (--fill). */
.stat__star { position: relative; display: inline-block; width: .72em; height: .72em; margin-left: .18em; vertical-align: -.03em; --fill: 100%; }
.stat__star > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.stat__star-base { fill: rgba(215, 188, 131, .1); stroke: rgba(215, 188, 131, .45); stroke-width: 1.1; stroke-linejoin: round; }
.stat__star-fill { fill: var(--gold); -webkit-clip-path: inset(calc(100% - var(--fill)) 0 0 0); clip-path: inset(calc(100% - var(--fill)) 0 0 0); }
/* Numbers count up and words decode as they come into view (site.js). The final text, hidden, keeps the
   width steady while the live text changes on top of it. */
.stat__num { position: relative; display: inline-block; white-space: nowrap; }
.stat__ghost { visibility: hidden; }
.stat__live { position: absolute; left: 0; top: 0; }
.is-flow .stat__ghost { display: none; }
.is-flow .stat__live { position: static; }
.hero__scroll { position: absolute; right: 0; bottom: 40px; display: flex; align-items: center; gap: 12px; color: var(--ink-3); }
.hero__scroll span { width: 1px; height: 54px; background: linear-gradient(var(--gold), transparent); animation: drip 2.4s ease-in-out infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* Load sequence: content is visible at rest; animation only adds an entrance */
.rise { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms + 150ms); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .hero__media { inset: 0 0 auto 0; height: min(118vw, 640px); -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
  .hero__media video, .hero__media img { object-position: 40% 20%; }
  .hero__veil { background: linear-gradient(180deg, rgba(7, 8, 11, .5) 0, transparent 26%, transparent 45%, var(--void) 88%); }
  .hero__inner { padding-top: min(78vw, 440px); min-height: 0; gap: 40px; }
  .hero__stats { grid-template-columns: 1fr 1fr 1fr; }
  .stat { padding: 14px 10px 12px; }
  .stat__v { font-size: 1.3rem; }
  .stat .label { font-size: .62rem; letter-spacing: .12em; }
  .hero__scroll { display: none; }
}

/* ---------- World ---------- */
.world { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.world__text { display: grid; gap: 28px; }
.readout { display: grid; margin: 8px 0 0; border-top: 1px solid var(--line); }
.readout div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.readout dt { font: 600 .74rem/1.6 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.readout dd { margin: 0; color: var(--ink); font-size: 1rem; }
.inspect {
  position: relative; aspect-ratio: 4 / 5; max-width: 520px; width: 100%; justify-self: center;
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse 46% 9% at 50% 88%, color-mix(in srgb, var(--glow, #4fe3d6) 22%, transparent), transparent 70%),
    radial-gradient(ellipse 70% 60% at 50% 45%, color-mix(in srgb, var(--glow, #4fe3d6) 7%, transparent), transparent 70%),
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 48px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 48px 100%,
    var(--deep);
  --tick: var(--gold);
}
.inspect img { position: absolute; left: 50%; bottom: 9%; width: 84%; transform: translateX(-50%); filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .65)); }
.inspect__hud { position: absolute; inset: 16px 18px auto; display: flex; justify-content: space-between; gap: 12px; }
/* Animated model: feet on the ring, soft fade where the cape reaches the frame */
.inspect__anim { position: absolute; inset: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.inspect__anim .spine { inset: auto; left: 50%; bottom: 6.5%; width: 110%; aspect-ratio: 1697 / 1558; transform: translateX(-40%); }
.inspect .spine__still { left: 0; bottom: 0; width: 100%; height: 100%; transform: none; }
.inspect__hud .label { font-size: .68rem; color: var(--ink-3); }
.inspect__cap { position: absolute; left: 18px; right: 18px; bottom: 14px; display: flex; justify-content: space-between; gap: 12px; }
.inspect__cap .label { font-size: .68rem; }
.inspect__ring { position: absolute; left: 50%; bottom: 7%; width: 62%; aspect-ratio: 4 / 1; transform: translateX(-50%); border: 1px solid color-mix(in srgb, var(--glow, #4fe3d6) 35%, transparent); border-radius: 50%; }
.inspect__ring::after { content: ""; position: absolute; inset: 18%; border: 1px dashed color-mix(in srgb, var(--glow, #4fe3d6) 30%, transparent); border-radius: 50%; animation: spin 24s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .world { grid-template-columns: 1fr; } .readout div { grid-template-columns: 120px minmax(0, 1fr); } }

/* ---------- Champions (resonator screen) ---------- */
.champs { position: relative; isolation: isolate; overflow: clip; background: var(--void); padding-top: clamp(96px, 9vw, 128px); }
.champs::before {
  content: ""; position: absolute; right: -12%; top: 18%; width: 62%; height: 72%; z-index: -3; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--hue) 15%, transparent), transparent);
  transition: background .6s;
}
.champs__stage {
  position: absolute; top: clamp(110px, 11vw, 170px); bottom: 0; left: 0; width: 70%; z-index: -3;
  -webkit-mask-image: linear-gradient(90deg, #000 66%, transparent 100%), linear-gradient(180deg, transparent 0, #000 20%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, #000 66%, transparent 100%), linear-gradient(180deg, transparent 0, #000 20%);
  mask-composite: intersect;
}
.champs__stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04); transition: opacity .8s ease, transform 1.6s cubic-bezier(.2, .7, .2, 1);
}
.champs__stage img.is-active { opacity: 1; transform: none; }
.champs__veil {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(180deg, var(--void) 0, rgba(7, 8, 11, .25) 20%, rgba(7, 8, 11, 0) 58%, var(--void) 100%),
    linear-gradient(90deg, rgba(7, 8, 11, .8) 0, rgba(7, 8, 11, 0) 24%);
}
.champs__ghost {
  position: absolute; left: -.03em; bottom: -.2em; z-index: -1; pointer-events: none; white-space: nowrap;
  font: 700 clamp(7rem, 18vw, 16rem)/1 var(--font-display); letter-spacing: .02em;
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--hue) 35%, transparent);
  opacity: .5;
}
.champs__head { position: relative; }
.champs__body { position: relative; }
.champs__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(320px, 430px); gap: 32px; align-items: center; min-height: clamp(540px, 66vh, 720px); padding-block: 28px 36px; }
.roster-col { --rb: 82px; --rg: 14px; display: grid; gap: 14px; align-self: center; }
/* The roster shows five champions; with more, it scrolls without a scrollbar: the mouse wheel, dragging with
   the mouse, or the arrows above and below it (one champion per click), snapping to each icon. A fade at the
   top or bottom shows there's more that way. site.js sets the classes and runs the arrows and dragging. */
.roster {
  position: relative; display: grid; gap: var(--rg); max-height: calc(var(--rb) * 5 + var(--rg) * 4);
  overflow-x: hidden; overflow-y: auto; padding-right: 14px; scroll-snap-type: y mandatory;
  scrollbar-width: none; -webkit-user-select: none; user-select: none;
}
.roster::-webkit-scrollbar { display: none; }
.roster > .roster__btn { scroll-snap-align: start; }
.roster-col.has-scroll .roster { cursor: grab; }
.roster.is-dragging, .roster.is-dragging .roster__btn { cursor: grabbing; }
.roster__btn img { pointer-events: none; -webkit-user-drag: none; }
.roster-arrow {
  display: none; place-items: center; width: var(--rb); height: 22px; margin-block: -4px; padding: 0; border: 0; cursor: pointer; color: var(--gold);
  background: linear-gradient(90deg, transparent 0, rgba(215, 188, 131, .34) 18%, rgba(215, 188, 131, .34) 31%, transparent 34%, transparent 66%, rgba(215, 188, 131, .34) 69%, rgba(215, 188, 131, .34) 82%, transparent 100%) 50% 50% / 100% 1px no-repeat;
  transition: color .2s, opacity .3s;
}
.roster-col.has-scroll .roster-arrow { display: grid; }
.roster-arrow svg { width: 26px; height: 15px; overflow: visible; filter: drop-shadow(0 0 5px rgba(215, 188, 131, .6)); animation: roster-bob 1.5s ease-in-out infinite; }
.roster-arrow--up svg { transform: rotate(180deg); animation-name: roster-bob-up; }
.roster-arrow:hover { color: var(--gold-2); }
.roster-arrow:hover svg { filter: drop-shadow(0 0 8px rgba(241, 220, 170, .9)); }
.roster-arrow:disabled { color: var(--ink-3); opacity: .3; cursor: default; }
.roster-arrow:disabled svg { animation: none; filter: none; }
@keyframes roster-bob { 0%, 100% { transform: translateY(-2px); opacity: .65; } 50% { transform: translateY(3px); opacity: 1; } }
@keyframes roster-bob-up { 0%, 100% { transform: rotate(180deg) translateY(-2px); opacity: .65; } 50% { transform: rotate(180deg) translateY(3px); opacity: 1; } }
.roster.is-scrollable:not(.at-top):not(.at-end) { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%); }
.roster.is-scrollable.at-top:not(.at-end) { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(180deg, #000 calc(100% - 34px), transparent 100%); }
.roster.is-scrollable.at-end:not(.at-top) { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34px); mask-image: linear-gradient(180deg, transparent 0, #000 34px); }
.roster__btn {
  --cut: 12px; --bd: var(--line-2); --in: 1px;
  position: relative; isolation: isolate; display: grid; width: var(--rb, 82px); height: var(--rb, 82px); padding: 0; border: 0; cursor: pointer; background: var(--bd);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: transform .3s;
}
.roster__btn img {
  position: absolute; inset: var(--in); width: calc(100% - var(--in) * 2); height: calc(100% - var(--in) * 2); object-fit: cover;
  clip-path: polygon(calc(var(--cut) - .6px) 0, 100% 0, 100% calc(100% - var(--cut) + .6px), calc(100% - var(--cut) + .6px) 100%, 0 100%, 0 calc(var(--cut) - .6px));
  filter: grayscale(.85) brightness(.6); transition: filter .3s;
}
.roster__btn:hover img { filter: grayscale(.2) brightness(.9); }
.roster__btn[aria-selected="true"] { --bd: var(--cream); --in: 2px; transform: translateX(10px); }
.roster__btn[aria-selected="true"] img { filter: none; }
.roster__btn:focus-visible { outline: none; --bd: var(--gold-2); --in: 3px; }
/* An upcoming champion's icon: a gold-edged strip along its bottom edge, cut at the corner like the icon */
.roster__tag {
  position: absolute; left: var(--in); right: var(--in); bottom: var(--in); z-index: 1; pointer-events: none;
  display: flex; align-items: center; justify-content: center; gap: 5px; padding: 3px calc(var(--cut) * .55) 2px 4px;
  font: 700 .58rem/1.25 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--gold-2);
  background: linear-gradient(180deg, rgba(9, 10, 14, .62), rgba(9, 10, 14, .94)); border-top: 1px solid rgba(215, 188, 131, .6);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut) + .6px), calc(100% - var(--cut) + .6px) 100%, 0 100%);
}
.roster__tag::before { content: ""; width: 5px; height: 5px; flex: none; background: currentColor; transform: rotate(45deg); box-shadow: 0 0 6px var(--gold); animation: blink 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .roster__tag::before { animation: none; } }
.roster__note { max-width: 190px; margin-top: 10px; font-size: .86rem; line-height: 1.5; color: var(--ink-2); text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.cpanel { position: relative; display: grid; gap: 22px; padding: 30px 30px 26px; --tick: color-mix(in srgb, var(--hue) 70%, white); }
.cpanel__class { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--hue); }
.cpanel__class .label { color: var(--hue); }
.cpanel__class .chip--soon { margin-left: auto; } /* "Upcoming" sits at the right end of the row */
.cpanel__name { font-size: clamp(2.6rem, 4.2vw, 3.8rem); line-height: 1; }
.cpanel__epithet { margin-top: 10px; font: 600 .95rem/1.4 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.cpanel__bar { height: 2px; background: linear-gradient(90deg, var(--hue), transparent); }
.cpanel__rows { display: grid; margin: 0; }
.cpanel__rows div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cpanel__rows dt { font: 600 .74rem/1.6 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.cpanel__rows dd { margin: 0; font: 600 1rem/1.5 var(--font-ui); letter-spacing: .06em; text-align: right; }
.cpanel__desc { color: var(--ink-2); font-size: 1rem; line-height: 1.65; }
.cpanel__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cpanel [data-swap] { transition: opacity .25s, transform .35s; }
.cpanel.is-swapping [data-swap] { opacity: 0; transform: translateY(8px); }
.champs__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 48px; }
.hints { display: flex; align-items: center; gap: 18px; color: var(--ink-3); font: 600 .74rem/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; }
.hints span { display: inline-flex; align-items: center; gap: 8px; }
.pager { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.pager__btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-2); background: rgba(7, 8, 11, .55); cursor: pointer; transition: border-color .2s, background .2s; }
.pager__btn:hover { border-color: var(--gold); background: rgba(236, 229, 211, .06); }
.pager__btn .ic { width: 18px; height: 18px; }
.pager__count { font: 700 .95rem/1 var(--font-ui); letter-spacing: .12em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pager__count b { color: var(--ink); }
@media (max-width: 1000px) {
  .champs { display: flex; flex-direction: column; padding-top: clamp(80px, 12vw, 110px); }
  .champs::before { display: none; }
  .champs__head { order: -2; }
  .champs__stage { position: relative; order: -1; inset: auto; width: 100%; height: min(72vw, 540px); margin-top: 22px; z-index: 0; -webkit-mask-image: none; mask-image: none; }
  .champs__stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--void) 0, transparent 20%, transparent 62%, var(--void) 100%); }
  .champs__veil, .champs__ghost { display: none; }
  .champs__body { z-index: 1; margin-top: -56px; }
  .champs__inner { grid-template-columns: 1fr; min-height: 0; padding-block: 0 8px; gap: 20px; }
  .roster-col { --rb: 72px; }
  .roster { display: flex; flex-wrap: wrap; gap: 12px; max-height: none; overflow: visible; padding-right: 0; scroll-snap-type: none; }
  .roster.is-scrollable { -webkit-mask-image: none !important; mask-image: none !important; }
  .roster-col .roster-arrow { display: none; }
  .roster__btn[aria-selected="true"] { transform: translateY(-6px); }
  .roster__tag { gap: 4px; padding-right: 6px; letter-spacing: .08em; }
  .roster__note { max-width: none; margin-top: 4px; }
  .champs__spacer { display: none; }
  .hints { display: none; }
  .champs__foot { padding-bottom: 72px; }
}
@media (max-width: 480px) { .cpanel { padding: 24px 20px 20px; } }

/* ---------- Story chapters (level select) ----------
   The level cards as a list on the left, the chosen chapter in a panel on the right. The section is washed in the
   chosen card's colours: the same card, blurred far past its size. Six cards show at a time; more scroll (wheel,
   dragging with the mouse, the arrows). On phones the cards are a row that scrolls sideways, above the panel. */
.story { isolation: isolate; overflow: clip; }
.story__backdrop { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.story__backdrop img {
  position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; object-fit: cover;
  filter: blur(48px) saturate(1.3); opacity: 0; transition: opacity 1s ease;
}
.story__backdrop img.is-active { opacity: .34; }
.story__backdrop::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--void) 0, rgba(7, 8, 11, .35) 22%, rgba(7, 8, 11, .35) 78%, var(--void) 100%), linear-gradient(90deg, rgba(7, 8, 11, .55), transparent 50%, rgba(7, 8, 11, .4));
}
.story__tabs { margin-bottom: 22px; } /* Story / Survivor: the gallery's filter buttons */
.story__body { display: grid; grid-template-columns: minmax(320px, 500px) minmax(0, 760px); gap: clamp(28px, 4vw, 64px); align-items: start; }
.story__col { --ch: 92px; --cg: 10px; display: grid; gap: 12px; min-width: 0; }
.story__list {
  position: relative; display: grid; gap: var(--cg); max-height: calc(var(--ch) * 6 + var(--cg) * 5); padding-right: 12px;
  overflow-x: hidden; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; -webkit-user-select: none; user-select: none;
}
.story__list::-webkit-scrollbar { display: none; }
.story__col.has-scroll .story__list { cursor: grab; }
.story__list.is-dragging, .story__list.is-dragging .chapter { cursor: grabbing; }
.story__list.is-scrollable:not(.at-top):not(.at-end) { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%); }
.story__list.is-scrollable.at-top:not(.at-end) { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(180deg, #000 calc(100% - 34px), transparent 100%); }
.story__list.is-scrollable.at-end:not(.at-top) { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34px); mask-image: linear-gradient(180deg, transparent 0, #000 34px); }
.story-arrow { width: auto; margin-right: 12px; }
.story__col.has-scroll .story-arrow { display: grid; }
.chapter {
  --cut: 12px; --bd: var(--line-2); --in: 1px;
  position: relative; isolation: isolate; display: flex; align-items: flex-end; gap: 14px; width: 100%; height: var(--ch); padding: 0 18px 11px 16px;
  border: 0; cursor: pointer; text-align: left; color: var(--ink); background: var(--bd); scroll-snap-align: start;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: transform .3s;
}
.chapter img, .chapter::before {
  position: absolute; inset: var(--in); width: calc(100% - var(--in) * 2); height: calc(100% - var(--in) * 2);
  clip-path: polygon(calc(var(--cut) - .6px) 0, 100% 0, 100% calc(100% - var(--cut) + .6px), calc(100% - var(--cut) + .6px) 100%, 0 100%, 0 calc(var(--cut) - .6px));
}
.chapter img { z-index: -2; object-fit: cover; filter: grayscale(.75) brightness(.55); transition: filter .3s; pointer-events: none; -webkit-user-drag: none; }
.chapter::before { content: ""; z-index: -1; background: linear-gradient(90deg, rgba(7, 8, 11, .82) 0, rgba(7, 8, 11, .38) 42%, rgba(7, 8, 11, 0) 72%); }
.chapter__num { font: 700 1.9rem/.9 var(--font-ui); letter-spacing: .02em; color: var(--ink-2); font-variant-numeric: tabular-nums; text-shadow: 0 2px 12px rgba(0, 0, 0, .9); transition: color .3s; }
.chapter__name { min-width: 0; padding-bottom: 2px; font: 600 .8rem/1.3 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 8px rgba(0, 0, 0, .95); }
.chapter:hover img { filter: grayscale(.2) brightness(.85); }
.chapter[aria-selected="true"] { --bd: var(--cream); --in: 2px; transform: translateX(10px); }
.chapter[aria-selected="true"] img { filter: none; }
.chapter[aria-selected="true"] .chapter__num { color: var(--gold-2); }
.chapter:focus-visible { outline: none; --bd: var(--gold-2); --in: 3px; }
.chapter.is-upcoming:not([aria-selected="true"]) img { filter: grayscale(1) brightness(.42); }
.chapter__tag {
  position: absolute; top: calc(var(--in) + 8px); right: calc(var(--in) + 10px); display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 2px;
  font: 700 .6rem/1.2 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: var(--gold-2);
  background: rgba(9, 10, 14, .82); border: 1px solid rgba(215, 188, 131, .55);
}
.chapter__tag::before { content: ""; width: 5px; height: 5px; flex: none; background: currentColor; transform: rotate(45deg); box-shadow: 0 0 6px var(--gold); animation: blink 1.6s ease-in-out infinite; }
.story__panel { position: relative; display: grid; gap: 18px; padding: 26px 28px 28px; align-content: start; }
.story__art { margin: 0; aspect-ratio: 538 / 116; overflow: hidden; border: 1px solid var(--line); background: var(--deep); }
.story__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.story__top { display: flex; align-items: center; gap: 12px; min-height: 26px; }
.story__chapter { color: var(--gold); }
.story__chapter b { color: var(--gold-2); font-weight: 700; }
.story__top .chip--soon { margin-left: auto; }
.story__name { font-size: clamp(2rem, 3vw, 2.9rem); line-height: 1.05; }
.story__boss { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-block: 1px solid var(--line); }
.story__boss .label { color: var(--ink-3); }
.story__boss-name { font: 700 1.05rem/1.3 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.story__desc { color: var(--ink-2); font-size: 1rem; line-height: 1.7; white-space: pre-line; } /* a blank line in the description starts a new paragraph */
.story__panel [data-swap] { transition: opacity .25s, transform .35s; }
.story__panel.is-swapping [data-swap] { opacity: 0; transform: translateY(8px); }
@media (min-width: 2200px) { .story__col { --ch: 104px; } .story__body { grid-template-columns: minmax(360px, 580px) minmax(0, 860px); } }
/* From 2700px (3440×1440 and up) the cards form a grid, two to a row and three from 3400px, five rows at a time,
   beside a panel that keeps its size: the section fills the wider column without blowing up the small cards. */
@media (min-width: 2700px) {
  .story__body { grid-template-columns: minmax(0, 1fr) minmax(0, 780px); }
  .story__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; max-height: calc(var(--ch) * 5 + var(--cg) * 4); padding-right: 0; }
  .story-arrow { margin-right: 0; }
  .chapter[aria-selected="true"] { transform: none; }
}
@media (min-width: 3400px) { .story__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) {
  .story__body { grid-template-columns: 1fr; gap: 18px; }
  .story__list {
    grid-auto-flow: column; grid-auto-columns: min(80%, 320px); max-height: none; padding: 8px 0 6px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  }
  .story__list.is-scrollable:not(.at-top):not(.at-end) { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
  .story__list.is-scrollable.at-top:not(.at-end) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%); }
  .story__list.is-scrollable.at-end:not(.at-top) { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px); mask-image: linear-gradient(90deg, transparent 0, #000 28px); }
  .story__col .story-arrow { display: none; }
  .chapter { height: auto; aspect-ratio: 538 / 116; padding: 0 12px 8px 12px; gap: 10px; }
  .chapter[aria-selected="true"] { transform: translateY(-5px); }
  .chapter__num { font-size: 1.45rem; }
  .chapter__name { font-size: .7rem; letter-spacing: .14em; }
  .chapter__tag { top: calc(var(--in) + 5px); right: calc(var(--in) + 6px); padding: 2px 6px 1px; font-size: .55rem; letter-spacing: .1em; }
  .story__panel { padding: 20px 18px 22px; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .chapter, .chapter img, .story__backdrop img, .story__panel [data-swap] { transition: none; }
  .chapter__tag::before { animation: none; }
}

/* ---------- Gameplay systems (tabbed screen) ----------
   The tabs in one row (render sets --n, the number of tabs), the shown tab's panel under it: the picture with
   its text beside it, or the talent tree as wide as the row with the text under it. On tablets and phones the
   tabs fold into a menu button that shows the chosen tab and opens the list over the panel. */
.sys { display: grid; gap: clamp(18px, 2.2vw, 28px); }
.sys__nav { position: relative; min-width: 0; }
.sys__menu { display: none; }
.sys__tabs { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 8px; }
.sys__tab {
  --cut: 10px;
  position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 4px 14px; align-items: center; align-content: center;
  width: 100%; padding: 14px 16px; text-align: left; cursor: pointer;
  background: rgba(236, 229, 211, .03); border: 1px solid var(--line); color: var(--ink-2);
  transition: background .25s, color .25s, border-color .25s;
}
.sys__tab:hover { border-color: var(--line-2); color: var(--ink); }
.sys__tab[aria-selected="true"] { background: var(--cream); color: var(--on-cream); border-color: var(--cream); }
.sys__tab[aria-selected="true"] .sys__tab-sub { color: rgba(20, 22, 27, .66); }
.sys__tab[aria-selected="true"] .sys__icon { border-color: rgba(20, 22, 27, .35); }
.sys__icon { grid-row: span 2; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line-2); transform: rotate(45deg) scale(.78); }
.sys__icon .ic { width: 20px; height: 20px; transform: rotate(-45deg) scale(1.2); }
.sys__tab-title { font: 700 1.02rem/1.2 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
.sys__tab-sub { font-size: .86rem; line-height: 1.35; color: var(--ink-3); }
.sys__view { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); gap: 26px clamp(28px, 3.4vw, 52px); align-items: center; }
.sys__view--tree { grid-template-columns: minmax(0, 1fr); align-items: start; }
.sys__img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--deep); border: 1px solid var(--line); --tick: var(--gold); }
.sys__img img { width: 100%; height: 100%; object-fit: cover; }
.sys__img .label { position: absolute; left: 14px; bottom: 12px; padding: 5px 9px; background: var(--scrim); font-size: .66rem; color: var(--ink-2); }
.sys__body { display: grid; gap: 14px 32px; align-items: start; }
.sys__view--tree .sys__body { grid-template-columns: minmax(0, 1fr) auto; }
.sys__body h3 { grid-column: 1 / -1; }
.sys__body p { color: var(--ink-2); max-width: 60ch; }
.sys__panel { animation: fadeIn .45s ease both; }
@keyframes fadeIn { from { opacity: .2; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* four tabs in a row get tight on small laptops: a slightly smaller title */
@media (max-width: 1360px) {
  .sys__tab { padding: 13px 14px; gap: 4px 12px; }
  .sys__tab-title { font-size: .94rem; letter-spacing: .1em; }
}
@media (max-width: 900px) {
  .sys__menu {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px;
    width: 100%; padding: 12px 12px 12px 16px; text-align: left; cursor: pointer;
    background: var(--cream); color: var(--on-cream); border: 1px solid var(--cream);
  }
  .sys__menu:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
  .sys__menu-cur { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 4px 14px; align-items: center; min-width: 0; }
  .sys__menu .sys__tab-sub { color: rgba(20, 22, 27, .66); }
  .sys__menu .sys__icon { border-color: rgba(20, 22, 27, .35); }
  .sys__menu-ic { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(20, 22, 27, .3); }
  .sys__menu-ic svg { width: 20px; height: 20px; }
  .sys__menu-ic .ic, .sys.is-menu-open .sys__menu-ic svg:first-child { display: none; }
  .sys.is-menu-open .sys__menu-ic .ic { display: block; }
  .sys__tabs { display: none; }
  .sys.is-menu-open .sys__tabs {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 8px;
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
    background: rgb(12, 14, 19); border: 1px solid var(--line-2); box-shadow: 0 24px 50px rgba(0, 0, 0, .55);
    animation: sysMenu .22s cubic-bezier(.2, .7, .2, 1) both;
  }
  .sys__view, .sys__view--tree .sys__body { grid-template-columns: 1fr; }
}
@keyframes sysMenu { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Talent tree (Gameplay → Talents): drawn by site.js from the data in the page ----------
   The stage holds the links (SVG) and the nodes (buttons) at the tree's own size; site.js moves and scales it
   inside the view to zoom and pan. Icons come from one picture (talent-icons.webp) cut by background-position. */
.ttree { display: grid; gap: 12px; min-width: 0; }
.ttree__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.ttree__build { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ttree__build .label, .ttree__count .label { color: var(--ink-3); }
.ttree__select { position: relative; display: block; min-width: 0; }
.ttree__select::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border: solid var(--gold); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none; }
.ttree__select select {
  -webkit-appearance: none; appearance: none; max-width: 100%; min-width: 200px; height: 40px; padding: 0 40px 0 14px;
  font: 700 .84rem/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  background: var(--deep); border: 1px solid var(--line-2); border-radius: 0; cursor: pointer;
}
.ttree__select select:hover { border-color: var(--gold); }
.ttree__select select:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.ttree__select option { background: var(--deep); color: var(--ink); }
.ttree__count { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.ttree__num { font: 600 1rem/1 var(--font-ui); letter-spacing: .08em; color: var(--ink-3); white-space: nowrap; }
.ttree__num b { font-size: 1.35rem; color: var(--gold-2); }
.ttree__num.is-full b { color: var(--gold); }
/* zoom buttons: a column in the view's top right corner, like a map's */
.ttree__tools { position: absolute; top: 10px; right: 10px; z-index: 4; display: grid; gap: 6px; }
.ttree__tools .ttree__tool { width: 36px; min-width: 0; height: 36px; background: rgba(12, 14, 19, .86); }
[data-tree-clear] { margin-left: auto; }
.ttree__tool {
  display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0; border: 1px solid var(--line-2); background: var(--deep);
  color: var(--ink-2); cursor: pointer; transition: border-color .2s, color .2s;
}
.ttree__tool svg { width: 18px; height: 18px; }
.ttree__tool:hover { border-color: var(--gold); color: var(--ink); }
.ttree__tool:disabled { opacity: .4; cursor: default; border-color: var(--line-2); color: var(--ink-2); }
.ttree__tool--text { padding: 0 14px; font: 700 .78rem/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; }
.ttree__view {
  position: relative; overflow: hidden; aspect-ratio: 4 / 3; min-height: 300px; --tick: var(--gold);
  background: radial-gradient(ellipse 70% 60% at 50% 45%, #15171e 0%, #0b0c10 70%, #08090c 100%);
  border: 1px solid var(--line); touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.ttree__view.is-ready { cursor: grab; }
.ttree__view.is-dragging { cursor: grabbing; }
.ttree__view.is-zoomed { touch-action: none; }
.ttree__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ttree__cap { position: absolute; left: 14px; bottom: 12px; z-index: 3; padding: 5px 9px; background: var(--scrim); font-size: .66rem; color: var(--ink-2); pointer-events: none; }
.ttree__stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.ttree__stage.is-gliding { transition: transform .42s cubic-bezier(.2, .7, .2, 1); }
.ttree__links { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
/* the background art (the game's talent_tree_BG.psd), in tree units under the links: faint circles, rune circles at
   the centre and the key talents, the paths' emblems, compass rings; the shaped rings turn slowly (each its own layer) */
.ttree__art { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.ttree__art > * { position: absolute; }
.ttree__art img { display: block; max-width: none; }
.ttree__art-lines { left: 0; top: 0; overflow: visible; fill: none; stroke: #fff; }
.ttree__art-rot { animation: tspin 120s linear infinite; will-change: transform; }
.ttree__art-rot.is-ccw { animation-direction: reverse; }
.ttree__art-rot > img, .ttree__art-rot > svg { display: block; width: 100%; height: 100%; }
.ttree__art-rot > svg { fill: none; stroke: #c0c0c0; overflow: visible; }
.ttree__art-compass { opacity: .2; }
.ttree__art-compass.is-faint { opacity: .08; }
@keyframes tspin { to { transform: rotate(360deg); } }
.ttree__view.is-idle .ttree__art-rot { animation-play-state: paused; }
/* an emblem brightens with its path's light */
.ttree__emb { opacity: .2; transition: opacity 1s ease, filter 1s ease; }
.ttree__emb[data-emb="magic"] { opacity: .85; }
.ttree__emb.is-lit { opacity: .42; }
.ttree__emb[data-emb="magic"].is-lit { opacity: 1; filter: brightness(1.7) saturate(1.2); }
/* each path's light stays off until its key talent is active, then comes in with a flash: a bright glow and a
   ring spreading from that talent's node */
.ttree__glow { opacity: 0; transition: opacity 1s ease; }
.ttree__glow.is-on { opacity: 1; }
.ttree__flash, .ttree__burst { opacity: 0; transform-box: fill-box; transform-origin: center; }
.ttree__burst { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; }
.ttree__flash.is-flash { animation: tlight 1.6s cubic-bezier(.2, .7, .2, 1) both; }
.ttree__burst.is-flash { animation: tburst 1.15s cubic-bezier(.15, .6, .3, 1) both; }
@keyframes tlight { 0% { opacity: 0; transform: scale(.25); } 15% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.2); } }
@keyframes tburst { 0% { opacity: 1; transform: scale(.7); } 100% { opacity: 0; transform: scale(7); } }
.ttree__l { fill: none; stroke: #4a4232; stroke-width: 2.4; stroke-linecap: round; }
.ttree__l--on { stroke: #f0d48c; stroke-width: 3.4; filter: drop-shadow(0 0 3px rgba(240, 212, 140, .75)); }
/* nodes: a stone ring around the icon; lit when active, half-lit when it could be activated next */
.tnode {
  position: absolute; padding: 0; border: 0; border-radius: 50%; background: #111318; cursor: pointer;
  box-shadow: 0 0 0 2px #574e3b, 0 0 0 3.5px rgba(0, 0, 0, .55); transition: box-shadow .2s, transform .15s;
}
.tnode--m { box-shadow: 0 0 0 2.6px #574e3b, 0 0 0 4.2px rgba(0, 0, 0, .55); }
.tnode--l { box-shadow: 0 0 0 3.2px #6a5d42, 0 0 0 5px rgba(0, 0, 0, .55); }
.tnode__icon {
  position: absolute; inset: 15%; pointer-events: none; background-repeat: no-repeat;
  filter: saturate(.5) brightness(.6); transition: filter .2s;
}
.tnode--m .tnode__icon, .tnode--l .tnode__icon { inset: 6%; border-radius: 50%; }
.tnode.is-next { box-shadow: 0 0 0 2px #8d7a52, 0 0 0 3.5px rgba(0, 0, 0, .55); }
.tnode.is-next .tnode__icon { filter: saturate(.8) brightness(.85); }
.tnode.is-on { box-shadow: 0 0 0 2.2px #ecd08c, 0 0 9px 2px rgba(236, 208, 140, .5); }
.tnode--m.is-on { box-shadow: 0 0 0 2.8px #ecd08c, 0 0 12px 3px rgba(236, 208, 140, .5); }
.tnode--l.is-on { box-shadow: 0 0 0 3.4px #f2d995, 0 0 16px 4px rgba(242, 217, 149, .55); }
.tnode.is-on .tnode__icon { filter: none; }
.tnode:hover { transform: scale(1.12); z-index: 2; }
.tnode:hover .tnode__icon { filter: none; }
.tnode:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 4px; z-index: 2; }
.tnode.is-sel { z-index: 3; box-shadow: 0 0 0 2.4px #fff3cf, 0 0 0 6px rgba(241, 220, 170, .28), 0 0 18px 4px rgba(241, 220, 170, .45); }
.tnode.is-sel .tnode__icon { filter: none; }
/* a node the visitor activates: a light sweeps across the icon and a small four-point flare shines on it */
.tnode.is-shining { z-index: 4; }
.tnode__fx { position: absolute; inset: 0; pointer-events: none; }
.tnode__glint { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.tnode__glint i {
  position: absolute; top: -15%; bottom: -15%; left: -70%; width: 60%;
  background: linear-gradient(100deg, transparent 0, rgba(255, 246, 222, .15) 30%, rgba(255, 250, 235, .95) 50%, rgba(255, 246, 222, .15) 70%, transparent 100%);
  transform: skewX(-18deg); animation: tglint .7s cubic-bezier(.3, .6, .3, 1) both;
}
@keyframes tglint { from { transform: skewX(-18deg) translateX(0); } to { transform: skewX(-18deg) translateX(400%); } }
.tnode__flare {
  position: absolute; left: 50%; top: 50%; width: 360%; height: 360%; translate: -50% -50%; opacity: 0; mix-blend-mode: screen;
  background:
    linear-gradient(90deg, transparent 0, rgba(255, 243, 210, .9) 50%, transparent 100%) center / 100% 2px no-repeat,
    linear-gradient(0deg, transparent 0, rgba(255, 243, 210, .9) 50%, transparent 100%) center / 2px 100% no-repeat,
    radial-gradient(circle, rgba(255, 248, 228, .95) 0, rgba(240, 212, 140, .45) 9%, rgba(240, 212, 140, 0) 24%);
  animation: tflare .95s ease-out .18s both;
}
@keyframes tflare { 0% { opacity: 0; transform: scale(.15) rotate(-20deg); } 28% { opacity: 1; transform: scale(1) rotate(0); } 100% { opacity: 0; transform: scale(.55) rotate(35deg); } }
/* the editor's preview points out a talent's nodes */
.tnode.is-flash { animation: tflash 1.6s ease; }
@keyframes tflash { 0%, 65% { box-shadow: 0 0 0 3px #fff3cf, 0 0 24px 8px rgba(241, 220, 170, .85); } }
/* the node's pop-up: its stats and the activate / remove button */
.ttree__pop {
  position: absolute; z-index: 6; width: max-content; min-width: 200px; max-width: min(280px, calc(100% - 16px)); padding: 14px 16px 16px;
  background: rgba(13, 15, 20, .97); border: 1px solid var(--line-2); border-top: 2px solid var(--gold); box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
  cursor: auto;
}
.ttree__pop[hidden] { display: none; }
.ttree__pop-path { margin: 0 26px 4px 0; font-size: .66rem; color: var(--gold); }
.ttree__pop-name { margin: 0 26px 10px 0; font: 600 1.12rem/1.2 var(--font-display); color: var(--ink); }
.ttree__pop-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.ttree__pop-stats li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: .92rem; line-height: 1.3; color: var(--ink-2); }
.ttree__pop-stats b, .ttree__sum dd { font: 700 1rem/1.2 var(--font-ui); letter-spacing: .04em; color: var(--gold-2); white-space: nowrap; }
.ttree__pop-note { margin: 10px 0 0; font-size: .8rem; line-height: 1.4; color: var(--ink-3); }
.ttree__pop-act { margin-top: 12px; width: 100%; }
.ttree__pop-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--ink-3); cursor: pointer; }
.ttree__pop-x:hover { color: var(--ink); }
.ttree__pop-x .ic { width: 16px; height: 16px; }
.ttree__hint { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--ink-3); }
/* the build totals: a column over the tree's left side that its menu button opens and folds, with the tree
   blurred behind it. On a computer it starts open and the whole tree fits beside it; on tablets and phones it
   starts folded and opens over the tree. One row per stat: its name, then the numbers, large like the game's
   stat screen. */
.ttree__side {
  position: absolute; left: 12px; top: 12px; bottom: 12px; z-index: 5; width: clamp(250px, 22%, 320px);
  display: none; flex-direction: column; align-items: flex-start; pointer-events: none;
}
.ttree__view.is-ready .ttree__side { display: flex; }
.ttree__side-btn {
  flex: none; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px 0 12px; pointer-events: auto; cursor: pointer;
  background: rgba(12, 14, 19, .78); border: 1px solid var(--line-2); color: var(--ink-2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color .2s, color .2s;
}
.ttree__side-btn svg { width: 18px; height: 18px; flex: none; }
.ttree__side-btn .label { color: inherit; white-space: nowrap; }
.ttree__side-btn:hover { border-color: var(--gold); color: var(--ink); }
.ttree__side-btn:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.ttree__side.is-open .ttree__side-btn { align-self: stretch; color: var(--gold); background: rgba(12, 14, 19, .5); border-bottom-color: var(--line); }
.ttree__side.is-open .ttree__side-btn:hover { color: var(--gold-2); }
.ttree__side-body {
  flex: 1 1 auto; align-self: stretch; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 18px 14px;
  background: rgba(10, 11, 15, .5); border: 1px solid var(--line-2); border-top: 0;
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
  opacity: 0; visibility: hidden; transform: translateX(-12px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.ttree__side.is-open .ttree__side-body { pointer-events: auto; opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease; }
/* more stats than fit: the bottom of the column darkens until the list is scrolled to its end */
.ttree__side::after {
  content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 48px; pointer-events: none;
  background: linear-gradient(rgba(10, 11, 15, 0), rgba(10, 11, 15, .94)); opacity: 0; transition: opacity .2s;
}
.ttree__side.is-more::after { opacity: 1; }
.ttree__side-empty { margin: 12px 0 0; font-size: .9rem; line-height: 1.5; color: var(--ink-3); }
.ttree__side-empty[hidden] { display: none; }
.ttree__sum { display: grid; margin: 0; }
.ttree__sum div { display: grid; gap: 2px; padding: 10px 0 11px; border-bottom: 1px solid rgba(236, 229, 211, .09); }
.ttree__sum div:last-child { border-bottom: 0; }
.ttree__sum dt { font: 700 .72rem/1.25 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.ttree__sum dd { margin: 0; display: flex; flex-wrap: wrap; gap: 0 14px; font-size: 1.45rem; line-height: 1.2; letter-spacing: .03em; }
.ttree__sum dd span { font-variant-numeric: tabular-nums; transition: color .3s, text-shadow .3s; }
/* a number counting to its new value glows; a new stat slides in */
.ttree__sum dd span.is-counting { color: #fff3cf; text-shadow: 0 0 14px rgba(240, 212, 140, .7); }
.ttree__sum div.is-new { animation: tstat .55s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes tstat { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sys__view--tree .sys__body { align-self: start; }
@media (max-width: 700px) {
  .ttree__view { aspect-ratio: 1 / 1; }
  .ttree__bar { gap: 10px 14px; }
  .ttree__build { flex: 1 1 100%; }
  .ttree__select { flex: 1; }
  .ttree__select select { width: 100%; min-width: 0; }
  .ttree__tool--text { padding: 0 12px; }
}
@media (max-width: 900px) {
  /* the tree needs the whole view on smaller screens; the tab's picture caption only goes with the picture */
  .ttree__view.is-ready .ttree__cap { display: none; }
  /* the totals column opens over the tree, clear of the zoom buttons */
  .ttree__side { left: 8px; top: 8px; bottom: 8px; width: min(280px, calc(100% - 66px)); }
  .ttree__side-btn { height: 36px; gap: 8px; padding: 0 12px 0 10px; }
  .ttree__side-btn .label { font-size: .68rem; letter-spacing: .16em; }
  .ttree__side-body { background: rgba(10, 11, 15, .62); padding: 2px 14px 12px; }
  .ttree__sum div { padding: 8px 0 9px; }
  .ttree__sum dd { font-size: 1.25rem; }
}
@media (min-width: 901px) {
  /* on a computer the view is as wide as the row of tabs above it, and as tall as the screen allows */
  .ttree__view { width: 100%; aspect-ratio: 16 / 9; max-height: min(calc(100vh - 190px), 1000px); min-height: 380px; }
  /* the picture's caption moves to the right, out of the totals column's way */
  .ttree__view.is-ready .ttree__cap { left: auto; right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .tnode, .tnode__icon, .ttree__glow, .ttree__stage.is-gliding, .ttree__side-body, .ttree__side.is-open .ttree__side-body, .ttree__emb { transition: none; }
  .ttree__art-rot { animation: none; }
  .ttree__flash.is-flash, .ttree__burst.is-flash, .ttree__sum div.is-new, .sys.is-menu-open .sys__tabs { animation: none; }
}

/* ---------- Ability cards (Gameplay → Ability cards): the game's cards in a carousel, moved by site.js ----------
   Each card is the game's card front (its symbol in the diamond, its name and what it does in the panel, the corner
   gem in its type's colour: red attack modifiers, blue abilities, yellow utility) with the card back on its other side. site.js places every card: the one in front faces
   the visitor, the others stand further back on each side, turned toward it and darker (--b). It tilts the front
   card toward the pointer (the symbol, gem and text float at different heights: --sx, --sy) with a glint (--gx,
   --gy, --glare). The card size (--cw) follows the carousel's own width. */
.sys__view--deck { align-items: center; }
.deck { position: relative; min-width: 0; container-type: inline-size; }
.deck__stage {
  --cw: clamp(190px, 36cqw, 310px); --ch: calc(var(--cw) * 1.464);
  position: relative; z-index: 0; height: calc(var(--ch) + var(--cw) * .22);
  perspective: calc(var(--cw) * 4.2); transition: opacity .18s ease;
  touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  /* the cards further out fade into the page */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
/* a soft light behind the card in front, and its shadow on the floor */
.deck__stage::before, .deck__stage::after { content: ""; position: absolute; left: 50%; pointer-events: none; transform: translateX(-50%); }
.deck__stage::before {
  top: 50%; width: calc(var(--cw) * 2.1); height: calc(var(--ch) * 1.12); transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(215, 188, 131, .17), rgba(215, 188, 131, .05) 58%, transparent);
}
.deck__stage::after {
  bottom: calc(var(--cw) * .05); width: calc(var(--cw) * 1.1); height: calc(var(--cw) * .12);
  background: radial-gradient(closest-side, rgba(0, 0, 0, .72), rgba(0, 0, 0, .3) 55%, transparent);
}
.acard {
  position: absolute; z-index: 1; left: calc(50% - var(--cw) / 2); top: calc(50% - var(--ch) / 2); width: var(--cw); height: var(--ch);
  margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer;
  transform-style: preserve-3d; -webkit-tap-highlight-color: transparent;
}
.acard:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 7px; }
.acard.is-far, .acard.is-out, .deck:not(.is-on) .acard + .acard { display: none; } /* before site.js: just the first card */
.deck.is-dragging .acard { cursor: grabbing; }
.deck.is-swap .deck__stage { opacity: 0; }
.acard__tilt, .acard__flip { position: absolute; inset: 0; transform-style: preserve-3d; }
.acard__flip { transition: transform .8s cubic-bezier(.35, .1, .15, 1); }
.acard.is-flipped .acard__flip { transform: rotateY(180deg); }
.deck.is-instant .acard__flip { transition: none; }
.acard__face { position: absolute; inset: 0; background: center / 100% 100% no-repeat; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.acard__front { background-image: var(--front); }
.acard__back { background-image: var(--back); transform: rotateY(180deg); }
/* darker further out (a shade in the card's own shape; the gem, which sticks out a little, darkens itself) */
.acard__face::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; background: #06070b;
  opacity: calc(1 - var(--b, 1) - var(--hb, 0));
  -webkit-mask: var(--front) center / 100% 100% no-repeat; mask: var(--front) center / 100% 100% no-repeat;
}
.acard__back::after { -webkit-mask-image: var(--back); mask-image: var(--back); }
.acard:not(.is-front):hover { --hb: .16; }
.acard__icon {
  position: absolute; left: 25%; top: 20.3%; width: 50%; height: auto; aspect-ratio: 1; pointer-events: none;
  filter: drop-shadow(0 calc(var(--cw) * .014) calc(var(--cw) * .03) rgba(0, 0, 0, .6));
  transform: translate(calc(var(--sx, 0) * var(--cw) * .1), calc(var(--sy, 0) * var(--cw) * .1));
}
.acard__gem {
  position: absolute; left: -1.58%; top: 1.41%; width: 19.75%; aspect-ratio: 1;
  background: var(--bezel) center / 100% 100% no-repeat, var(--gem-ability) center / 100% 100% no-repeat;
  transform: translate(calc(var(--sx, 0) * var(--cw) * .045), calc(var(--sy, 0) * var(--cw) * .045));
  filter: brightness(min(1, calc(var(--b, 1) + var(--hb, 0))));
}
.acard[data-type="attack"] .acard__gem { background-image: var(--bezel), var(--gem-attack); }
.acard[data-type="utility"] .acard__gem { background-image: var(--bezel), var(--gem-utility); }
/* the panel's free middle: clear of the gold horns in its lower corners */
.acard__text {
  position: absolute; left: 16.5%; right: 16.5%; top: 71%; bottom: 5.5%; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--cw) * .014);
  transform: translate(calc(var(--sx, 0) * var(--cw) * .025), calc(var(--sy, 0) * var(--cw) * .025));
}
.acard__name {
  font: 600 calc(var(--cw) * .066)/1.08 var(--font-display); letter-spacing: .02em; color: var(--gold-2); text-wrap: balance;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 calc(var(--cw) * .04) rgba(215, 188, 131, .35);
}
/* the three levels' texts share one place (as tall as the longest), and the level picked shows */
.acard__desc { display: grid; font: 500 calc(var(--cw) * .048)/1.27 var(--font-body); color: rgba(236, 230, 214, .93); text-wrap: balance; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.acard__desc > span { grid-area: 1 / 1; align-self: center; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.deck[data-level="1"] .acard__desc > :nth-child(1),
.deck[data-level="2"] .acard__desc > :nth-child(2),
.deck[data-level="3"] .acard__desc > :nth-child(3) { opacity: 1; visibility: visible; transition: opacity .35s .08s, visibility 0s; }
/* the glint: where the pointer is, on either side; and a light that sweeps over a card as it comes to the front */
.acard__glare, .acard__back::before, .acard__front::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: var(--front) center / 100% 100% no-repeat; mask: var(--front) center / 100% 100% no-repeat;
}
.acard__glare, .acard__back::before {
  opacity: var(--glare, 0);
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 244, 214, .5), rgba(255, 228, 172, .16) 24%, transparent 50%);
}
.acard__back::before {
  -webkit-mask-image: var(--back); mask-image: var(--back);
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 244, 214, .42), rgba(255, 228, 172, .13) 24%, transparent 50%);
}
/* The card in front drawn with its materials (PBR) while the pointer is on it (site.js, WebGL): the canvas covers the
   face's picture and fades in with the hover, and takes over from the plain glint and the page's own symbol. */
.acard__lit { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.acard.is-lit .acard__glare, .acard.is-lit .acard__back::before { opacity: 0; }
.acard.is-lit .acard__icon { opacity: calc(1 - var(--lit, 0)); }
/* a glint on the gem, on the side toward the light */
.acard__gem::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--glare, 0);
  background: radial-gradient(circle at var(--hx, 40%) var(--hy, 35%), rgba(255, 255, 255, .85), rgba(255, 250, 235, .25) 22%, transparent 46%);
  -webkit-mask: var(--gem-ability) center / 100% 100% no-repeat; mask: var(--gem-ability) center / 100% 100% no-repeat;
}
.acard[data-type="attack"] .acard__gem::after { -webkit-mask-image: var(--gem-attack); mask-image: var(--gem-attack); }
.acard[data-type="utility"] .acard__gem::after { -webkit-mask-image: var(--gem-utility); mask-image: var(--gem-utility); }
.acard__front::before {
  z-index: 1; opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 238, 196, .34) 48%, rgba(255, 250, 232, .5) 50%, rgba(255, 238, 196, .34) 52%, transparent 62%) 0 0 / 300% 100% no-repeat;
}
.acard.is-glint .acard__front::before { animation: acardGlint 1.1s cubic-bezier(.3, .2, .2, 1) both; }
@keyframes acardGlint { 0% { opacity: 1; background-position: 100% 0; } 85% { opacity: 1; } 100% { opacity: 0; background-position: 0 0; } }

/* What the front card says, in words, for screen readers (read out as it changes) */
.deck__now { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* the card types over the carousel: what the gem colours mean, and a choice of which cards it shows */
.deck__types { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.deck__type {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(236, 229, 211, .03); color: var(--ink-2); transition: background .2s, color .2s, border-color .2s;
}
.deck__type .deck__gem { margin-left: -6px; }
.deck__type .label { color: inherit; font-size: .74rem; letter-spacing: .16em; }
.deck__type b { font-size: .8rem; font-weight: 600; opacity: .6; }
.deck__type:hover { border-color: var(--line-2); color: var(--ink); }
.deck__type[aria-pressed="true"] { background: var(--cream); color: var(--on-cream); border-color: var(--cream); }
.deck__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 8px; }
.deck__nav { display: flex; align-items: center; gap: 10px; }
.deck__step {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--deep); color: var(--ink-2); transition: border-color .2s, color .2s;
}
.deck__step svg { width: 18px; height: 18px; }
.deck__step:hover { border-color: var(--gold); color: var(--ink); }
.deck__count { min-width: 5.4em; text-align: center; font-size: 1rem; font-weight: 600; letter-spacing: .12em; color: var(--ink-3); }
.deck__count b { color: var(--gold-2); font-weight: 700; }
.deck__count i { font-style: normal; margin: 0 .4em; opacity: .55; }
/* the card's level: one track of numbered diamonds, level 1 to the highest, in three parts (Base: 1, Upgrade: the
   levels between, Ultimate: the highest), the part picked lit */
.deck__levels { display: flex; align-items: center; gap: 14px; }
.deck__lvcap { color: var(--ink-3); font-size: .7rem; letter-spacing: .2em; }
.deck__lvs { display: flex; border: 1px solid var(--line); }
.deck__level {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 58px; padding: 7px 16px 8px; cursor: pointer;
  border: 0; background: rgba(236, 229, 211, .03); color: var(--ink-2); transition: background .2s, color .2s;
}
.deck__level + .deck__level { border-left: 1px solid var(--line); }
.deck__level .label { color: inherit; font-size: .72rem; letter-spacing: .16em; }
.deck__level:hover { color: var(--ink); background: rgba(236, 229, 211, .07); }
.deck__level[aria-checked="true"] { background: var(--cream); color: var(--on-cream); }
.deck__lv { position: relative; z-index: 1; display: flex; gap: 8px; }
/* the track's line, from level 1's diamond to the highest level's (each at the middle of its part), through the parts */
.deck__level::before { content: ""; position: absolute; top: 18px; left: 0; right: 0; height: 1px; background: currentColor; opacity: .28; }
.deck__level:first-child::before { left: 50%; }
.deck__level:last-child::before { right: 50%; }
.deck__lv i {
  position: relative; isolation: isolate; display: grid; place-items: center; width: 22px; height: 22px;
  font-style: normal; font-size: .78rem; font-weight: 700; line-height: 1;
}
.deck__lv i::before {
  content: ""; position: absolute; inset: 4px; z-index: -1; transform: rotate(45deg);
  border: 1px solid currentColor; background: var(--deep); opacity: .9;
}
.deck__level:hover .deck__lv i::before { border-color: var(--gold); }
.deck__level[aria-checked="true"] .deck__lv i { color: var(--cream); }
.deck__level[aria-checked="true"] .deck__lv i::before { background: var(--on-cream); border-color: var(--on-cream); opacity: 1; }
.deck__gem { width: 30px; height: 30px; flex: none; background-size: 100% 100%; background-repeat: no-repeat; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
@container (max-width: 560px) {
  .deck__stage { --cw: clamp(176px, 64cqw, 300px); }
  .deck__bar { justify-content: center; }
  .deck__types { justify-content: center; }
  .deck__type { gap: 6px; padding: 0 11px; }
  .deck__levels { flex-direction: column; gap: 6px; }
  .deck__level { padding: 7px 11px 8px; }
  .deck__lv { gap: 5px; }
  .deck__type .label, .deck__level .label { font-size: .68rem; letter-spacing: .12em; }
  .deck__gem { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .acard__flip, .acard__desc > span { transition: none !important; }
  .acard.is-glint .acard__front::before { animation: none; }
  .deck__stage { transition: none; }
}

/* ---------- Modes ---------- */
.modes { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 18px; }
.mode {
  position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  background: var(--raise); border: 1px solid var(--line); transition: border-color .3s, transform .4s cubic-bezier(.2, .7, .2, 1);
}
.mode:hover { border-color: var(--line-2); transform: translateY(-4px); }
.mode__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.mode__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.mode:hover .mode__img img { transform: scale(1.05); }
.mode__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 8, 11, .1) 40%, var(--raise) 100%); }
.mode__img .chip { position: absolute; left: 14px; top: 14px; z-index: 1; }
.mode__body { display: grid; align-content: start; gap: 12px; padding: 4px 22px 26px; }
.mode__body p { font-size: .98rem; line-height: 1.6; color: var(--ink-2); }
.mode--plan .mode__img img { filter: grayscale(.55) brightness(.75); }
@media (max-width: 1100px) { .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .modes { grid-template-columns: 1fr; } }

/* ---------- Media ---------- */
.media { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 14px; }
.trailer {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); text-decoration: none; background: var(--deep);
  --tick: var(--gold); cursor: pointer;
}
.trailer img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1), filter .4s; filter: brightness(.7); }
.trailer:hover img { transform: scale(1.04); filter: brightness(.85); }
.trailer__play {
  position: absolute; left: 50%; top: 46%; width: 88px; height: 88px; transform: translate(-50%, -50%) rotate(45deg);
  display: grid; place-items: center; border: 1px solid var(--cream); background: rgba(7, 8, 11, .45); color: var(--cream);
  transition: background .3s, color .3s;
}
.trailer__play::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(239, 232, 216, .35); }
.trailer:hover .trailer__play { background: var(--cream); color: var(--on-cream); }
.trailer__play .ic { width: 26px; height: 26px; transform: rotate(-45deg) translateX(2px); }
.trailer__cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: end; gap: 16px; padding: 40px 22px 18px; background: linear-gradient(transparent, rgba(7, 8, 11, .92)); }
.trailer__cap strong { display: block; margin-top: 6px; font: 600 1.4rem/1.2 var(--font-display); color: var(--ink); }
.media__side { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; }
.media__row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 14px; }
.media--no-trailer { grid-template-columns: 1fr; }
.media--no-trailer .media__side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
.media--no-trailer .media__side .shot { aspect-ratio: 2796 / 1100; }
.shot { position: relative; display: block; overflow: hidden; border: 1px solid var(--line); background: var(--deep); text-decoration: none; --tick: var(--line-2); }
.shot img { width: 100%; aspect-ratio: 2796 / 1100; object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.media__side .shot img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.shot:hover img { transform: scale(1.05); }
.shot:hover { --tick: var(--gold); border-color: var(--line-2); }
.shot__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 28px 14px 11px;
  background: linear-gradient(transparent, rgba(7, 8, 11, .9));
  font: 600 .74rem/1.3 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
@media (max-width: 900px) {
  .media { grid-template-columns: 1fr; }
  .media__side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .media__side .shot { aspect-ratio: 2796 / 1100; }
}
@media (max-width: 600px) {
  .media__side { grid-template-columns: 1fr; }
  .media__row { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .media__row .shot { scroll-snap-align: start; }
  .trailer__play { width: 64px; height: 64px; }
  .trailer__cap strong { font-size: 1.1rem; }
}

/* ---------- Timeline (battle-pass style track) ---------- */
.track-wrap { position: relative; }
.track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 272px; gap: 0; overflow-x: auto; scroll-snap-type: x proximity; list-style: none; margin: 0;
  padding: 0 0 18px; scrollbar-width: thin; scrollbar-color: var(--gold-3) transparent; overscroll-behavior-x: contain;
}
.node { position: relative; scroll-snap-align: start; padding: 50px 18px 0 0; }
.node::before { content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 2px; background: var(--gold-3); }
.node--next::before { background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 12px); }
.node__dot { position: absolute; left: 8px; top: 11px; width: 16px; height: 16px; transform: rotate(45deg); background: var(--cream); box-shadow: 0 0 0 4px var(--void), 0 0 18px rgba(241, 220, 170, .4); }
.node--next .node__dot { background: var(--void); border: 1px solid var(--line-2); box-shadow: 0 0 0 4px var(--void); }
.node__card { display: grid; gap: 10px; height: 100%; padding: 18px 18px 20px; border: 1px solid var(--line); background: rgba(236, 229, 211, .025); }
.node--next .node__card { border-style: dashed; background: transparent; }
.node__meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.node__meta .label { font-size: .7rem; letter-spacing: .16em; }
.node__ver { font: 700 .74rem/1 var(--font-ui); letter-spacing: .1em; color: var(--gold); white-space: nowrap; }
.node--next .node__ver { color: var(--ink-3); display: inline-flex; gap: 6px; align-items: center; }
.node h3 { font-size: 1.12rem; line-height: 1.25; }
.node p { font-size: .93rem; line-height: 1.55; color: var(--ink-2); }
.node--now { padding-left: 0; }
.now-flag {
  position: absolute; left: -1px; top: 0; bottom: -18px; width: 1px; background: linear-gradient(var(--gold-2), transparent);
}
.now-flag span {
  position: absolute; left: 34px; top: 10px; padding: 4px 8px 3px; white-space: nowrap; background: var(--gold-2); color: var(--on-cream);
  font: 700 .66rem/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase;
}
.track-ctrl { display: flex; gap: 10px; }
.track-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }
.legend { display: flex; flex-wrap: wrap; gap: 18px; color: var(--ink-3); }
.legend span { display: inline-flex; align-items: center; gap: 8px; font: 600 .72rem/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; }
.legend i { width: 9px; height: 9px; transform: rotate(45deg); background: var(--cream); }
.legend i.o { background: transparent; border: 1px solid var(--line-2); }

/* ---------- Explore tiles ---------- */
.explore { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.explore__art { position: relative; justify-self: center; width: min(100%, 360px); aspect-ratio: 298 / 621; max-height: 620px; }
.explore__art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .7)); }
.explore__art::before { content: ""; position: absolute; inset: 20% -10% 0; background: radial-gradient(ellipse at 50% 60%, rgba(160, 90, 220, .22), transparent 65%); z-index: -1; }
.explore__main { display: grid; gap: 30px; }
/* Spine character animation: the still picture shows until the animation is playing */
.explore__art--anim { width: min(100%, 430px); aspect-ratio: 1213 / 1829; max-height: 690px; }
.spine { position: absolute; inset: 0; }
.spine__still { position: absolute; inset: 0; transition: opacity .6s ease; }
.spine__stage { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .7)); }
.spine.is-live .spine__stage { opacity: 1; }
.spine.is-live .spine__still { opacity: 0; }
.spine .spine-player { width: 100%; height: 100%; background: none; }
.spine .spine-player canvas { display: block; width: 100%; height: 100%; border-radius: 0; }
.spine .spine-player-hidden, .spine .spine-player-controls, .spine .spine-player-error { display: none !important; }
.tiles { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 14px; }
.tile {
  position: relative; display: grid; align-content: end; gap: 6px; min-height: 230px; padding: 20px; overflow: hidden; isolation: isolate;
  text-decoration: none; border: 1px solid var(--line); background: var(--raise); transition: border-color .3s;
}
.tile:hover { border-color: var(--gold); --tick: var(--gold); }
.tile__bg { position: absolute; inset: 0; z-index: -1; }
.tile__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1), opacity .4s; }
.tile:hover .tile__bg img { transform: scale(1.06); opacity: .7; }
.tile__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 8, 11, .05), rgba(7, 8, 11, .92) 78%); }
.tile h3 { font-size: 1.45rem; }
.tile p { font-size: .9rem; line-height: 1.45; color: var(--ink-2); }
.tile__go { position: absolute; right: 16px; top: 16px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line-2); background: rgba(7, 8, 11, .5); transition: background .25s, color .25s; }
.tile:hover .tile__go { background: var(--cream); color: var(--on-cream); border-color: var(--cream); }
.tile__go .ic { width: 15px; height: 15px; }
.faces { position: absolute; left: 20px; top: 20px; display: flex; }
.faces img:first-child { margin-left: 0; }
.faces img { width: 64px; height: 64px; margin-left: -14px; object-fit: contain; filter: grayscale(1) contrast(1.1); }
.tile:hover .faces img { filter: none; }
.tile--soon .tile__bg img { filter: grayscale(.6); }
@media (max-width: 1000px) {
  .explore { grid-template-columns: 1fr; }
  .explore__art { display: none; }
  .explore__art--anim { display: block; width: auto; height: min(72vw, 440px); max-width: 100%; }
}
@media (max-width: 720px) { .tiles { grid-template-columns: 1fr; } .tile { min-height: 190px; } }

/* ---------- Community / download ---------- */
.join { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.socials { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.social {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
  min-height: 92px; padding: 18px 20px; text-decoration: none; border: 1px solid var(--line); background: var(--raise); transition: border-color .25s, background .25s;
}
.social:hover { border-color: var(--line-2); background: #181b22; --tick: var(--gold); }
.social > .ic:first-child { width: 28px; height: 28px; color: var(--ink); }
.social > .ic:last-child { width: 14px; height: 14px; color: var(--ink-3); }
.social strong { display: block; font: 700 1.05rem/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }
.social span { font-size: .88rem; color: var(--ink-3); overflow-wrap: anywhere; }
.download {
  position: relative; display: grid; align-content: space-between; gap: 26px; padding: clamp(24px, 3vw, 36px); overflow: hidden; isolation: isolate;
  border: 1px solid var(--line); background: var(--raise); --tick: var(--gold);
}
.download__bg { position: absolute; inset: 0; z-index: -1; }
.download__bg img { position: absolute; right: -6%; top: 0; height: 100%; width: 72%; object-fit: cover; object-position: 30% 20%; opacity: .5; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }
.download h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); max-width: 14ch; }
.download p { color: var(--ink-2); max-width: 40ch; }
.download__links { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.textlink { display: inline-flex; align-items: center; gap: 8px; font: 700 .8rem/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; }
.textlink:hover { border-bottom-color: var(--gold); }
.textlink .ic { width: 14px; height: 14px; }
@media (max-width: 1000px) { .join { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .socials { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--line); background: var(--deep); padding-block: 64px calc(32px + env(safe-area-inset-bottom, 0px)); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.foot__brand { display: grid; gap: 18px; align-content: start; }
.foot__brand p { font-size: .92rem; color: var(--ink-3); max-width: 36ch; }
.foot h4 { font: 700 .76rem/1 var(--font-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot li a { font-size: .95rem; color: var(--ink-2); text-decoration: none; }
.foot li a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot__icons { display: flex; gap: 10px; }
.foot__icons a { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--ink-2); transition: color .2s, border-color .2s, background .2s; }
.foot__icons a:hover { color: var(--on-cream); background: var(--cream); border-color: var(--cream); }
.foot__icons .ic { width: 18px; height: 18px; }
.mail { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mail code { font: 500 .92rem/1.4 var(--font-body); color: var(--ink-2); user-select: all; }
.copybtn { padding: 4px 9px; border: 1px solid var(--line-2); background: transparent; cursor: pointer; font: 700 .64rem/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.copybtn:hover { color: var(--ink); border-color: var(--gold); }
.foot__legal { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 32px; font-size: .84rem; color: var(--ink-3); }
.foot__legal p { max-width: 80ch; }
.foot__legal nav { display: flex; gap: 20px; }
.foot__legal a { color: var(--ink-2); }
@media (max-width: 900px) { .foot__grid { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .foot__grid { grid-template-columns: 1fr; } }

/* ---------- Sub-pages ---------- */
.page-hero { position: relative; overflow: clip; isolation: isolate; padding-top: calc(var(--hud-h) + clamp(56px, 9vw, 110px)); padding-bottom: clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--line); }
.page-hero__bg { position: absolute; inset: 0; z-index: -1; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.page-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 8, 11, .7), var(--void) 96%), radial-gradient(rgba(236, 229, 211, .07) 1px, transparent 1.3px) 0 0 / 4px 4px; }
.page-hero__inner { display: grid; gap: 22px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 600 .76rem/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.crumbs > span { min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.crumbs a { color: var(--ink-2); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.crumbs a:hover { color: var(--gold); }
.crumbs .ic { width: 14px; height: 14px; }
.crumbs i { width: 5px; height: 5px; background: var(--gold-3); transform: rotate(45deg); }

/* Team */
.team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-inline: auto; }
.team-grid--core { max-width: 900px; }
.team-grid--with, .team-grid--past { max-width: 1200px; }
.team-grid .member { flex: 0 1 270px; }
@media (max-width: 600px) { .team-grid .member { flex-basis: 100%; } }
/* Team cards: the card tilts toward the pointer (site.js sets --rx/--ry and the light position);
   the portrait and text float above it, and a sheen follows the light. */
.member { position: relative; display: grid; text-decoration: none; perspective: 1000px; }
.member__card {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 26px 20px 22px; text-align: center;
  border: 1px solid var(--line); background: linear-gradient(180deg, rgba(236, 229, 211, .04), rgba(236, 229, 211, 0));
  transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  box-shadow: var(--sx, 0px) var(--sy, 0px) var(--sb, 0px) rgba(0, 0, 0, var(--sa, 0));
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), border-color .3s, background .3s, box-shadow .5s;
}
.member.is-tilting .member__card { transition: transform .12s ease-out, border-color .3s, background .3s, box-shadow .2s; }
.member:hover .member__card, .member:focus-visible .member__card { border-color: var(--gold); --tick: var(--gold); background: linear-gradient(180deg, rgba(215, 188, 131, .1), rgba(236, 229, 211, .01)); }
.member:focus-visible { outline: none; }
.member:focus-visible .member__card { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.member__portrait, .member__name, .member__alias, .member__role, .member__link { transition: transform .7s cubic-bezier(.2, .8, .2, 1), color .3s; }
.member:hover .member__portrait { transform: translateZ(70px); }
.member:hover .member__name, .member:hover .member__alias { transform: translateZ(42px); }
.member:hover .member__role, .member:hover .member__link { transform: translateZ(26px); }
.member__portrait { position: relative; width: 170px; height: 170px; margin-bottom: 14px; display: grid; place-items: center; transform-style: preserve-3d; }
.member__portrait::before { content: ""; position: absolute; inset: 22px; border: 1px solid var(--gold-3); transform: rotate(45deg); transition: border-color .3s, inset .4s, box-shadow .4s; }
.member__portrait::after { content: ""; position: absolute; inset: 36px; background: radial-gradient(circle, rgba(138, 108, 60, .35), transparent 70%); transform: rotate(45deg); z-index: -1; }
.member:hover .member__portrait::before { border-color: var(--gold); inset: 16px; box-shadow: 0 0 24px rgba(215, 188, 131, .25), inset 0 0 18px rgba(215, 188, 131, .12); }
.member__portrait > * { grid-area: 1 / 1; }
.member__portrait :is(img, canvas) { position: relative; width: 150px; height: 150px; object-fit: contain; filter: grayscale(1); transition: filter .4s, transform .7s cubic-bezier(.2, .8, .2, 1); }
.member:hover .member__portrait :is(img, canvas) { transform: translateZ(30px); }
.member:hover .member__portrait :is(img, canvas) { filter: grayscale(0) brightness(1.06) drop-shadow(0 14px 18px rgba(0, 0, 0, .55)); }
/* Hover surprise (site.js): the canvas with the dissolve takes the photo's place; speech bubbles outside the card */
.member.is-egg, .member.is-talking { z-index: 3; }
.member.is-egg .member__portrait img { opacity: 0; }
.egg { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.egg__bubble {
  position: absolute; padding: 7px 16px 8px; white-space: nowrap; font: 500 1.1rem/1.25 var(--font-body); color: var(--gold);
  background: rgba(20, 20, 22, .94); box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
  opacity: 0; transform: translateY(10px) scale(.92); transition: opacity .28s ease, transform .42s cubic-bezier(.2, 1.5, .4, 1);
}
.egg__bubble.is-on { opacity: 1; transform: none; }
.member__name { font: 600 1.18rem/1.25 var(--font-display); color: var(--ink); }
.member__alias { font: 600 .82rem/1.3 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.member__role { margin-top: 6px; font-size: .92rem; color: var(--ink-2); }
.member__link { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; font: 700 .7rem/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.member:hover .member__link { color: var(--ink); }
.member__link .ic { width: 12px; height: 12px; }
.member__shine {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; transform: translateZ(1px); mix-blend-mode: screen;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 236, 200, .32), rgba(255, 236, 200, .08) 30%, transparent 55%),
    linear-gradient(115deg, transparent 28%, rgba(241, 220, 170, .16) 42%, rgba(143, 201, 255, .16) 50%, rgba(214, 170, 255, .13) 57%, transparent 70%) var(--hx, 50%) 50% / 300% 100% no-repeat;
}
.member:hover .member__shine { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .member__card, .member__card > * { transform: none !important; transition: border-color .3s, background .3s, color .3s; }
}

/* Gallery */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filter {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(236, 229, 211, .03); color: var(--ink-2);
  font: 700 .8rem/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; transition: background .2s, color .2s, border-color .2s;
}
.filter:hover { border-color: var(--line-2); color: var(--ink); }
.filter[aria-pressed="true"] { background: var(--cream); color: var(--on-cream); border-color: var(--cream); }
.filter b { font-variant-numeric: tabular-nums; opacity: .6; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.g-item { position: relative; display: block; overflow: hidden; text-decoration: none; border: 1px solid var(--line); background: var(--deep); --tick: var(--line-2); }
.g-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .2, 1), filter .4s; }
.g-item:hover img { transform: scale(1.05); }
.g-item:hover { --tick: var(--gold); border-color: var(--line-2); }
.g-item__cap { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 14px 12px; border-top: 1px solid var(--line); }
.g-item__cap span:first-child { font-size: .92rem; color: var(--ink); }
.g-item__cap .label { font-size: .64rem; letter-spacing: .16em; color: var(--ink-3); white-space: nowrap; }
.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .strip { grid-template-columns: 1fr 1fr; } .strip > :nth-child(3) { display: none; } }

/* Lightbox */
.lb { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: rgba(5, 6, 8, .96); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); animation: fadeIn .25s ease both; }
.lb__top, .lb__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.lb__count { font: 700 .95rem/1 var(--font-ui); letter-spacing: .14em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* one cell of a fixed size, so a tall picture (a chibi, a sketch) fits the screen's height as a wide one fits its width */
.lb__stage { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; min-height: 0; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
.lb__stage img { max-width: 100%; max-height: 100%; object-fit: contain; border: 1px solid var(--line); background: var(--deep); opacity: 0; transition: opacity .15s ease; }
.lb__stage img.is-shown { opacity: 1; }
/* while a picture loads (shown only after a moment, so cached pictures don't flash it): a turning gold diamond */
.lb__stage::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; pointer-events: none;
  border: 2px solid var(--gold); box-shadow: 0 0 14px rgba(215, 188, 131, .35); transform: rotate(45deg); opacity: 0; transition: opacity .2s;
}
.lb__stage.is-loading::after { opacity: 1; animation: lbWait 1.1s ease-in-out infinite; }
@keyframes lbWait { 0% { transform: rotate(45deg) scale(.85); } 50% { transform: rotate(225deg) scale(1.1); } 100% { transform: rotate(405deg) scale(.85); } }
.lb__cap { font: 600 1.05rem/1.4 var(--font-display); color: var(--ink); }
.lb__btn { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line-2); background: rgba(7, 8, 11, .6); cursor: pointer; flex: none; }
.lb__btn:hover { border-color: var(--gold); background: rgba(236, 229, 211, .08); }
.lb__btn .ic { width: 20px; height: 20px; }
.lb__nav { display: flex; gap: 10px; }

/* Marketplace */
.shop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: clamp(28px, 4vw, 56px); align-items: start; }
.slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 641px) { .slots--d3 .slot:last-child { grid-column: span 2; aspect-ratio: auto; min-height: 180px; } }
@media (max-width: 640px) { .slots--m-odd .slot:last-child { grid-column: span 2; aspect-ratio: auto; min-height: 180px; } }
@media (max-width: 640px) { .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.slot {
  position: relative; display: grid; grid-template-rows: 1fr auto; aspect-ratio: 3 / 4; overflow: hidden;
  border: 1px solid var(--line); background:
    radial-gradient(circle at 50% 40%, rgba(215, 188, 131, .12), transparent 60%),
    linear-gradient(180deg, #16191f, #0e1015);
}
.slot__icon { display: grid; place-items: center; color: var(--gold); }
.slot__icon > span { width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid var(--line-2); transform: rotate(45deg); }
.slot__icon .ic { width: 26px; height: 26px; transform: rotate(-45deg); }
.slot__name { padding: 10px 12px 12px; font: 700 .78rem/1.3 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); border-top: 1px solid var(--line); background: rgba(7, 8, 11, .5); }
.slot > .ic { position: absolute; right: 10px; top: 10px; width: 16px; height: 16px; color: var(--ink-3); }
.slot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-3), transparent); }
.cur { display: grid; gap: 14px; }
.cur__item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px; border: 1px solid var(--line); background: var(--raise); }
.gem { width: 56px; height: 56px; display: grid; place-items: center; }
.gem i { width: 34px; height: 34px; transform: rotate(45deg); background: var(--g, var(--gold)); box-shadow: 0 0 22px color-mix(in srgb, var(--g, var(--gold)) 55%, transparent), inset 0 0 0 4px rgba(255, 255, 255, .18); }
.cur__item h3 { font: 700 1.05rem/1.2 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.cur__item p { margin-top: 6px; font-size: .94rem; line-height: 1.55; color: var(--ink-2); }
.notice { margin-top: 40px; padding: 20px 22px; border: 1px solid var(--line); border-left: 2px solid var(--gold-3); font-size: .86rem; line-height: 1.6; color: var(--ink-3); display: grid; gap: 10px; }
.soon__dot { width: 12px; height: 12px; transform: rotate(45deg); border: 1px solid var(--gold); position: relative; }
.soon__dot::after { content: ""; position: absolute; inset: 2px; background: var(--gold); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .15; } }
/* "Coming soon" on the marketplace: a gold-edged plate with a pulsing beacon, gold lettering that a light runs
   across, a sweep over the plate and a slow glow. With reduced motion it's the same plate, standing still. */
.soon { justify-self: start; display: inline-flex; max-width: 100%; filter: drop-shadow(0 0 14px rgba(215, 188, 131, .28)); animation: soon-glow 2.8s ease-in-out infinite; }
.soon__plate {
  --cut: 14px;
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: clamp(14px, 2vw, 22px);
  padding: clamp(13px, 1.6vw, 18px) clamp(22px, 3vw, 36px) clamp(13px, 1.6vw, 18px) clamp(18px, 2.2vw, 26px);
  background: linear-gradient(90deg, var(--gold), rgba(215, 188, 131, .35) 60%, rgba(215, 188, 131, .75));
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.soon__plate::before {
  content: ""; position: absolute; inset: 1px; z-index: -1;
  background: radial-gradient(110% 160% at 0% 50%, rgba(215, 188, 131, .26), transparent 62%), linear-gradient(90deg, #17150f, #0c0d11 75%);
  clip-path: polygon(calc(var(--cut) - .6px) 0, 100% 0, 100% calc(100% - var(--cut) + .6px), calc(100% - var(--cut) + .6px) 100%, 0 100%, 0 calc(var(--cut) - .6px));
}
.soon__plate::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 244, 214, .16) 40%, rgba(255, 244, 214, .34) 50%, rgba(255, 244, 214, .16) 60%, transparent);
  transform: translateX(-130%) skewX(-18deg); animation: soon-sweep 3.4s cubic-bezier(.4, 0, .2, 1) infinite;
}
.soon__text {
  font: 700 clamp(1.35rem, 2.6vw + .4rem, 2.6rem)/1 var(--font-ui); letter-spacing: .26em; margin-right: -.26em; text-transform: uppercase; white-space: nowrap;
  background: linear-gradient(100deg, var(--gold) 0 38%, #fff7e0 48%, var(--gold-2) 52%, var(--gold) 62% 100%) 0 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: soon-shine 3.4s linear infinite;
}
.soon__beacon { position: relative; flex: none; width: 14px; height: 14px; }
.soon__beacon::before { content: ""; position: absolute; inset: 0; background: var(--gold-2); transform: rotate(45deg); box-shadow: 0 0 12px var(--gold), 0 0 26px rgba(215, 188, 131, .6); animation: blink 1.6s ease-in-out infinite; }
.soon__beacon i, .soon__beacon::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--gold-2); transform: rotate(45deg); opacity: 0; animation: soon-ring 1.8s ease-out infinite; }
.soon__beacon::after { animation-delay: .9s; }
@keyframes soon-ring { 0% { transform: rotate(45deg) scale(.7); opacity: .9; } 100% { transform: rotate(45deg) scale(2.8); opacity: 0; } }
@keyframes soon-sweep { 0%, 30% { transform: translateX(-130%) skewX(-18deg); } 72%, 100% { transform: translateX(330%) skewX(-18deg); } }
@keyframes soon-shine { from { background-position: 100% 0; } to { background-position: -160% 0; } }
@keyframes soon-glow { 50% { filter: drop-shadow(0 0 26px rgba(215, 188, 131, .5)); } }
@media (prefers-reduced-motion: reduce) {
  .soon, .soon__text, .soon__beacon::before, .soon__beacon::after, .soon__beacon i { animation: none; }
  .soon__plate::after { display: none; }
  .soon__text { background-position: 75% 0; }
}
@media (max-width: 900px) { .shop { grid-template-columns: 1fr; } }

/* Legal documents */
.doc { display: grid; grid-template-columns: minmax(200px, 270px) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.toc { position: sticky; top: calc(var(--hud-h) + env(safe-area-inset-top, 0px) + 24px); display: grid; gap: 2px; padding: 18px; border: 1px solid var(--line); background: var(--raise); }
.toc .label { margin-bottom: 10px; color: var(--gold); }
.toc a { display: block; padding: 7px 0 7px 12px; border-left: 1px solid var(--line); font-size: .9rem; line-height: 1.35; color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--ink); border-left-color: var(--gold); }
.doc__body { max-width: 70ch; display: grid; gap: 18px; color: var(--ink-2); font-size: 1.02rem; }
.doc__body h2 { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); font: 600 1.4rem/1.25 var(--font-display); color: var(--ink); scroll-margin-top: calc(var(--hud-h) + 24px); }
.doc__body h3 { font: 700 .98rem/1.4 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.doc__body ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.doc__body li { position: relative; padding-left: 22px; }
.doc__body li::before { content: ""; position: absolute; left: 3px; top: .72em; width: 6px; height: 6px; background: var(--gold-3); transform: rotate(45deg); }
.doc__body a { color: var(--gold); }
.doc__meta { display: flex; flex-wrap: wrap; gap: 10px; }
.doc__note { max-width: 62ch; margin-top: 4px; font-size: .9rem; line-height: 1.55; color: var(--ink-3); }
.doc__note a { color: var(--gold-2); }
@media (max-width: 900px) { .doc { grid-template-columns: 1fr; } .toc { position: static; } }

/* 404 */
.lost { min-height: 72vh; display: grid; place-items: center; text-align: center; padding-top: var(--hud-h); }
.lost__inner { display: grid; gap: 22px; justify-items: center; }
.lost__code { font: 700 clamp(5rem, 16vw, 10rem)/1 var(--font-display); color: transparent; -webkit-text-stroke: 1px var(--gold); }

/* Trailer modal (deploy build only) */
.vmodal { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: rgba(5, 6, 8, .94); }
.vmodal__box { position: relative; width: min(1100px, 100%); aspect-ratio: 16 / 9; border: 1px solid var(--line-2); background: #000; }
.vmodal__box iframe { width: 100%; height: 100%; border: 0; display: block; }
.vmodal .lb__btn { position: absolute; right: 0; top: -60px; }

/* Long words (Russian, Romanian, Portuguese…) never push a heading past the screen: they hyphenate where the
   browser can, and break as a last resort. */
:is(h1, h2, h3) { overflow-wrap: anywhere; }
html:is(:lang(ru), :lang(ro), :lang(pt-BR)) :is(h1, h2, h3, .lede) { hyphens: auto; -webkit-hyphens: auto; }

/* ---------- Other languages ----------
   Russian uses Cormorant SC and Tektur for the Cyrillic letters (fonts.css). Japanese and Korean use the
   visitor's own fonts, which are good on every system: mincho/myeongjo for headings (like Cinzel), gothic for
   labels and text. Wide letter-spacing suits Latin capitals, not these scripts, so it's reduced there. */
html:lang(ja) {
  --font-display: "Cinzel", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
  --font-ui: "Rajdhani", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  --font-body: "Barlow", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  line-break: strict;
}
html:lang(ko) {
  --font-display: "Cinzel", "AppleMyungjo", "Nanum Myeongjo", "Noto Serif KR", "Noto Serif CJK KR", "Batang", serif;
  --font-ui: "Rajdhani", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", sans-serif;
  --font-body: "Barlow", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", sans-serif;
  word-break: keep-all;
}
html:lang(ja) body, html:lang(ko) body { line-height: 1.75; }
/* Japanese has no spaces between words: break headings at natural phrase boundaries (Chrome; elsewhere the usual rules) */
html:lang(ja) :is(h1, h2, h3, .hero__title, .t-xl, .t-l, .t-m, .t-s, .lede, .cpanel__epithet, .sys__tab-title) { word-break: auto-phrase; }
html:is(:lang(ja), :lang(ko)) :is(.label, .nav a, .btn, .chip, .roster__tag, .chapter__name, .chapter__tag, .story__boss-name, .lang__btn, .store__small, .filter, .sys__tab-sub, .node__ver, .stat .label, .member__role, .crumbs, .soon__text, .cpanel__epithet, .brand__sub) { letter-spacing: .06em; }
html:is(:lang(ja), :lang(ko)) :is(h1, h2, h3, .t-xl, .t-l, .t-m, .t-s) { letter-spacing: .02em; line-height: 1.3; }

/* ---------- Wide and ultrawide screens (2200px and up: 2560×1080, 2560×1440, 3440×1440, 3840×1600…) ----------
   The content column is already wider here (--wrap). These rules recompose the full-bleed screens
   around it, use the extra width side by side rather than making pictures taller, and step type up. */
@media (min-width: 2200px) {
  .t-xl { font-size: clamp(4.6rem, calc(.8vw + 3.5rem), 5.4rem); }
  .t-l { font-size: clamp(3.3rem, calc(.6vw + 2.475rem), 3.9rem); }
  .t-m { font-size: clamp(1.9rem, calc(.3vw + 1.4875rem), 2.25rem); }
  .lede { font-size: 1.22rem; }

  /* Hero: as tall as the screen allows; the video stays close to its own shape (so heads aren't
     cropped off) and sits beside the text rather than stretching across the whole window. */
  .hero { --hero-h: min(92vh, 1240px); }
  .hero__inner { min-height: var(--hero-h); }
  .hero__media { left: max(20%, calc(100% - var(--hero-h) * 1.95)); }

  /* Champions: the splash art is centred between the roster and the panel (not on the window's left
     edge), shown at about its own proportions, and fades out on both sides. */
  .champs__inner { grid-template-columns: auto minmax(0, 1fr) minmax(360px, 470px); min-height: clamp(540px, 66vh, 860px); }
  .champs__stage {
    left: max(0px, calc(50% - var(--wrap) / 2 - 260px)); width: calc(var(--wrap) * .72 + 422px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 15%, #000 66%, transparent 100%), linear-gradient(180deg, transparent 0, #000 20%);
    mask-image: linear-gradient(90deg, transparent 0, #000 15%, #000 66%, transparent 100%), linear-gradient(180deg, transparent 0, #000 20%);
  }
  .champs__ghost { left: max(-.03em, calc(50% - var(--wrap) / 2 - 320px)); font-size: 17rem; }
  .cpanel { padding: 34px 34px 30px; }
  .cpanel__name { font-size: 4.3rem; }
  .cpanel__desc { font-size: 1.05rem; }

  /* Gameplay: a wider text column beside the picture */
  .sys__view { grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); gap: 26px 56px; }
  .sys__view--tree { grid-template-columns: minmax(0, 1fr); }

  .world { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .inspect { max-width: min(680px, calc((100vh - 140px) * .8)); }
  .explore__art--anim { width: min(100%, 520px); max-height: 820px; }
  .tile { min-height: 280px; }
  .track { grid-auto-columns: 300px; }
  /* Marketplace: up to eight categories sit in one row like an inventory bar (render sets --n) */
  .slot { aspect-ratio: 1; }
  .slots--row { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
  .slots--row .slot, .slots--row .slot:last-child { grid-column: auto; aspect-ratio: 3 / 4; min-height: 0; }
  .slots--row .slot__name { min-height: calc(2.6em + 22px); display: flex; align-items: flex-end; }
  /* Legal pages: contents on the left, the text column centred on the screen */
  .doc { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); }
  .doc__body { justify-self: center; width: 100%; max-width: 74ch; font-size: 1.06rem; }
  .vmodal__box { width: min(100%, calc((100vh - 160px) * 16 / 9), 1800px); }
}
/* Wide and tall (2560×1440, 3440×1440, 3840×1600): the hero text and roster scale up with the canvas.
   Wide but short screens (2560×1080) keep the standard sizes so everything stays above the fold. */
@media (min-width: 2200px) and (min-height: 1100px) {
  .hero__inner { gap: 64px; padding-bottom: 48px; }
  .hero__content { max-width: 700px; gap: 30px; }
  .hero__logo { width: 520px; }
  .hero__title { font-size: 3rem; }
  .hero__text { font-size: 1.24rem; }
  .hero__stats { max-width: 900px; }
  .stat { padding: 22px 26px 20px; }
  .stat__v { font-size: 2.1rem; }
  .roster-col { --rb: 88px; }
}
/* Super-ultrawide (5120×1440, 32:9): keep the hero video and the champion glow beside the content
   instead of out at the window's far edge. */
@media (min-width: 4000px) {
  .hero__media {
    left: auto; right: max(0px, calc(50% - var(--wrap) / 2 - 700px)); width: calc(var(--hero-h) * 1.95);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%, #000 80%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 30%, #000 80%, transparent 100%);
  }
  .champs::before { right: calc(50% - var(--wrap) / 2 - 1100px); }
}
@media (min-width: 2780px) {
  /* Room for six team cards in a row; --row (set on each grid) keeps the rows even */
  .team-grid--core, .team-grid--with, .team-grid--past { max-width: calc(var(--row, 6) * 288px - 18px); }
}

/* Utility */
.mt-l { margin-top: clamp(40px, 6vw, 72px); }
.center-row { display: flex; justify-content: center; }
.row-between { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }

:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}