/* The forest of the map behind everything, the logo's language without its bird: sculpted dark wings, teal on one side and red on the other, molten letters.
   Each hero sits where the bird would be. Dark plates over the scene hold what a player reads. */
@font-face { font-family: Cinzel; font-weight: 900; src: url(/fonts/cinzel-latin-900-normal.woff2) format('woff2'); font-display: swap }
@font-face { font-family: Barlow; font-weight: 400; src: url(/fonts/barlow-latin-400-normal.woff2) format('woff2'); font-display: swap }
@font-face { font-family: Barlow; font-weight: 500; src: url(/fonts/barlow-latin-500-normal.woff2) format('woff2'); font-display: swap }
@font-face { font-family: 'Barlow Condensed'; font-weight: 500; src: url(/fonts/barlow-condensed-latin-500-normal.woff2) format('woff2'); font-display: swap }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; src: url(/fonts/barlow-condensed-latin-600-normal.woff2) format('woff2'); font-display: swap }
/* Cinzel and Barlow have no Thai letters: these fill in, and only load on a page that holds some. */
@font-face { font-family: Kanit; font-weight: 400; src: url(/fonts/kanit-thai-400-normal.woff2) format('woff2'); font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC }
@font-face { font-family: Kanit; font-weight: 600; src: url(/fonts/kanit-thai-600-normal.woff2) format('woff2'); font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC }

:root {
  --ground: #060908; --panel: rgba(13, 16, 15, .88); --line: rgba(236, 228, 208, .1); --text: #f0ebdf; --soft: #c4bfb2; --muted: #918d82;
  --gold: #f4b43e; --good: #5fd9bb; --bad: #f4623c; --scene: url(/art/forest.webp);
  --display: Cinzel, Kanit, Georgia, serif; --label: 'Barlow Condensed', Kanit, 'Arial Narrow', sans-serif; --body: Barlow, Kanit, system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100% }
body { position: relative; isolation: isolate; margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--ground); color: var(--text); font: 400 16px/1.45 var(--body) }
/* The forest stands at the top of the page and falls to black, like the poster of a film: it leaves with the scroll and the numbers are read on black. */
body::before { content: ''; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: max(780px, 100vh); pointer-events: none; background: linear-gradient(rgba(6, 9, 8, .12), rgba(6, 9, 8, .3) 30%, rgba(6, 9, 8, .74) 60%, var(--ground) 94%), radial-gradient(120% 90% at 50% 18%, transparent 34%, rgba(4, 6, 6, .62) 100%), var(--scene) 50% 86% / 132% no-repeat }
a { color: inherit; text-decoration: none }
img { display: block }
h1, h2, h3, p { margin: 0 }
.wrap { width: 100%; max-width: 1340px; margin: 0 auto; padding-left: 16px; padding-right: 16px }
/* ---- the menu: the same place on every page. The logo on the left, the words beside it, the languages at the end. No bar: the forest goes up to the top of the screen under a fall from black, his choice among three. */
.top { position: relative; z-index: 5; background: linear-gradient(rgba(3, 5, 5, .92), rgba(3, 5, 5, .55) 62%, transparent) }
.plate { display: flex; align-items: center; gap: 34px; height: 72px }
.mark { display: block; flex: none; width: 176px; transition: transform .25s var(--ease), filter .25s }
.mark:hover { transform: translateY(-1px); filter: brightness(1.12) }
nav { flex: 1; display: flex; align-items: stretch; align-self: stretch; gap: 4px; min-width: 0 }
.tab { position: relative; display: flex; align-items: center; padding: 0 16px; white-space: nowrap; font: 900 15px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: #e4decf; text-shadow: 0 1px 0 #000, 0 0 8px rgba(0, 0, 0, .8); transition: color .15s }
.tab span { position: relative; top: 1px }
/* Under the word, a line of hot metal: half for the one the pointer is on, whole for the page we are on. */
.tab::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: linear-gradient(90deg, transparent, #ffb648 18%, #ffd27a 50%, #ffb648 82%, transparent); box-shadow: 0 0 10px rgba(255, 150, 40, .75); transform: scaleX(0); transition: transform .22s var(--ease) }
.tab:hover { color: #ffd98c }
.tab:hover::after { transform: scaleX(.5) }
.tab[aria-current] { color: #ffcb6a; text-shadow: 0 1px 0 #000, 0 0 12px rgba(255, 140, 30, .55) }
.tab[aria-current]::after { transform: scaleX(1) }
.langs { align-self: center; flex: none; display: flex; gap: 2px; margin-left: auto; font: 600 14px/1 var(--label); letter-spacing: .06em }
.langs a { padding: 6px 7px; color: var(--soft); text-shadow: 0 1px 0 #000, 0 0 8px rgba(0, 0, 0, .8); transition: color .15s }
.langs a:hover { color: #ffd98c }
.langs a[aria-current] { color: #ffc65e }
main { flex: 1; padding-top: 18px; padding-bottom: 56px; overflow-x: clip }

/* ---- the letters in fusion: a heat around them that breathes, and lava that runs where they are bright */
.forge { position: relative; display: block }
.forge img { position: relative; z-index: 1; width: 100%; height: auto }
.forge .aura { position: absolute; left: -12.5%; top: -45.3%; width: 125%; height: 190.6%; background: url(/art/wordmark-aura.webp) center / 100% 100% no-repeat; opacity: .62; pointer-events: none }
.forge .flow { --tile: 300px; position: absolute; z-index: 2; inset: 0; overflow: hidden; -webkit-mask: url(/art/wordmark-hot.webp) center / 100% 100% no-repeat; mask: url(/art/wordmark-hot.webp) center / 100% 100% no-repeat; pointer-events: none }
.forge .flow::before, .forge .flow::after { content: ''; position: absolute; left: 0; top: 0; width: calc(100% + var(--tile)); height: calc(100% + var(--tile)); background: url(/art/lava.webp) 0 0 / var(--tile); opacity: .95 }
.forge .flow::after { left: calc(var(--tile) * -1); opacity: 0; background-size: calc(var(--tile) * .75) }
.mark .forge .flow { --tile: 96px }
.logo .flow { --tile: 300px }
/* ---- the wings' energy: teal on one side, red on the other, taken from the logo's own painting */
.wing .halo { position: absolute; inset: 0; background: center / contain no-repeat; opacity: .42 }
.wing .veins { position: absolute; inset: 0; background: center / contain no-repeat; opacity: .62 }
.wing .surge { position: absolute; inset: 0; overflow: hidden; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat }
.wing .surge::after { content: ''; position: absolute; top: 0; bottom: 0; width: 300%; background: linear-gradient(90deg, transparent 38%, var(--surge) 48%, var(--surge) 52%, transparent 62%); opacity: 0 }
.wing.l { --surge: #e4fff8 }
.wing.r { --surge: #ffe2b0 }
.wing.l .halo { background-image: url(/art/wing-l-halo.webp) }
.wing.r .halo { background-image: url(/art/wing-r-halo.webp) }
.wing.l .veins { background-image: url(/art/wing-l-energy.webp) }
.wing.r .veins { background-image: url(/art/wing-r-energy.webp) }
.wing.l .surge { -webkit-mask-image: url(/art/wing-l-energy.webp); mask-image: url(/art/wing-l-energy.webp) }
.wing.r .surge { -webkit-mask-image: url(/art/wing-r-energy.webp); mask-image: url(/art/wing-r-energy.webp) }
.sparks { position: absolute; z-index: 6; top: 0; left: 0; width: 100%; pointer-events: none }

/* ---- the banner: the hero between the two wings, the home's wordmark between them */
.who, .lead { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4px 0 18px }
.who > div { display: contents }
.who > img { position: relative; z-index: 2; width: 104px; height: 104px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #8c6a2e, 0 6px 24px rgba(0, 0, 0, .8) }
.wing { position: absolute; z-index: 1; top: -40px; width: 310px; height: 266px; background: center / contain no-repeat; pointer-events: none; transition: transform .45s var(--ease) }
.wing.l { right: calc(50% + 44px); background-image: url(/art/wing-l.webp); transform-origin: 100% 62% }
.wing.r { left: calc(50% + 44px); background-image: url(/art/wing-r.webp); transform-origin: 0 62% }
.who:has(> img:hover) .wing.l { transform: rotate(5deg) }
.who:has(> img:hover) .wing.r { transform: rotate(-5deg) }
.who.plain .wing { top: -26px; width: 176px; height: 151px }
.who.plain .wing.l { right: calc(50% + 300px) }
.who.plain .wing.r { left: calc(50% + 300px) }
.who h1, .lead h1, .prose h1 { position: relative; z-index: 2; margin-top: 8px; font: 900 clamp(30px, 4.2vw, 48px)/1.08 var(--display); letter-spacing: .02em; background: linear-gradient(rgba(255, 226, 150, .55), rgba(255, 150, 40, .12) 60%), url(/art/molten.webp) center / 420px; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 #7a4c17) drop-shadow(0 2px 0 #24160a) drop-shadow(0 5px 9px rgba(0, 0, 0, .9)) }
.who.plain h1 { font-size: clamp(26px, 3.2vw, 38px) }
.who p, .lead p { position: relative; z-index: 2; margin-top: 2px; font-size: 15px; opacity: .9 }
.who.plain p { max-width: 560px }
.lead { padding-top: 138px }
.lead h1 { margin-top: 0; font-size: clamp(25px, 3vw, 34px) }
.lead .wing { top: -14px; width: 256px; height: 219px }
.lead .wing.l { right: calc(50% + 262px) }
.lead .wing.r { left: calc(50% + 262px) }
.logo { position: absolute; z-index: 3; left: 50%; top: 4px; width: 590px; margin-left: -295px }

/* ---- the bar that follows the scroll */
.page { position: relative; z-index: 2; display: grid; grid-template-columns: 212px minmax(0, 1fr); gap: 22px; align-items: start }
.rail { position: sticky; top: 14px; max-height: calc(100vh - 28px); overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 14px; padding: 12px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line) }
.fresh { display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 8px; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--line) }
.fresh .dot { position: relative; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--good) }
.fresh.late .dot { background: var(--bad) }
.fresh b { font: 600 16px/1.2 var(--label); letter-spacing: .02em; color: var(--text) }
.fresh.late b { color: var(--bad) }
.fresh small, .fresh a { grid-column: 2; font-size: 13px; line-height: 1.35 }
.fresh small { margin-top: 3px; color: var(--soft) }
.fresh a { margin-top: 5px; width: fit-content; color: var(--gold); box-shadow: inset 0 -1px 0 rgba(244, 180, 62, .35); transition: box-shadow .2s, color .2s }
.fresh a:hover { color: #ffd98c; box-shadow: inset 0 -1px 0 #ffd98c }
.pick h2 { margin-bottom: 5px; font: 600 13px var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.pick .list, .tabs { display: flex; flex-direction: column; gap: 2px }
.pick button, .tabs button { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; width: 100%; padding: 5px 8px 5px 12px; font: 500 15.5px/1.2 var(--label); letter-spacing: .03em; text-align: left; color: var(--soft); background: transparent; border: 0; cursor: pointer; transition: color .15s, background .15s, transform .12s var(--ease) }
.pick button::before, .tabs button::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: var(--gold); transform: scaleY(0); transition: transform .22s var(--ease) }
.pick button:hover, .tabs button:hover { color: #fff; background: rgba(236, 228, 208, .05) }
.pick button:hover::before, .tabs button:hover::before { transform: scaleY(.45) }
.pick button:active, .tabs button:active { transform: translateX(2px) }
.pick button.on, .tabs button.on { color: var(--gold); background: rgba(244, 180, 62, .08) }
.pick button.on::before, .tabs button.on::before { transform: scaleY(1) }
.pick small { font: 500 13px var(--label); letter-spacing: 0; color: var(--muted); font-variant-numeric: tabular-nums }
.pick button.on small { color: var(--gold) }
.pick button.few { color: var(--muted) }
.pick button.few.on { color: var(--gold) }
.mix { margin-top: 6px; color: var(--muted); font-size: 12.5px; line-height: 1.35 }
html:not(.js) [data-pick] { display: none }

input { width: 100%; height: 48px; padding: 0 14px; font: 400 18px var(--body); color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 0; outline: 0; transition: border-color .18s, box-shadow .18s }
input:hover { border-color: rgba(244, 180, 62, .35) }
input:focus { border-color: rgba(244, 180, 62, .85); box-shadow: 0 0 0 1px rgba(244, 180, 62, .3), 0 0 22px rgba(244, 180, 62, .16) }
input::placeholder { color: var(--muted) }
.find { max-width: 440px; margin: 0 auto 8px }
.hint { min-height: 22px; margin-bottom: 14px; text-align: center; color: var(--soft); font-size: 14px }
.rail .find { margin: 0 }
.rail input { height: 40px; font-size: 16px; padding: 0 10px }
.rail .hint { margin: 4px 0 0; min-height: 0; text-align: left; font-size: 12.5px; color: var(--muted) }

/* ---- what the player reads */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 8px }
.tile { display: block; padding: 5px; overflow: hidden; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .16s, transform .16s var(--ease) }
.tile img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform .28s var(--ease), filter .2s }
.tile span { display: block; margin-top: 5px; font: 500 14.5px/1.1 var(--label); letter-spacing: .02em; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: color .15s }
.tile:hover, .tile.first { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--gold), 0 8px 18px rgba(0, 0, 0, .55), 0 0 16px rgba(244, 180, 62, .2) }
.tile:hover img, .tile.first img { transform: scale(1.05); filter: brightness(1.1) saturate(1.08) }
.tile:hover span, .tile.first span { color: var(--gold) }
.tile:active { transform: translateY(0) scale(.98) }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start }
.build h2, .side h2, .kind h2 { margin-bottom: 8px; font: 600 14px var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--soft) }
.build h2 span, .kind h2 span { margin-left: 6px; color: var(--text); text-transform: none; letter-spacing: .02em }
.build + .build { margin-top: 26px }
.js .build:not(.on), .js .vs:not(.on) { display: none }
.js .build + .build { margin-top: 0 }
ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px }
.item { position: relative; overflow: hidden; display: grid; grid-template-columns: 18px 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); transition: background .15s, box-shadow .15s }
.item:hover { background: rgba(14, 18, 17, .94); box-shadow: inset 0 0 0 1px rgba(244, 180, 62, .32) }
.item .nth { font: 900 18px var(--display); color: #a58a57; text-align: center; transition: color .15s }
.item:hover .nth { color: var(--gold) }
.item img { width: 44px; height: 44px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .7); transition: transform .22s var(--ease), box-shadow .2s }
.item:hover > img { transform: scale(1.07); box-shadow: 0 0 0 1px rgba(244, 180, 62, .7), 0 0 12px rgba(244, 180, 62, .25) }
.item b { display: block; font-weight: 500; font-size: 16.5px; line-height: 1.2 }
.item small { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--muted); font-size: 13.5px; line-height: 1.25 }
.item .num { text-align: right; font: 600 15px/1.25 var(--label); white-space: nowrap }
.item .cost { display: block; color: var(--gold) }
.item .unit { font-weight: 500; font-size: 13px; opacity: .78 }
.key { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 14px; margin: 0 0 6px; font: 500 13px/1.3 var(--label) }
.key .cost { color: var(--gold) }
.key .gain { color: var(--good) }
.key .share { color: var(--muted) }
.item .gain { display: block; color: var(--good) }
.item .share { display: block; color: var(--muted); font-weight: 500 }
/* How many finish with it, drawn along the row's foot. */
.item .bar { position: absolute; left: 0; bottom: 0; height: 2px; width: var(--share); background: linear-gradient(90deg, #8c5c18, var(--gold)); transform-origin: left; opacity: .85 }
.also { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; color: var(--soft); font-size: 14px }
.also span { display: inline-flex; align-items: center; gap: 6px; color: var(--soft) }
.also img { width: 26px; height: 26px }
.note { margin-top: 12px; color: var(--soft); font-size: 13.5px }
.empty { padding: 18px 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--soft) }
.side { display: flex; flex-direction: column; gap: 16px }
.side label { display: block }
.side input { height: 42px; font-size: 16px }
.side .hint { margin: 5px 0 0; text-align: left; font-size: 13.5px; min-height: 20px }
.foe { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 6px 8px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); transition: background .15s }
.foe:hover { background: rgba(14, 18, 17, .94) }
.foe + .foe { margin-top: 5px }
.foe > a img { width: 40px; height: 40px; transition: transform .2s var(--ease) }
.foe > a:hover img { transform: scale(1.08) }
.foe .nm { display: flex; justify-content: space-between; gap: 8px; font-size: 15px }
.foe .gap { font: 600 14px var(--label) }
.foe .gap.up { color: var(--good) }
.foe .gap.down { color: var(--bad) }
.foe .buy { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--gold); min-width: 0 }
.foe .buy img { flex: none; width: 18px; height: 18px }
.foe .none { font-size: 13px; color: var(--muted) }
.vs section:first-child h2 { color: var(--bad) }
.vs section:last-child h2 { color: var(--good) }
.vs section:first-child .foe { box-shadow: inset 2px 0 0 var(--bad), inset 0 0 0 1px var(--line) }
.chips { display: flex; flex-wrap: wrap; gap: 5px }
.chips a { position: relative; width: 44px; height: 44px; box-shadow: 0 0 0 1px rgba(95, 217, 187, .4); transition: transform .18s var(--ease), box-shadow .18s }
.chips a:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 0 0 1px var(--good), 0 0 12px rgba(95, 217, 187, .3) }
.chips img { width: 44px; height: 44px }
.vs { display: flex; flex-direction: column; gap: 16px }
.tier { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line) }
.tier > b { font: 900 38px/1 var(--display); color: var(--gold); text-align: center }
.tier .tile small { display: block; color: var(--soft); font: 500 13px var(--label); text-align: center }
.kind { margin-top: 22px }
.kind:first-child { margin-top: 0 }
.stock .item { grid-template-columns: 44px minmax(0, 1fr) auto; align-items: start }
/* An item's numbers, each under its word: a number alone reads as a score. */
.stat { display: grid; grid-template-columns: repeat(3, 66px) 92px; margin: 0; text-align: right; font: 600 15px/1.25 var(--label); white-space: nowrap }
.stat dt { margin-bottom: 2px; color: var(--muted); font: 500 12px/1 var(--label); letter-spacing: .04em }
.stat dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums }
.stat dd.cost { color: var(--gold) }
.stat .up { color: var(--good) }
.stat .down { color: var(--bad) }
.stat .cost .cost { display: inline }
.stock-key { margin: 0 0 12px }
.stock-key b { color: var(--soft); font-weight: 600 }
.stock .item.first { box-shadow: inset 0 0 0 1px var(--gold) }
.stock .item small { display: block; -webkit-line-clamp: unset }
.faces { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px }
.faces .who { align-self: center; margin-right: 5px; color: var(--muted); font: 500 13px/1 var(--label) }
.faces img { width: 30px; height: 30px; transition: transform .16s var(--ease) }
.faces a:hover img { transform: scale(1.12); outline: 1px solid var(--gold) }
.prose { max-width: 760px; margin: 0 auto; padding: 18px 22px 26px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line) }
.prose h1 { margin-top: 0; font-size: clamp(30px, 4vw, 42px) }
.prose h2 { margin-top: 26px; font: 600 19px var(--label); letter-spacing: .03em; color: var(--gold) }
.prose p { margin-top: 8px; color: var(--soft) }
.prose .say { margin-top: 12px; font-size: 18px; line-height: 1.4; color: var(--text) }
.prose dl { margin: 10px 0 0 }
.prose dt { margin-top: 14px; font-weight: 500; color: var(--text) }
.prose dd { margin: 2px 0 0; color: var(--soft) }
.prose ul { margin: 8px 0 0; padding-left: 18px; color: var(--soft) }
.prose li + li { margin-top: 6px }
.prose a { color: var(--gold) }
footer { padding-top: 22px; padding-bottom: 26px; border-top: 1px solid var(--line); color: var(--soft); font-size: 14px }
footer a { color: var(--text); transition: color .15s }
footer a:hover { color: var(--gold) }
footer p + p { margin-top: 6px }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px }

/* Thai has no capitals and its marks stack above and below the line: no spacing between letters, and room for the marks. */
:lang(th) { letter-spacing: 0 }
:lang(th) body { line-height: 1.6 }
:lang(th) .lead h1, :lang(th) .who h1, :lang(th) .prose h1 { font-weight: 600; font-synthesis: none; line-height: 1.3; letter-spacing: 0 }
:lang(th) .build h2, :lang(th) .side h2, :lang(th) .kind h2, :lang(th) .tab, :lang(th) .prose h2, :lang(th) .pick h2, :lang(th) .pick button, :lang(th) .tabs button, :lang(th) .fresh b { letter-spacing: 0 }
:lang(th) .build h2, :lang(th) .side h2, :lang(th) .kind h2 { font-size: 15px }
:lang(th) .tab { font-weight: 600; font-size: 16px; text-transform: none }
:lang(th) .item small[lang=en] { letter-spacing: normal }

/* ---- what moves, for those who have not asked for stillness. Only transform and opacity, so that it stays smooth on a phone. */
.loading .content { opacity: .45; transition: opacity .12s; pointer-events: none }
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(8px) } }
  @keyframes fade { from { opacity: 0 } }
  @keyframes grow { from { transform: scaleX(0) } }
  @keyframes unfold-l { from { opacity: 0; transform: rotate(-20deg) scale(.82) } }
  @keyframes unfold-r { from { opacity: 0; transform: rotate(20deg) scale(.82) } }
  @keyframes breath { 50% { opacity: .35; transform: scale(2.4) } }
  @keyframes call { 50% { box-shadow: inset 0 0 0 1px var(--gold), 0 8px 18px rgba(0, 0, 0, .55), 0 0 26px rgba(244, 180, 62, .42) } }
  .wing.l { animation: unfold-l .75s var(--ease) both }
  .wing.r { animation: unfold-r .75s var(--ease) both }
  .who > img, .logo, .who h1, .lead h1 { animation: rise .5s var(--ease) both }
  /* A forge does not pulse evenly: the heat stumbles. */
  @keyframes heat { 0%, 100% { opacity: .42 } 11% { opacity: .6 } 23% { opacity: .46 } 38% { opacity: .82 } 52% { opacity: .52 } 67% { opacity: .95 } 81% { opacity: .5 } }
  @keyframes run-a { to { transform: translate3d(calc(var(--tile) * -1), calc(var(--tile) * -1), 0) } }
  @keyframes run-b { to { transform: translate3d(calc(var(--tile) * .75), calc(var(--tile) * -.75), 0) } }
  @keyframes pulse { 50% { opacity: .95 } }
  @keyframes glow { 50% { opacity: .85 } }
  @keyframes surge-l { from { transform: translate3d(0, 0, 0); opacity: .95 } 62%, to { transform: translate3d(-66.6%, 0, 0); opacity: .95 } }
  @keyframes surge-r { from { transform: translate3d(-66.6%, 0, 0); opacity: .95 } 62%, to { transform: translate3d(0, 0, 0); opacity: .95 } }
  .forge .aura { animation: heat 5.3s ease-in-out infinite }
  .forge .flow::before { animation: run-a 20s linear infinite }
  .forge .flow::after { opacity: .7; animation: run-b 37s linear infinite }
  .wing .halo { animation: glow 4.4s ease-in-out infinite }
  .wing.r .halo { animation-duration: 5.1s; animation-delay: -1.4s }
  .wing .veins { animation: pulse 4.4s ease-in-out infinite }
  .wing.r .veins { animation-duration: 5.1s; animation-delay: -1.4s }
  .wing.l .surge::after { animation: surge-l 5.6s cubic-bezier(.3, 0, .6, 1) infinite }
  .wing.r .surge::after { animation: surge-r 6.4s cubic-bezier(.3, 0, .6, 1) -2s infinite }
  /* The banner is off the screen or the tab is hidden: nothing runs. */
  .calm .forge .aura, .calm .forge .flow::before, .calm .forge .flow::after, .calm .wing .halo, .calm .wing .veins, .calm .wing .surge::after { animation-play-state: paused }
  .fresh:not(.late) .dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--good); animation: breath 2.6s ease-in-out infinite }
  .build.on, .vs.on { animation: fade .22s ease-out both }
  .build.on .item, .vs.on .foe { animation: rise .36s var(--ease) both }
  .build.on .item:nth-child(2), .vs.on .foe:nth-of-type(2) { animation-delay: 40ms }
  .build.on .item:nth-child(3), .vs.on .foe:nth-of-type(3) { animation-delay: 80ms }
  .build.on .item:nth-child(4), .vs.on .foe:nth-of-type(4) { animation-delay: 120ms }
  .build.on .item:nth-child(5), .vs.on .foe:nth-of-type(5) { animation-delay: 160ms }
  .build.on .item:nth-child(6), .vs.on .foe:nth-of-type(6) { animation-delay: 200ms }
  .build.on .bar { animation: grow .7s var(--ease) .12s both }
  #foes .foe.new { animation: rise .32s var(--ease) both }
  .tile.first { animation: call 1.3s ease-in-out infinite }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important } }

@media (max-width: 1080px) {
  .layout { grid-template-columns: minmax(0, 1fr) }
  .plate { gap: 14px }
  .tab { padding: 0 9px; font-size: 14px; letter-spacing: .06em }
  nav { gap: 0 }
}
@media (max-width: 860px) {
  :root { --scene: url(/art/forest-small.webp) }
  body::before { background-position: 0 0, 0 0, center; background-size: auto, auto, cover }
  .page { grid-template-columns: minmax(0, 1fr); gap: 14px }
  .rail { position: static; max-height: none; overflow: visible; gap: 10px; padding: 10px }
  .fresh { padding-bottom: 9px }
  .pick h2 { display: none }
  .pick .list, .rail .tabs { flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -10px; padding: 0 10px }
  .pick button, .tabs button { flex: none; width: auto; padding: 6px 10px; background: rgba(236, 228, 208, .05) }
  .pick button::before, .tabs button::before { left: 6px; right: 6px; top: auto; bottom: 0; width: auto; height: 2px; transform: scaleX(0) }
  .pick button:hover::before, .tabs button:hover::before { transform: scaleX(.45) }
  .pick button.on::before, .tabs button.on::before { transform: scaleX(1) }
  .wing { top: -24px; width: 196px; height: 168px }
  .wing.l { right: calc(50% + 28px) }
  .wing.r { left: calc(50% + 28px) }
  .who > img { width: 76px; height: 76px }
  .who.plain .wing { display: none }
  .lead { padding-top: 92px }
  .lead .wing { top: -8px; width: 118px; height: 101px }
  .lead .wing.l { right: calc(50% + 124px) }
  .lead .wing.r { left: calc(50% + 124px) }
  .logo { top: 8px; width: 290px; margin-left: -145px }
  /* A moving layer inside a mask is what costs on a modest phone. Here: one layer of lava, none in the small logo, no light running in the wings. */
  .wing .surge, .mark .flow, .forge .flow::after { display: none }
  /* The menu on a phone: the logo and the languages on one line, the keys under them, on a second line when the phone is too narrow for five. */
  .plate { flex-wrap: wrap; gap: 0; height: auto; padding-top: 7px }
  nav { display: contents }
  .mark { width: 124px }
  .langs { flex: 1 1 calc(100% - 124px); order: 1; justify-content: flex-end; margin-left: 0 }
  .tab { order: 2; flex: 1 1 auto; justify-content: center; height: 40px; padding: 0 5px; font-size: 12.5px; letter-spacing: .04em }
  .tab::after { bottom: 4px }
  main { padding-top: 14px }
}
@media (max-width: 480px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px }
  .item { grid-template-columns: 14px 36px minmax(0, 1fr) auto; gap: 8px; padding: 6px 9px 6px 6px }
  .item img { width: 36px; height: 36px }
  .stock .item { grid-template-columns: 36px minmax(0, 1fr) }
  .stat { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr) 1.3fr; padding-top: 4px; border-top: 1px solid var(--line) }
  .item small { font-size: 12.5px }
  .tier { grid-template-columns: 36px minmax(0, 1fr); gap: 8px }
  .tier > b { font-size: 26px }
  .prose { padding: 14px }
  .lead .wing { display: none }
}

/* ---- the pages about players */
.tab .live { margin-left: 7px; font: 600 14px/1 var(--label); letter-spacing: 0; color: var(--good); font-variant-numeric: tabular-nums }
.seek .find input, .pick .find input { width: 100% }
.recent div { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 14px }
.recent a { color: var(--gold) }
.recent a:hover { color: #ffd98c }
.share { justify-content: center !important; padding: 8px !important; border: 1px solid var(--line) !important; color: var(--soft) }
.sub { margin: 0; padding: 9px 14px; font: 600 15px var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); background: var(--panel); border: 1px solid var(--line); border-bottom: 0 }

/* A ladder: the labels sit over the first row on a wide screen, under each number on a phone. */
.ladder { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px }
.rung { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; background: var(--panel); border: 1px solid var(--line); transition: border-color .2s, transform .2s var(--ease) }
.rung:hover { border-color: rgba(244, 180, 62, .4); transform: translateX(2px) }
.rung .nth { text-align: right; font: 600 18px/1 var(--label); color: var(--muted); font-variant-numeric: tabular-nums }
.rung:nth-child(-n+3) .nth { color: var(--gold) }
.rung .id { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-width: 0 }
.rung .name { font: 500 17px/1.2 var(--body); overflow-wrap: anywhere; transition: color .15s }
.rung .name:hover { color: #ffd98c }
.rung .faces { display: flex; gap: 3px; margin: 0 }
.rung .stat { grid-template-columns: 62px 88px 70px 66px 50px; margin: 0 }
.rung .stat dd { color: var(--text) }
.rung .stat .up { color: var(--good) }
.rung .stat .down { color: var(--bad) }
.rung:not(:first-child) .stat dt { display: none }

/* The count */
.count { position: relative; z-index: 2; display: grid; gap: 16px; max-width: 1040px; margin: 0 auto }
.facts { display: flex; flex-wrap: wrap; gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line) }
.facts > div { flex: 1 1 140px; padding: 12px 16px; background: rgba(9, 12, 11, .94) }
.facts dt { font: 600 13px var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.facts dd { margin: 2px 0 0; font: 600 30px/1.1 var(--label); font-variant-numeric: tabular-nums; color: var(--text) }
.count .say { margin: 0; padding: 12px 16px; font-size: 17px; color: var(--text); background: var(--panel); border: 1px solid var(--line) }
.count .fresh { margin: 0; padding: 12px 16px; background: var(--panel); border: 1px solid var(--line) }
[data-page=players] .stock-key { margin: 0 0 8px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line) }
.chart { margin: 0; padding: 14px 16px 12px; background: var(--panel); border: 1px solid var(--line) }
.chart h2 { font: 600 19px/1.2 var(--label); letter-spacing: .03em; color: var(--text) }
.chart figcaption p { margin-top: 2px; font-size: 13px; color: var(--muted) }
.legend { display: flex; flex-wrap: wrap; gap: 3px 16px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--soft) }
.legend i, .tip i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px }
.plot { position: relative; height: 230px; margin: 14px 8px 24px 48px; touch-action: pan-y }
.plot.ends { margin-right: 56px }
.plot.named { margin-right: 170px }
.plot .end small { color: var(--muted); font-size: 13px }
.plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible }
.plot .rule { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke }
.plot .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke }
.plot .y, .plot .x, .plot .end { position: absolute; font: 500 13px/1 var(--label); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap }
.plot .y { right: calc(100% + 8px); transform: translateY(50%) }
.plot .x { top: calc(100% + 8px); transform: translateX(-50%) }
.plot .end { left: calc(100% + 8px); transform: translateY(50%); color: var(--soft) }
.plot .cross { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(236, 228, 208, .35); pointer-events: none }
.tip { position: absolute; top: 4px; z-index: 3; display: grid; gap: 2px; min-width: 120px; margin-left: 10px; padding: 7px 10px; background: #0b0e0d; border: 1px solid rgba(236, 228, 208, .2); font-size: 13px; pointer-events: none; white-space: nowrap }
.tip.flip { transform: translateX(calc(-100% - 20px)) }
.tip b { font: 600 13px var(--label); color: var(--soft) }
.tip em { font-style: normal; color: var(--text); font-variant-numeric: tabular-nums }
.months { padding: 10px 16px; background: var(--panel); border: 1px solid var(--line) }
.months summary { cursor: pointer; font: 600 15px var(--label); letter-spacing: .03em; color: var(--soft) }
.months table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums }
.months th, .months td { padding: 4px 8px; text-align: right; border-top: 1px solid var(--line); font-weight: 400 }
.months thead th { border-top: 0; color: var(--muted); font: 600 13px var(--label) }
.months tbody th { text-align: left; color: var(--soft) }
.months thead th:first-child { text-align: left }

/* One player */
.player { display: grid; gap: 16px; min-width: 0 }
.rank { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--text) }
.rank i { width: 9px; height: 9px; border-radius: 50%; background: var(--rank, var(--gold)) }
.modes { display: flex; gap: 2px }
.modes button { padding: 6px 14px; color: var(--soft); background: var(--panel); border: 1px solid var(--line); cursor: pointer; font: 600 15px var(--label); letter-spacing: .03em; transition: color .15s, border-color .15s }
.modes button:hover { color: #fff }
.modes button.on { color: var(--gold); border-color: rgba(244, 180, 62, .5) }
.favs h2, .games h2 { margin-bottom: 8px; font: 600 19px/1.2 var(--label); letter-spacing: .03em }
.favs > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px }
.fav { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 6px 10px 6px 6px; background: var(--panel); border: 1px solid var(--line); transition: border-color .2s }
.fav:hover { border-color: rgba(244, 180, 62, .4) }
.fav img { grid-row: span 2 }
.fav b { font-weight: 500; overflow-wrap: anywhere }
.fav small { font-size: 13px; color: var(--muted) }
.games .note { margin-bottom: 8px }
.games ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px }
.game { display: grid; grid-template-columns: 44px minmax(120px, 1fr) 80px 92px 196px; align-items: center; gap: 12px; padding: 6px 12px 6px 6px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--bad) }
.game.won { border-left-color: var(--good) }
.game .what, .game .kda, .game .score { display: grid; gap: 1px; min-width: 0 }
.game b { font-weight: 500 }
.game small { font-size: 13px; color: var(--muted) }
.game .score { text-align: right; font: 600 15px/1.2 var(--label) }
.game .result { font: inherit; color: var(--bad) }
.game.won .result { color: var(--good) }
.game .up { color: var(--good) }
.game .down { color: var(--bad) }
.game .kda { font: 500 15px/1.3 var(--label); font-variant-numeric: tabular-nums; white-space: nowrap }
.bag { display: grid; gap: 2px; min-width: 0 }
.bag > div { display: flex; flex-wrap: wrap; gap: 3px }
.bag img { background: rgba(236, 228, 208, .05) }
.bag img.meta { outline: 1px solid var(--gold); outline-offset: 0 }
.bag small { text-align: right; font-size: 12px }

@media (max-width: 860px) {
  .rung { grid-template-columns: 28px minmax(0, 1fr) }
  .rung .stat { grid-column: 1 / -1; grid-template-columns: repeat(5, auto); justify-content: space-between; text-align: left; padding-top: 6px; border-top: 1px solid var(--line) }
  .rung:not(:first-child) .stat dt { display: block }
  .game { grid-template-columns: 44px minmax(0, 1fr) auto }
  .game .kda, .game .bag { grid-column: 1 / -1 }
  .game .kda { display: flex; justify-content: space-between; gap: 10px }
  .bag { grid-template-columns: minmax(0, 1fr) auto; align-items: center }
  .plot { margin-left: 40px; margin-right: 4px; height: 190px }
  .plot.ends, .plot.named { margin-right: 44px }
  .plot .end small { display: none }
  .facts dd { font-size: 26px }
}