/* ZAZA Docs: a GitBook-style docs site in the ZAZA look (navy, gold, electric blue; Titan One headings).
   One HTML page; docs.js shows one <article class="page"> at a time from the URL hash. */
:root {
  --navy-950: #030a2c;
  --navy-900: #06124f;
  --navy-850: #081659;
  --navy-800: #0a1a6b;
  --panel: #0b1757;
  --panel-2: #10206e;
  --line: #22347a;
  --line-2: #33479a;
  --gold: #ffd23f;
  --gold-2: #e8b52a;
  --gold-dark: #8a6410;
  --blue: #1d4bff;
  --blue-bright: #3a66ff;
  --cyan: #7fd4ff;
  --green: #3ddc84;
  --red: #ff4d63;
  --purple: #c08aff;
  --text: #e3e9ff;
  --text-strong: #ffffff;
  --muted: #9fb0e6;
  --display: "Titan One", "Arial Black", system-ui, sans-serif;
  --body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --pixel: "Jersey 10", ui-monospace, monospace;
  --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --top-h: 64px;
  --side-w: 288px;
  --toc-w: 232px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* One scrollbar style everywhere, as in the World (the docs show in its ⓘ window): gold thumb on a navy track. */
* { scrollbar-width: thin; scrollbar-color: var(--gold-2) rgba(3, 10, 44, 0.85); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(3, 10, 44, 0.85); border-radius: 8px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ffe066, var(--gold-2)); border-radius: 8px; border: 2px solid rgba(3, 10, 44, 0.85); }
::-webkit-scrollbar-thumb:hover { background: #ffe066; }
::-webkit-scrollbar-corner { background: transparent; }
html { background: var(--navy-950); scroll-padding-top: calc(var(--top-h) + 20px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 500 16px/1.7 var(--body);
  background:
    radial-gradient(900px 420px at 60% -120px, rgba(29, 75, 255, 0.28), transparent 70%),
    radial-gradient(600px 300px at 0% 0%, rgba(255, 210, 63, 0.06), transparent 70%),
    var(--navy-950);
  background-attachment: fixed;
  overflow-x: hidden;
}
img { max-width: 100%; }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 14px; background: var(--gold); color: var(--navy-900); border-radius: 8px; font-weight: 800; }
.skip:focus { left: 8px; }

/* ------------------------------------------------------------------ top bar */
.topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--top-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 20px;
  background: rgba(3, 10, 44, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text-strong); text-decoration: none !important; flex: none; }
.brand img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--gold); box-shadow: 0 2px 0 #000a2e; }
.brand span { font: 400 22px/1 var(--display); letter-spacing: 0.5px; }
.brand b { font: 400 19px/1 var(--pixel); letter-spacing: 1.5px; color: var(--gold); padding: 3px 8px 2px; border: 2px solid var(--gold); border-radius: 999px; }
.menu-btn { display: none; width: 40px; height: 40px; place-items: center; background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; }
.menu-btn svg { width: 20px; height: 20px; }
.search-btn {
  flex: 0 1 420px; margin-left: 24px;
  display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 10px 0 14px;
  color: var(--muted); text-align: left;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px;
  transition: border-color 0.15s, background 0.15s;
}
.search-btn:hover { border-color: var(--blue-bright); background: var(--panel-2); }
.search-btn svg { width: 17px; height: 17px; flex: none; }
.search-btn span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
kbd {
  display: inline-block; min-width: 22px; padding: 1px 6px;
  font: 700 12px/18px var(--mono); color: var(--muted); text-align: center;
  background: var(--navy-900); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px;
}
.top-links { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.top-links a:not(.play) { color: var(--muted); font-weight: 700; font-size: 14px; }
.top-links a:not(.play):hover { color: var(--text-strong); }
.play {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px 6px;
  font: 400 16px/1 var(--display); color: var(--navy-900) !important; text-decoration: none !important;
  background: linear-gradient(180deg, #ffe066, var(--gold-2));
  border: 2px solid #3a2a00; border-radius: 999px;
  box-shadow: inset 0 0 0 1px #fff3b0, 0 3px 0 var(--gold-dark);
}
.play svg { width: 13px; height: 13px; fill: currentColor; }
.play:hover { filter: brightness(1.06); }

/* ------------------------------------------------------------------ layout */
.layout { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr) var(--toc-w); max-width: 1480px; margin: 0 auto; }
.sidebar {
  position: sticky; top: var(--top-h);
  height: calc(100vh - var(--top-h));
  overflow-y: auto; overscroll-behavior: contain;
  padding: 22px 14px 40px 20px;
  border-right: 1px solid var(--line);
}
.nav-group + .nav-group { margin-top: 20px; }
.nav-label { margin: 0 0 6px 10px; font: 400 18px/1.2 var(--pixel); letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold); opacity: 0.9; }
.sidebar a {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; margin: 1px 0;
  font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--muted);
  border-radius: 8px; text-decoration: none;
  position: relative;
}
.sidebar a .ni { width: 20px; flex: none; text-align: center; font-size: 15px; filter: saturate(0.9); }
.sidebar a:hover { color: var(--text-strong); background: rgba(58, 102, 255, 0.12); }
.sidebar a.active { color: var(--gold); background: rgba(255, 210, 63, 0.09); }
.sidebar a.active::before { content: ""; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px; border-radius: 3px; background: var(--gold); }
.side-foot { margin-top: 26px; padding: 14px 10px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.side-foot a { color: var(--muted); font-weight: 700; padding: 3px 0; display: block; }
.side-foot a:hover { color: var(--text-strong); background: none; }

.content { min-width: 0; padding: 36px clamp(20px, 4vw, 56px) 60px; }
.content > * { max-width: 780px; margin-left: auto; margin-right: auto; }
.toc { position: sticky; top: var(--top-h); height: calc(100vh - var(--top-h)); overflow-y: auto; padding: 36px 20px 40px 8px; }
.toc-label { margin: 0 0 10px; font: 400 18px/1 var(--pixel); letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.toc-label svg { width: 15px; height: 15px; }
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc li a { display: block; padding: 4px 0 4px 14px; margin-left: -1px; font-size: 13.5px; line-height: 1.4; color: var(--muted); border-left: 2px solid transparent; }
.toc li.sub a { padding-left: 26px; font-size: 13px; }
.toc li a:hover { color: var(--text-strong); text-decoration: none; }
.toc li a.active { color: var(--gold); border-left-color: var(--gold); }

/* One page at a time once docs.js runs (without JS every page shows, one after another). */
.js .page { display: none; }
.js .page.current { display: block; animation: page-in 0.25s ease-out; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.page + .page { margin-top: 80px; }
.js .page + .page { margin-top: 0; }

/* ------------------------------------------------------------------ page content */
.eyebrow { margin: 0 0 6px; font: 400 20px/1 var(--pixel); letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold); }
.page h1 { margin: 0 0 12px; font: 400 clamp(32px, 4.4vw, 44px)/1.1 var(--display); color: var(--text-strong); letter-spacing: 0.3px; text-wrap: balance; }
.lead { margin: 0 0 28px; font-size: 18.5px; line-height: 1.6; color: var(--muted); font-weight: 500; }
.page h2 { position: relative; margin: 44px 0 12px; font: 400 25px/1.25 var(--display); color: var(--text-strong); letter-spacing: 0.2px; text-wrap: balance; }
.page h3 { position: relative; margin: 28px 0 8px; font-size: 18px; font-weight: 800; color: var(--text-strong); }
.page h2 .anchor, .page h3 .anchor { position: absolute; left: -26px; top: 50%; transform: translateY(-50%); padding: 0 6px; font: 700 18px var(--body); color: var(--gold); opacity: 0; text-decoration: none; }
.page h2:hover .anchor, .page h3:hover .anchor, .anchor:focus-visible { opacity: 1; }
.page p { margin: 0 0 14px; }
.page strong { color: var(--text-strong); font-weight: 800; }
.page ul, .page ol { margin: 0 0 16px; padding-left: 22px; }
.page li { margin: 4px 0; }
.page li::marker { color: var(--gold); }
.page hr { border: 0; height: 1px; background: var(--line); margin: 36px 0; }
.page code { font: 700 0.86em var(--mono); color: #ffe38a; background: rgba(255, 210, 63, 0.08); border: 1px solid rgba(255, 210, 63, 0.18); padding: 1px 6px; border-radius: 6px; word-break: break-word; }

/* Cover banner on the welcome page */
.cover {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: clamp(16px, 4vw, 40px);
  margin: 0 0 30px; padding: clamp(22px, 4vw, 38px);
  border: 2px solid var(--line-2); border-radius: 22px;
  background: radial-gradient(circle at 78% 50%, #2a57ff 0, #0d2285 38%, var(--navy-900) 72%);
  box-shadow: 0 6px 0 #000a2e, inset 0 1px 0 rgba(255, 255, 255, 0.08);
  isolation: isolate;
}
.cover::before {
  content: ""; position: absolute; z-index: -1; right: -22%; top: 50%; width: 110%; aspect-ratio: 1; transform: translateY(-50%);
  background: repeating-conic-gradient(from 0deg, rgba(127, 212, 255, 0.16) 0 6deg, transparent 6deg 18deg);
  mask: radial-gradient(circle, #000 0 30%, transparent 64%);
  -webkit-mask: radial-gradient(circle, #000 0 30%, transparent 64%);
  animation: rays 60s linear infinite;
}
@keyframes rays { to { transform: translateY(-50%) rotate(360deg); } }
.cover-text { flex: 1; min-width: 0; }
.cover .eyebrow { color: var(--gold); }
.cover h1 { margin-bottom: 10px; }
.cover p { margin: 0; color: #c9d5ff; font-size: 17px; }
.cover img { width: clamp(110px, 20vw, 180px); height: auto; flex: none; filter: drop-shadow(0 8px 0 rgba(0, 10, 46, 0.7)); animation: bob 4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-3deg); } }

/* Hints / callouts */
.hint { display: flex; gap: 12px; margin: 18px 0; padding: 14px 16px; border: 1px solid; border-left-width: 4px; border-radius: 12px; font-size: 15.5px; line-height: 1.6; }
.hint > .hi { flex: none; width: 22px; height: 22px; margin-top: 1px; display: grid; place-items: center; border-radius: 50%; font: 900 13px/1 var(--body); color: var(--navy-950); }
.hint > div { min-width: 0; }
.hint > div > :last-child { margin-bottom: 0; }
.hint p { margin: 0 0 8px; }
.hint-info { background: rgba(58, 102, 255, 0.1); border-color: rgba(58, 102, 255, 0.4); border-left-color: var(--blue-bright); }
.hint-info .hi { background: var(--blue-bright); color: #fff; }
.hint-success { background: rgba(61, 220, 132, 0.08); border-color: rgba(61, 220, 132, 0.35); border-left-color: var(--green); }
.hint-success .hi { background: var(--green); }
.hint-warning { background: rgba(255, 210, 63, 0.08); border-color: rgba(255, 210, 63, 0.35); border-left-color: var(--gold); }
.hint-warning .hi { background: var(--gold); }
.hint-danger { background: rgba(255, 77, 99, 0.08); border-color: rgba(255, 77, 99, 0.35); border-left-color: var(--red); }
.hint-danger .hi { background: var(--red); color: #fff; }

/* Status tags */
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 0; font: 400 16px/20px var(--pixel); letter-spacing: 1px; text-transform: uppercase; border-radius: 999px; border: 1px solid; vertical-align: 2px; white-space: nowrap; }
.tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tag.live { color: var(--green); border-color: rgba(61, 220, 132, 0.5); background: rgba(61, 220, 132, 0.1); }
.tag.live::before { box-shadow: 0 0 0 0 currentColor; animation: ping 1.8s infinite; }
.tag.demo { color: var(--cyan); border-color: rgba(127, 212, 255, 0.5); background: rgba(127, 212, 255, 0.08); }
.tag.soon { color: var(--gold); border-color: rgba(255, 210, 63, 0.5); background: rgba(255, 210, 63, 0.08); }
.tag.off { color: #9aa3c0; border-color: rgba(154, 163, 192, 0.45); background: rgba(154, 163, 192, 0.08); }
h1 .tag, h2 .tag { vertical-align: 6px; margin-left: 6px; }
@keyframes ping { 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Link cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 18px 0 24px; }
.card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 16px 14px;
  color: var(--text); text-decoration: none !important;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: 0 3px 0 #000a2e;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
a.card:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 5px 0 #000a2e, 0 0 24px rgba(255, 210, 63, 0.12); }
.card .ci { font-size: 24px; line-height: 1; margin-bottom: 6px; }
.card b { font: 400 17px/1.25 var(--display); color: var(--text-strong); letter-spacing: 0.2px; }
.card span { font-size: 14px; line-height: 1.5; color: var(--muted); }

/* Numbered steps */
ol.steps { list-style: none; counter-reset: step; padding: 0; margin: 18px 0 22px; }
ol.steps > li { counter-increment: step; position: relative; padding: 0 0 18px 50px; margin: 0; }
ol.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: -2px;
  width: 34px; height: 34px; display: grid; place-items: center;
  font: 400 17px/1 var(--display); color: var(--navy-900);
  background: linear-gradient(180deg, #ffe066, var(--gold-2)); border: 2px solid #3a2a00; border-radius: 50%;
  box-shadow: 0 2px 0 var(--gold-dark);
}
ol.steps > li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 36px; bottom: 2px; width: 2px; background: linear-gradient(var(--line-2), transparent); }
ol.steps > li > b:first-child { display: block; color: var(--text-strong); font-weight: 800; margin-bottom: 2px; }

/* Flow diagram: boxes joined by arrows; stacks on narrow screens */
.flow { display: flex; align-items: stretch; gap: 6px; margin: 20px 0 26px; padding: 14px; border: 1px dashed var(--line-2); border-radius: 16px; background: rgba(6, 18, 79, 0.45); }
.flow .fbox { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 8px; text-align: center; background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; overflow-wrap: break-word; }
.flow .fbox .fi { font-size: 22px; line-height: 1.1; }
.flow .fbox b { font: 400 14.5px/1.2 var(--display); color: var(--text-strong); }
.flow .fbox span { font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.flow .fbox.gold { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(255, 210, 63, 0.25); }
.flow .farrow { flex: none; align-self: center; color: var(--gold); font: 900 20px/1 var(--body); }
@media (max-width: 640px) {
  .flow { flex-direction: column; }
  .flow .fbox { flex-basis: auto; }
  .flow .farrow { transform: rotate(90deg); }
}

/* Tables */
.table { margin: 16px 0 22px; overflow-x: auto; border: 1px solid var(--line-2); border-radius: 12px; }
.table table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.table th { padding: 10px 14px; text-align: left; font-weight: 800; color: var(--text-strong); background: var(--panel-2); border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.table td { padding: 9px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:nth-child(even) td { background: rgba(10, 26, 107, 0.35); }
.table td:first-child { color: var(--text-strong); font-weight: 700; }

/* Key/value facts (addresses etc.) */
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0; margin: 16px 0 22px; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; }
.facts > dt, .facts > dd { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.facts > dt { font-weight: 800; color: var(--text-strong); background: var(--panel-2); font-size: 14px; }
.facts > dd { font-size: 14.5px; min-width: 0; }
.facts > dt:last-of-type, .facts > dd:last-of-type { border-bottom: 0; }
.addr { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font: 700 13px/1.4 var(--mono); color: #ffe38a; word-break: break-all; }
.copy { flex: none; padding: 1px 8px; font: 700 11px/18px var(--body); color: var(--muted); background: var(--navy-900); border: 1px solid var(--line-2); border-radius: 6px; }
.copy:hover { color: var(--text-strong); border-color: var(--gold); }
.copy.done { color: var(--green); border-color: var(--green); }

/* Screenshots / figures */
figure { margin: 20px 0 26px; }
figure img, figure video { display: block; width: 100%; height: auto; border: 2px solid var(--line-2); border-radius: 14px; box-shadow: 0 4px 0 #000a2e; background: var(--navy-900); }
figcaption { margin-top: 8px; font-size: 13.5px; color: var(--muted); text-align: center; }
/* The app's screens as phones (The ZAZA World app): five in a row, a strip you swipe on phones. Tap one for the big picture. */
.app-shots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 22px 0 28px; }
.app-shots figure { margin: 0; }
.app-shots a { display: block; }
.app-shots img { border: 5px solid #02061c; border-radius: 15% / 7%; box-shadow: 0 0 0 2px #56628f, 0 6px 0 #000a2e; }
.app-shots figcaption { margin-top: 10px; line-height: 1.3; }
.app-shots figcaption b { display: block; font-size: 14px; color: var(--text-strong); }
.app-shots figcaption small { display: block; font-size: 12.5px; }
@media (max-width: 640px) {
  .app-shots { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 12px; overscroll-behavior-x: contain; }
  .app-shots figure { flex: 0 0 56vw; scroll-snap-align: center; }
  .app-shots img { border-width: 7px; }
}

/* What happens in the next levels: the map's three stops side by side, one a row on phones. */
.level-stops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0 22px; }
/* The next levels and One dog, two sides: the videos' title cards, two (or three) a row; tap one for the big picture. */
.kit-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0 22px; }
.kit-shots.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* The Media kit's logos: four a row, two on phones. */
.kit-shots.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kit-shots a { display: block; }
.level-stops figure, .kit-shots figure { margin: 0; }
.level-stops figcaption, .kit-shots figcaption { text-align: left; line-height: 1.4; }
.level-stops figcaption b, .kit-shots figcaption b { display: block; font-size: 14.5px; color: var(--text-strong); }
/* One dog, two sides: the game's three cards in one row. */
.cards.trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .level-stops, .cards.trio, .kit-shots, .kit-shots.three { grid-template-columns: minmax(0, 1fr); }
  .kit-shots.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A picture tour (the Marketplace's tabs): the game's own row of tabs, each showing its picture (docs.js). Three a row on
   phones, as in the game. */
.shot-tabs { margin: 18px 0 30px; }
.shot-tabs [role="tablist"] { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; }
.shot-tabs [role="tab"] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 62px; padding: 7px 4px 6px; font: 800 14px/1.1 var(--body); color: var(--muted); text-align: center; background: linear-gradient(180deg, rgba(23, 36, 88, 0.92), rgba(8, 15, 48, 0.92)); border: 2px solid #2e3d74; border-radius: 10px; box-shadow: inset 0 1px 0 rgba(169, 179, 214, 0.22), 0 3px 0 rgba(0, 0, 0, 0.35); cursor: pointer; transition: border-color 0.12s, color 0.12s, transform 0.12s; }
.shot-tabs [role="tab"] > span { font-size: 21px; line-height: 1; }
.shot-tabs [role="tab"]:hover { color: var(--text-strong); border-color: var(--line-2); }
.shot-tabs [role="tab"][aria-selected="true"] { color: var(--navy-900); background: linear-gradient(180deg, #ffe066, var(--gold-2)); border-color: #3a2a00; box-shadow: inset 0 0 0 1px #fff3b0, 0 3px 0 #6a4a00; transform: translateY(-1px); }
.shot-tabs [role="tab"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.shot-tabs figure { margin: 0; }
.shot-tabs figure[hidden] { display: none; }
.shot-tabs figure > a { display: block; } /* the picture; the line's link stays in its line */
.shot-tabs figcaption { margin-top: 10px; font-size: 14.5px; line-height: 1.5; text-align: left; }
.shot-tabs figcaption b { margin-right: 4px; color: var(--text-strong); }
@media (max-width: 640px) {
  .shot-tabs [role="tablist"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .shot-tabs [role="tab"] { min-height: 56px; font-size: 13px; }
  .shot-tabs figure img { max-width: 400px; margin: 0 auto; }
}

/* Tier chips etc. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 20px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 12px; font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--text); background: var(--panel); border: 1px solid var(--line-2); border-radius: 999px; }
.chip b { color: var(--gold); }

/* FAQ (details) */
details.faq { margin: 10px 0; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); overflow: hidden; }
details.faq[open] { border-color: var(--gold); }
details.faq summary { list-style: none; cursor: pointer; padding: 14px 44px 14px 16px; position: relative; font-weight: 800; color: var(--text-strong); }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font: 400 22px/1 var(--display); color: var(--gold); transition: transform 0.2s; }
details.faq[open] summary::after { transform: translateY(-50%) rotate(45deg); }
details.faq > div { padding: 0 16px 12px; font-size: 15.5px; }

/* Glossary */
dl.gloss { margin: 16px 0; }
dl.gloss dt { margin-top: 14px; font-weight: 800; color: var(--gold); }
dl.gloss dd { margin: 2px 0 0; }

/* Demo card fronts (drawn by /world/js/cards.js) and rarity chips */
.demo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px; margin: 8px 0 26px; }
.demo-grid:empty { display: none; }
.demo-grid figure { margin: 0; text-align: center; }
.demo-grid img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 7; object-fit: contain; border: 0; border-radius: 10px; box-shadow: 0 4px 0 #000a2e, 0 0 0 1px var(--line-2); background: none; image-rendering: auto; transition: transform 0.18s; }
.demo-grid figure:hover img { transform: translateY(-4px) rotate(-1.5deg); }
.demo-grid figcaption { margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--text); }
.demo-grid figcaption small { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.rar { display: inline-block; padding: 0 9px; font-size: 13px; font-weight: 800; border-radius: 999px; border: 1px solid currentColor; }
.r-common { color: #5fe86f; }
.r-uncommon { color: var(--cyan); }
.r-rare { color: var(--gold); }
.r-epic { color: var(--purple); }

/* Previous / next */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 56px !important; }
.pager a { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); text-decoration: none !important; transition: border-color 0.15s, transform 0.15s; }
.pager a:hover { border-color: var(--gold); transform: translateY(-2px); }
.pager a small { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.pager a b { font: 400 17px/1.3 var(--display); color: var(--text-strong); }
.pager .next { grid-column: 2; text-align: right; }
.page-legal { flex-basis: 100%; font-size: 12px; opacity: 0.8; }
.page-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 24px !important; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

/* ------------------------------------------------------------------ search */
.search { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; background: rgba(3, 8, 30, 0.7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.search[hidden] { display: none; }
.search-box { width: min(640px, 100%); max-height: 76vh; display: flex; flex-direction: column; background: var(--navy-900); border: 2px solid var(--line-2); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 4px 0 #000a2e; overflow: hidden; }
.search-field { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.search-field svg { width: 19px; height: 19px; color: var(--gold); flex: none; }
.search-field input { flex: 1; min-width: 0; height: 56px; font: 600 17px var(--body); color: var(--text-strong); background: none; border: 0; outline: none; }
.search-field input::placeholder { color: var(--muted); }
.search-results { list-style: none; margin: 0; padding: 8px; overflow-y: auto; }
.search-results li a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--text); text-decoration: none; }
.search-results li a small { display: block; font-size: 12px; font-weight: 700; color: var(--gold); letter-spacing: 0.3px; }
.search-results li a b { display: block; color: var(--text-strong); font-weight: 800; }
.search-results li a span { display: block; font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-results li a mark { background: rgba(255, 210, 63, 0.28); color: var(--text-strong); border-radius: 3px; padding: 0 1px; }
.search-results li a.sel, .search-results li a:hover { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--gold); }
.search-empty { padding: 26px 16px; text-align: center; color: var(--muted); }
.search-hint { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
/* Ask the docs (docs.js): the Ask row on top of the results, and the answer between the field and the results. */
.search-results li a.ask-row { margin-bottom: 6px; border: 1px dashed var(--line-2); }
.search-results li a.ask-row small { color: var(--cyan); }
.ask-panel { flex: none; max-height: 56vh; overflow-y: auto; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 210, 63, 0.07), rgba(255, 210, 63, 0) 75%); }
.ask-panel[hidden] { display: none; }
.ask-q { display: flex; gap: 8px; margin: 0 0 8px; font-weight: 800; color: var(--text-strong); overflow-wrap: anywhere; }
.ask-a p { margin: 0 0 8px; line-height: 1.55; color: var(--text); }
.ask-a.ask-msg { margin: 0 0 8px; color: var(--muted); }
.ask-wait { display: flex; align-items: center; gap: 4px; margin: 0; color: var(--muted); }
.ask-wait i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: ask-dot 1s infinite ease-in-out; }
.ask-wait i:nth-child(2) { animation-delay: 0.15s; }
.ask-wait i:nth-child(3) { animation-delay: 0.3s; margin-right: 6px; }
@keyframes ask-dot { 0%, 80%, 100% { opacity: 0.25; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .ask-wait i { animation: none; opacity: 0.7; } }
.ask-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.ask-links a { display: flex; flex-direction: column; max-width: 100%; padding: 7px 12px; font-size: 14px; font-weight: 800; color: var(--text-strong); text-decoration: none; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 10px; }
.ask-links a small { font-size: 11.5px; font-weight: 700; color: var(--gold); }
.ask-links a:hover { border-color: var(--gold); }
.ask-note { margin: 0; font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------------------ responsive */
.scrim { display: none; }
@media (max-width: 1200px) {
  .layout { grid-template-columns: var(--side-w) minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 900px) {
  :root { --top-h: 58px; }
  .topbar { padding: 0 12px; gap: 10px; }
  .menu-btn { display: grid; }
  .brand span { font-size: 19px; }
  .brand img { width: 32px; height: 32px; }
  .search-btn { margin-left: auto; flex: 0 1 260px; }
  .top-links a:not(.play) { display: none; }
  .layout { display: block; }
  .sidebar {
    position: fixed; z-index: 50; left: 0; top: 0; bottom: 0;
    width: min(320px, 86vw); height: auto;
    padding-top: 20px;
    background: var(--navy-900);
    border-right: 2px solid var(--line-2);
    transform: translateX(-102%);
    transition: transform 0.22s ease-out;
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.4);
  }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .scrim { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(3, 8, 30, 0.6); }
  .content { padding-top: 26px; }
  .page h2 .anchor, .page h3 .anchor { display: none; }
}
@media (max-width: 560px) {
  .search-btn span, .search-btn kbd { display: none; }
  .search-btn { flex: none; width: 40px; padding: 0; justify-content: center; }
  .play { padding: 7px 12px 6px; font-size: 15px; }
  .content { padding: 24px 18px 56px; }
  .content > * { max-width: none; }
  .page h2 { margin-top: 38px; font-size: 23px; }
  .cover { flex-direction: column-reverse; align-items: flex-start; }
  .cover img { width: 96px; }
  .chips { display: grid; grid-template-columns: 1fr; gap: 9px; margin: 14px 0 24px; }
  .chip {
    width: 100%;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 14px;
    font-size: 15px;
    line-height: 1.35;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
  .chip .tag { flex: 0 0 78px; justify-content: center; }
  .hint {
    gap: 14px;
    margin: 24px 0;
    padding: 18px 18px 18px 16px;
    border-radius: 14px;
    font-size: 16px;
    line-height: 1.55;
  }
  .hint > .hi { width: 26px; height: 26px; margin-top: 3px; font-size: 15px; }
  .pager { grid-template-columns: 1fr; }
  .pager .next { grid-column: 1; }
  .pager a { min-height: 86px; padding: 18px 20px; justify-content: center; gap: 4px; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts > dt { border-bottom: 0; padding-bottom: 2px; background: none; }
  .facts > dd { padding-top: 0; }
}

/* Inside the World's docs popup (?embed=1): the game already shows the title and a Play button. */
.embed .top-links, .embed .side-foot .play-link { display: none; }
.embed body, body.embed { background-attachment: scroll; }

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

/* ------------------------------------------------------------------ game art
   Icons, avatars, chatheads and sprites drawn by the World's own renderers (docs/art.js). Until a box is drawn it keeps
   its space; if drawing fails it's hidden. */
.gi { display: inline-grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; flex: none; width: 32px; height: 32px; margin: -6px 8px -6px 0; vertical-align: middle; font-style: normal; }
.gi.drawn:not(.ok) { display: none; }
.gi img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; border: 0; border-radius: 0; box-shadow: none; background: none; }
.gi.sm { width: 24px; height: 24px; margin: -4px 6px -4px 0; }
.gi.lg { width: 48px; height: 48px; margin: 0; }
.gi.tier { width: 18px; height: 18px; margin: -3px 8px -3px 0; }
.gi.tier svg { display: block; width: 100%; height: 100%; }
/* an inventory slot: 32px icon (2x) on a dark bevelled square */
.gi.slot { width: 48px; height: 48px; margin: 0; padding: 8px; border-radius: 10px; background: radial-gradient(circle at 50% 40%, #13247a, #081245 70%); box-shadow: inset 0 0 0 2px var(--line), inset 0 -3px 0 rgba(0, 0, 0, 0.35); }
.gi.npc { width: 40px; height: 44px; margin: -8px 0; border-radius: 8px; overflow: hidden; background: linear-gradient(#2a5ad0, #13247a); box-shadow: 0 0 0 1px var(--line-2); }
.gi.npc img { image-rendering: auto; }
.gi.avatar { width: 112px; height: 128px; margin: 0; }
.gi.costume { width: 48px; height: 96px; margin: 0; }
.gi.building { display: grid; width: 100%; max-width: 784px; height: auto; aspect-ratio: 392 / 260; margin: 8px auto 4px; }
/* A hall (the Marketplace, the Squad House) is a square-ish sprite: shown at its own shape, at 2x (crisp, not the
   Colosseum's whole-column size). */
.gi.building.hall { max-width: 304px; aspect-ratio: 152 / 150; margin: 14px auto 6px; }
/* The Saiyan Chamber on its own (art.js chamber): the tank, 48x79 pixels, at 3x (2x in the dev log). */
.gi.chamber { display: grid; width: 100%; max-width: 144px; height: auto; aspect-ratio: 48 / 79; margin: 12px auto 6px; }
.log-entry .gi.chamber { max-width: 96px; margin: 4px auto 8px; }
/* El Camino's map on its parchment scroll (docs/camino-map.js): drawn at 3x its pixels, so it's scaled smoothly. */
.gi.scroll { display: grid; width: 100%; max-width: 784px; height: auto; aspect-ratio: 512 / 408; margin: 12px auto 6px; }
.gi.scroll img { image-rendering: auto; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5)); }
/* Vault costumes: a row of characters with their names under them. */
.costume-row { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 10px 0 4px; padding: 0; list-style: none; }
.costume-row li { display: grid; justify-items: center; gap: 4px; margin: 0; font-size: 13px; color: var(--muted); text-align: center; }
.gi.avatar img, .gi img[src^="/assets/class-hall/"] { image-rendering: auto; }
/* Liquidity providers: a player inside each LP aura (art.js ki, 40x52 at 3x), the names lined up under them. */
.gi.ki { width: 120px; height: 156px; margin: 0; }
.gi.ki img { border-radius: 12px; box-shadow: 0 0 0 2px var(--line-2), 0 4px 0 #000a2e; }
.costume-row.ki-row { align-items: flex-end; }
.ki-row li b { color: var(--text-strong); font-size: 14px; }
.gi.pack { width: 76px; height: auto; margin: 0; }
.gi.pack .zpack { width: 100%; }

.table td .who { display: inline-flex; align-items: center; gap: 10px; }
.table td .who > .gi + .gi { margin-left: -4px; }
.table td.t-common { color: #c9d2e2; } .table td.t-uncommon { color: #5fe86f; } .table td.t-rare { color: #5fb4ff; } .table td.t-holo { color: #7ff0ff; }
.table td.t-epic { color: #c08aff; } .table td.t-mythic { color: #ff8a4a; } .table td.t-legendary { color: var(--gold); }
/* Sockets & gems (#sockets): how rare a grade is, under its name (Clean blue, Flawless gold, as in the grade odds' cells),
   a gem's stat under its name, each grade's icon beside its %, and Never for a grade that can't drop. */
.table .gem-table small { display: block; font-size: 12px; font-weight: 700; color: var(--muted); }
.table .gem-table .vr, .table .gem-table .vr small { color: #5fb4ff; } .table .gem-table .xr, .table .gem-table .xr small { color: var(--gold); }
.table .gem-table td.vr, .table .gem-table td.xr { font-weight: 700; } .table .gem-table td.never { color: var(--muted); }
.table .gem-table td { white-space: nowrap; } .table .gem-table td:first-child { white-space: normal; }
.table #gem-wins td:first-child { white-space: nowrap; } .table #gem-wins td:first-child .who { display: inline-flex; gap: 0; vertical-align: middle; margin-right: 8px; } .table #gem-wins .who .gi { margin: -4px 0; } .table #gem-wins .who .gi + .gi { margin-left: -6px; }
/* On a phone all the grades fit across (the rare ones are the point): tighter cells, rarity words wrap, each icon above its %. */
@media (max-width: 560px) {
  .table .gem-table { font-size: 13.5px; }
  .table .gem-table th, .table .gem-table td { padding: 8px 6px; white-space: normal; }
  .table .gem-table th:first-child, .table .gem-table td:first-child { padding-left: 10px; }
  .table .gem-table small { font-size: 11px; }
  .table .gem-table td .gi { display: block; margin: 0 0 2px; }
  .table #gem-wins td:first-child { white-space: normal; } .table #gem-wins td { white-space: nowrap; } .table #gem-wins td:first-child .who { display: flex; margin: 0 0 3px; } .table #gem-wins .who .gi { display: block; margin: 0; } .table #gem-wins .who .gi + .gi { margin-left: -6px; }
}

.icon-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 22px; }
.icon-row > span { display: grid; justify-items: center; align-content: start; gap: 4px; min-width: 92px; padding: 12px 10px 10px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); font-size: 13.5px; line-height: 1.3; }
.icon-row b { font-weight: 800; color: var(--text-strong); }
.icon-row small { font: 400 16px/1 var(--pixel); color: var(--gold); }

.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 14px 0 22px; }
.item-grid .item { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); }
.item-grid .item .gi { grid-row: span 2; }
.item-grid .item b { align-self: end; font-size: 14.5px; line-height: 1.3; font-weight: 800; color: var(--text-strong); }
.item-grid .item span { align-self: start; font-size: 13px; line-height: 1.4; color: var(--muted); }

.gear-table th, .gear-table td { padding-left: 10px; padding-right: 10px; }
.gear-table td { vertical-align: top; }
.gear-table td:first-child { vertical-align: middle; white-space: nowrap; }
.gear { display: flex; gap: 6px; }
.gear > span { display: grid; justify-items: center; align-content: start; gap: 4px; width: 66px; text-align: center; }
.gear small { font-size: 11.5px; line-height: 1.3; font-weight: 600; color: var(--muted); }

.class-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 16px 0 22px; }
.class-card { --cc: var(--gold); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 12px 12px; text-align: center; border: 1px solid color-mix(in srgb, var(--cc) 45%, var(--line-2)); border-radius: 14px; background: radial-gradient(110px 100px at 50% 78px, color-mix(in srgb, var(--cc) 30%, transparent), transparent 72%), var(--panel); }
.class-card .cc-name { margin-top: 4px; font: 400 20px/1.2 var(--display); color: var(--text-strong); }
.class-card .role { font: 400 17px/1 var(--pixel); letter-spacing: 1px; text-transform: uppercase; color: var(--cc); }
.class-card p { margin: 8px 0 auto; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.class-card .vs { display: inline-flex; align-items: center; margin-top: 10px; font-size: 12.5px; white-space: nowrap; color: var(--muted); }
.class-card .vs .gi { width: 20px; height: 20px; margin: 0 4px 0 5px; }
.class-card .vs b { color: var(--text-strong); }
/* The rare classes: a RARE badge in the class's colour, like the World's class picker. */
.class-card.rare { position: relative; }
/* The Novice (no class yet) gets the row under the four classes: picture left, words beside it. */
.class-card.novice { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; justify-items: start; align-content: center; padding: 12px 20px; text-align: left; background: radial-gradient(90px 90px at 76px 50%, color-mix(in srgb, var(--cc) 30%, transparent), transparent 72%), var(--panel); }
.class-card.novice .gi.avatar { grid-row: 1 / span 4; }
.class-card.novice .cc-name { margin-top: 0; }
.class-card.novice p { margin: 6px 0 0; }
.class-card.novice .vs { margin-top: 8px; }
.class-card.rare::after { content: "RARE"; position: absolute; right: 8px; top: 8px; padding: 1px 6px; border-radius: 6px; font: 400 12px/1.3 var(--display); color: var(--navy-950); background: var(--cc); }
.rare-tag { margin-left: 6px; padding: 0 5px; border-radius: 5px; font-style: normal; font-size: 10.5px; color: var(--navy-950); background: var(--gold); vertical-align: 1px; }
.pips { width: 100%; display: grid; gap: 5px; margin-top: 10px; }
.pips > div { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 8px; font-size: 12px; line-height: 1; text-align: left; color: var(--muted); }
.pips i { height: 8px; background: linear-gradient(90deg, var(--pc) calc(var(--n) * 20%), rgba(255, 255, 255, 0.12) 0); -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(20% - 3px), transparent 0 20%); mask: repeating-linear-gradient(90deg, #000 0 calc(20% - 3px), transparent 0 20%); }

/* the battle menu, drawn like the game's cream buttons */
.bt-mock { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; max-width: 620px; margin: 14px 0 18px; padding: 10px; border-radius: 12px; background: #1b1d3a; box-shadow: 0 0 0 1px var(--line-2); }
.bt-mock > span { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 6px 12px 6px 8px; border-radius: 8px; background: linear-gradient(180deg, #fbf8e8, #ebe3c4); color: #1b1424; border: 3px solid #2a2a3a; box-shadow: 0 3px 0 rgba(3, 10, 44, 0.6); }
.bt-mock b { font: 400 19px/1 var(--display); letter-spacing: 0.03em; }
/* As in the World: GUARD | ATTACK | TECHNIQUE, then RUN | POTION in two halves. */
.bt-mock > span { grid-column: span 2; min-width: 0; } .bt-mock > span.half { grid-column: span 3; }
.bt-mock kbd { background: rgba(27, 20, 36, 0.12); color: #1b1424; border-color: rgba(27, 20, 36, 0.3); }
@media (max-width: 600px) { .bt-mock > span { gap: 8px; padding: 6px 8px 6px 6px; } .bt-mock b { font-size: 16px; } .bt-mock .gi.lg { width: 40px; height: 40px; } }
@media (max-width: 460px) { .bt-mock { gap: 6px; padding: 8px; } .bt-mock > span { gap: 6px; padding: 5px 8px 5px 6px; } .bt-mock b { font-size: 13px; } .bt-mock kbd { display: none; } .bt-mock .gi.lg { width: 36px; height: 36px; } }
/* One size for all five (the three-across top row sets it), small enough for TECHNIQUE to fit at every width. */
.bt-mock > span { gap: 6px; padding: 6px 8px 6px 6px; }
.bt-mock .gi.lg { width: 34px; height: 34px; }
.bt-mock b { font-size: 16px; }
@media (max-width: 700px) { .bt-mock b { font-size: 13px; } .bt-mock .gi.lg { width: 28px; height: 28px; } .bt-mock kbd { display: none; } }
@media (max-width: 460px) { .bt-mock > span { gap: 4px; padding: 5px 5px 5px 4px; } .bt-mock b { font-size: 11px; letter-spacing: 0; } .bt-mock .gi.lg { width: 22px; height: 22px; } }
@media (max-width: 360px) { .bt-mock { gap: 4px; padding: 6px; } .bt-mock > span { gap: 3px; padding: 4px 3px; } .bt-mock b { font-size: 10px; } .bt-mock .gi.lg { width: 18px; height: 18px; } }

/* status tags, as next to the HP bars in a fight */
.st { display: inline-block; margin-right: 8px; padding: 0 6px; border-radius: 3px; font: 700 11px/1.6 var(--body); font-style: normal; letter-spacing: 0.04em; vertical-align: 1px; background: #3a3a4a; color: #fff; }
.st.ex { background: #ff981f; color: #1b1424; }
.st.sh { background: #ffe066; color: #1b1424; }
.st.ra { background: #ff5d5d; }
.st.sl { background: #6a7aff; }
.st.pa { background: #ffd23f; color: #1b1424; }
.st.dg { background: #e8c84a; color: #1b1424; }
.st.fo { background: #5ab8ff; color: #0b1430; }
.st.un { background: #a0846a; color: #1b1424; }
/* The dozen's (2026-10-18): headache, biding, rolling, mirages, rain, taunted, the knell, cursed. */
.st.ac { background: #c06cf0; color: #fff; }
.st.bd { background: #c8a86a; color: #1b1424; }
.st.rl { background: #8a94a8; color: #0b1430; }
.st.mi { background: #bfefff; color: #0b1430; }
.st.rn { background: #3a7ad8; color: #fff; }
.st.tn { background: #e0603a; color: #fff; }
.st.kn { background: #3a2a52; color: #ffd8e0; border: 1px solid #ff5a6a; }
.st.hx { background: #5a1d78; color: #fff; }

/* wildlife, guardians and the dummy on a little stage */
.foe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 14px 0 18px; }
.foe-grid.solo { grid-template-columns: minmax(0, 200px); }
/* Three on their own (the Card Hunt's guardians): one full row. */
@media (min-width: 601px) { .foe-grid.trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.foe { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 10px 12px; text-align: center; border: 1px solid var(--line-2); border-radius: 14px; background: radial-gradient(60% 16px at 50% 136px, rgba(0, 0, 0, 0.5), transparent 70%), linear-gradient(180deg, #16288a, #0a1757 60%, #081245); }
.foe .gi { width: 100%; height: 128px; margin: 0 0 10px; }
.foe b { font: 400 16px/1.25 var(--display); color: var(--text-strong); }
.foe small { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
/* One of the Most Wanted: hidden until a quest of yours hunts it, so a "?" stands where its picture would be. */
.foe-q { display: grid; place-items: center; width: 100%; height: 128px; margin: 0 0 10px; font: 400 72px/1 var(--display); color: rgba(255, 210, 63, 0.5); text-shadow: 0 4px 0 #000a2e; }

/* Holder tier ladder: a tile per tier with the badge set in a medallion. 7 across on wide pages, 4 + 3 (centred) on
   medium ones; on phones, rows in two columns with Legendary across the bottom. Holo has a foil frame, Legendary gold. */
.tier-ladder { container-type: inline-size; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 24px !important; padding: 0 !important; }
.tier-ladder li {
  --tc: #c9d2e2;
  --fill: radial-gradient(130% 75% at 50% 0%, color-mix(in srgb, var(--tc) 22%, transparent), transparent 70%) padding-box, linear-gradient(var(--panel-2), var(--navy-900)) padding-box;
  flex: 0 0 calc((100% - 24px) / 4); min-width: 0;
  display: grid; justify-items: center; align-content: start; gap: 7px;
  margin: 0; padding: 14px 3px 12px;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--tc) 40%, var(--line));
  border-radius: 14px;
  background: var(--fill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 18px -12px rgba(0, 0, 0, 0.9);
}
.tier-ladder .gi.tier {
  width: 48px; height: 48px; margin: 0 0 2px; padding: 10px; border-radius: 50%;
  background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--tc) 30%, #13247a), #050e3c 78%);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tc) 60%, transparent), inset 0 -5px 8px rgba(0, 0, 0, 0.45), 0 0 18px color-mix(in srgb, var(--tc) 30%, transparent);
}
.tier-ladder .gi.tier svg { filter: drop-shadow(0 1.5px 0 rgba(0, 0, 0, 0.45)); }
.tier-ladder b { font: 400 14px/1.15 var(--display); color: var(--tc); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); }
.tier-ladder small { padding: 4px 9px; border-radius: 999px; font: 700 12px/1 var(--body); font-variant-numeric: tabular-nums; color: var(--text); background: rgba(3, 10, 44, 0.6); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 24%, transparent); }
.tier-ladder .t-uncommon { --tc: #5fe86f; } .tier-ladder .t-rare { --tc: #5fb4ff; } .tier-ladder .t-holo { --tc: #7ff0ff; }
.tier-ladder .t-epic { --tc: #c08aff; } .tier-ladder .t-mythic { --tc: #ff8a4a; } .tier-ladder .t-legendary { --tc: #ffd23f; }
.tier-ladder .t-holo { border-color: transparent; background: var(--fill), conic-gradient(from 210deg, #7ff0ff, #c08aff, #ff9ad5, #ffd23f, #5fe86f, #7ff0ff) border-box; }
.tier-ladder .t-legendary { border-color: transparent; background: var(--fill), linear-gradient(160deg, #fff3b0, #ffd23f 30%, #8a6410 65%, #ffd23f) border-box; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 22px -8px rgba(255, 210, 63, 0.55); }
@container (min-width: 640px) { .tier-ladder li { flex-basis: calc((100% - 48px) / 7); } .tier-ladder b { font-size: clamp(12px, calc(2.3cqi - 3px), 14px); } }
@container (max-width: 439px) {
  .tier-ladder li { flex-basis: calc((100% - 8px) / 2); grid-template-columns: auto auto; justify-content: start; align-items: center; justify-items: start; gap: 5px 10px; padding: 8px 10px 8px 8px; text-align: left; }
  .tier-ladder .gi.tier { grid-row: span 2; width: 40px; height: 40px; padding: 8px; margin: 0; }
  .tier-ladder b { align-self: end; font-size: 13px; }
  .tier-ladder small { align-self: start; }
  .tier-ladder .t-legendary { flex-basis: 100%; justify-content: center; }
}
@container (max-width: 309px) { .tier-ladder li, .tier-ladder .t-legendary { flex-basis: 100%; justify-content: start; } }

/* the link to the Card Hunt preview */
.preview-cta { display: flex; align-items: center; gap: 18px; margin: 20px 0 26px; padding: 14px 18px; color: var(--text); border: 1px solid rgba(255, 210, 63, 0.45); border-radius: 16px; background: radial-gradient(260px 120px at 0% 50%, rgba(255, 210, 63, 0.14), transparent 70%), var(--panel); transition: border-color 0.15s, transform 0.15s; }
.preview-cta:hover { text-decoration: none; border-color: var(--gold); transform: translateY(-1px); }
.preview-cta > span { min-width: 0; }
.preview-cta b { display: block; font: 400 18px/1.3 var(--display); color: var(--text-strong); }
.preview-cta small { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.preview-cta em { margin-left: auto; padding: 8px 16px; font-style: normal; font-weight: 800; font-size: 14px; white-space: nowrap; color: var(--navy-950); background: var(--gold); border-radius: 999px; box-shadow: 0 3px 0 var(--gold-dark); }
@media (max-width: 560px) { .preview-cta { flex-wrap: wrap; } .preview-cta > span { flex: 1 1 160px; } .preview-cta em { margin-left: 0; } }

/* Real packs preview (#real-packs): the hunt's own packs and pack opening from /hunt/reveal.js, with sample pulls. */
.rp-stage { position: relative; display: grid; justify-items: center; gap: 14px; margin: 6px 0 30px; padding: 26px 16px 22px; border: 2px solid var(--line-2); border-radius: 22px; background: radial-gradient(420px 220px at 50% 40%, rgba(255, 210, 63, 0.16), transparent 70%), radial-gradient(circle at 50% 120%, #2a57ff 0, var(--navy-900) 60%); box-shadow: 0 6px 0 #000a2e; overflow: hidden; }
.rp-fan { position: relative; width: 100%; height: 250px; }
.rp-fan .zpack { position: absolute; left: 50%; bottom: 0; width: 132px; transform-origin: 50% 100%; filter: drop-shadow(0 14px 18px rgba(0, 4, 24, 0.6)); transition: translate 0.25s, rotate 0.25s; }
.rp-fan .zpack:nth-child(1) { translate: -140% 0; rotate: -13deg; }
.rp-fan .zpack:nth-child(2) { translate: -50% -16px; z-index: 2; width: 146px; }
.rp-fan .zpack:nth-child(3) { translate: 40% 0; rotate: 13deg; }
.rp-stage:hover .rp-fan .zpack:nth-child(1) { translate: -150% -6px; rotate: -16deg; }
.rp-stage:hover .rp-fan .zpack:nth-child(3) { translate: 50% -6px; rotate: 16deg; }
.rp-cta { display: grid; justify-items: center; gap: 8px; text-align: center; }
.rp-cta small { max-width: 420px; font-size: 13.5px; color: #c9d5ff; }
.rp-play { padding: 11px 24px 10px; font-size: 19px; cursor: pointer; }
.rp-play svg { width: 15px; height: 15px; }
/* The machine's video is square: shown whole, at a size that fits it, not cropped to a wide strip. */
.rp-machine video { width: min(100%, 420px); aspect-ratio: 1; margin: 0 auto; object-fit: cover; }
.rp-machine figcaption { text-align: center; }
.rp-odds { margin: 16px 0 12px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); }
.rp-odds-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--navy-950); }
.rp-odds-bar i { background: currentColor; min-width: 4px; }
.rp-odds-rows { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 13.5px; font-weight: 700; }
.rp-odds-rows b { font-weight: 800; }
.rp-pulls { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 16px 0 24px; }
.rp-pull { display: flex; flex-direction: column; gap: 3px; padding: 10px 10px 12px; text-align: left; color: var(--text); background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 3px 0 #000a2e; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; }
.rp-pull:hover { transform: translateY(-3px); border-color: currentColor; box-shadow: 0 5px 0 #000a2e, 0 0 22px color-mix(in srgb, currentColor 30%, transparent); }
.rp-slab { display: grid; place-items: center; aspect-ratio: 3 / 5; margin-bottom: 6px; border-radius: 10px; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, currentColor 22%, transparent), transparent 70%), var(--navy-950); overflow: hidden; }
.rp-slab img { width: 100%; height: 100%; object-fit: contain; }
.rp-pull b { font-size: 14px; line-height: 1.3; font-weight: 800; color: var(--text-strong); }
.rp-pull small { font-size: 12px; font-weight: 700; color: currentColor; }
.rp-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 2px; }
.rp-foot em { font: 400 17px/1 var(--display); font-style: normal; color: var(--text-strong); }
.rp-sample { padding: 1px 7px 0; font: 400 14px/18px var(--pixel); letter-spacing: 1px; text-transform: uppercase; font-style: normal; color: #ff8a1f; border: 1px solid rgba(255, 138, 31, 0.6); border-radius: 999px; background: rgba(255, 138, 31, 0.1); }
@media (max-width: 560px) {
  .rp-fan { height: 190px; }
  .rp-fan .zpack { width: 100px; }
  .rp-fan .zpack:nth-child(2) { width: 112px; }
  .rp-pulls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ live panels: the vault and the rewards leaderboard (docs/live.js) */
.live-box { margin: 20px 0 28px; border: 1px solid var(--line-2); border-radius: 16px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: 0 4px 0 #000a2e; overflow: hidden; }
.live-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: rgba(3, 10, 44, 0.4); }
.live-head b { font: 400 18px/1.25 var(--display); color: var(--text-strong); letter-spacing: 0.2px; }
.live-when { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.live-body { padding: 16px; }
.live-body:empty::before { content: "Loading the live numbers…"; display: block; padding: 18px 0; text-align: center; font-size: 14px; color: var(--muted); }
.live-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--muted); }
.live-foot > span { flex: 1 1 260px; }
.live-foot > a { margin-left: auto; font-weight: 800; white-space: nowrap; }
.live-foot > .live-cta { padding: 7px 16px; color: var(--navy-950); background: var(--gold); border-radius: 999px; box-shadow: 0 3px 0 var(--gold-dark); }
.live-foot > .live-cta:hover { text-decoration: none; background: #ffe066; }
.page .lv-note { margin: 0; padding: 12px 0; text-align: center; font-size: 14.5px; color: var(--muted); }

.lv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.lv-stat { display: flex; flex-direction: column; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(3, 10, 44, 0.35); }
.lv-stat small { font-size: 11.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.lv-stat b { font: 400 22px/1.3 var(--display); color: var(--text-strong); }
.lv-stat b.gold { color: var(--gold); }
.lv-stat span { font-size: 12.5px; line-height: 1.4; color: var(--muted); }

/* Round pictures; the bolt shows when there's no picture (or it didn't load). */
.lv-av { position: relative; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 40% 35%, var(--blue-bright), var(--navy-900)); box-shadow: 0 0 0 2px var(--line-2); }
.lv-av::before { content: "⚡"; font-size: 15px; line-height: 1; }
.lv-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lv-tier { display: inline-block; flex: none; width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; }
.lv-tier svg { display: block; width: 100%; height: 100%; }
.lv-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; color: var(--text-strong); }
a.lv-name:hover { color: var(--cyan); }

/* Podium: silver, gold, bronze. */
.lv-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 10px; margin: 18px 0 14px; }
.lv-step { --medal: var(--gold); display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.lv-step.is-silver { --medal: #d9e2f2; }
.lv-step.is-bronze { --medal: #e89a5c; }
.lv-step .lv-av { width: 52px; height: 52px; margin-bottom: 6px; box-shadow: 0 0 0 3px var(--medal), 0 4px 0 #000a2e; }
.lv-step.is-gold .lv-av { width: 64px; height: 64px; }
.lv-step .lv-av::before { font-size: 22px; }
.lv-step .lv-name { max-width: 100%; font-size: 14.5px; }
.lv-usd { margin-top: 2px; font: 400 20px/1.2 var(--display); color: var(--medal); }
.lv-step small { font-size: 12px; line-height: 1.4; color: var(--muted); }
.lv-step .lv-vault-note { color: #ffe38a; }
.lv-block { display: grid; place-items: center; width: 100%; margin-top: 8px; font: 400 26px/1 var(--display); color: var(--navy-950); background: linear-gradient(180deg, var(--medal), color-mix(in srgb, var(--medal) 55%, #0a1a6b)); border-radius: 10px 10px 4px 4px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35); }
.lv-step.is-gold .lv-block { height: 72px; }
.lv-step.is-silver .lv-block { height: 54px; }
.lv-step.is-bronze .lv-block { height: 40px; }

/* Places 4-10. */
.page .lv-rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.page .lv-rows li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.page .lv-rows li:nth-child(even) { background: rgba(10, 26, 107, 0.35); }
.page .lv-rows li:last-child { border-bottom: 0; }
.lv-rank { flex: none; width: 24px; text-align: center; font: 400 16px/1 var(--display); color: var(--muted); }
.lv-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.lv-who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.lv-val { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.35; }
.lv-val b { font-weight: 800; color: var(--gold); }
.lv-val small { font-size: 12px; color: var(--muted); }

/* The vault: power cell, readout, marketing wallet goal. */
.lv-vault-top { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 18px; margin-bottom: 16px; }
.lv-battery { position: relative; height: 160px; margin-top: 8px; display: grid; place-items: center; align-content: center; gap: 4px; border: 3px solid var(--line-2); border-radius: 18px; background: var(--navy-950); box-shadow: inset 0 0 0 3px #041040, 0 4px 0 #000a2e; }
.lv-battery::before { content: ""; position: absolute; top: -11px; left: 50%; width: 36px; height: 8px; translate: -50% 0; border-radius: 4px 4px 0 0; background: var(--line-2); }
.lv-fill { position: absolute; left: 3px; right: 3px; bottom: 3px; max-height: calc(100% - 6px); border-radius: 12px; background: linear-gradient(0deg, var(--gold-2), #ffe066); box-shadow: 0 0 22px rgba(255, 210, 63, 0.45); transition: height 0.8s ease; }
.lv-battery img { position: relative; width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 0 0 2px var(--gold), 0 3px 0 #000a2e; }
.page .lv-vault-main p { margin: 0 0 4px; }
.lv-big { font-size: 15px; color: var(--muted); }
.lv-big b { font: 400 30px/1.15 var(--display); color: var(--gold); margin-right: 4px; }
.lv-line { font-size: 14.5px; line-height: 1.5; }
.lv-faces { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lv-face { display: block; border-radius: 50%; text-decoration: none !important; }
.lv-face .lv-av { width: 30px; height: 30px; }
.lv-face .lv-av::before { font-size: 13px; }
.lv-face:hover .lv-av { box-shadow: 0 0 0 2px var(--gold); }
.lv-more { display: grid; place-items: center; width: 30px; height: 30px; font-size: 11.5px; font-weight: 800; color: var(--muted); background: var(--navy-900); box-shadow: 0 0 0 2px var(--line-2); }
/* The pool's liquidity providers (live.js renderLps): a face per wallet, ringed in its aura's colour, gold in the Super form. */
.page .lp-count { margin: 0 0 12px; font-size: 14.5px; color: var(--muted); }
.page .lp-count b { color: var(--text-strong); }
.page .lp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.page .lp-cards li { display: grid; justify-items: center; gap: 2px; min-width: 0; margin: 0; padding: 12px 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(3, 10, 44, 0.35); text-align: center; }
.lp-card { --ring: #7fd8ff; }
.lp-card.is-stream { --ring: #3fb8ff; }
.lp-card.is-river { --ring: #2a7dff; }
.lp-card.is-ocean { --ring: #2a5cff; }
.lp-card.is-super { --ring: #ffd23f; }
.lp-card .lp-av { width: 56px; height: 56px; margin-bottom: 6px; box-shadow: 0 0 0 3px var(--ring), 0 0 14px var(--ring); }
.lp-card .lp-av img.px { image-rendering: pixelated; }
.lp-card b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--text-strong); }
.lp-card small { font-size: 12px; font-weight: 700; color: var(--muted); }
.lv-goal { margin-bottom: 12px; padding: 12px 14px; border: 1px solid rgba(255, 210, 63, 0.35); border-radius: 12px; background: rgba(255, 210, 63, 0.06); }
.lv-goal-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; font-weight: 700; }
.lv-goal-row b { color: var(--gold); font-weight: 800; }
.lv-bar { position: relative; height: 18px; margin: 8px 0 6px; border-radius: 999px; background: var(--navy-950); box-shadow: inset 0 0 0 1px var(--line-2); overflow: hidden; }
.lv-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--gold-2), #ffe066); box-shadow: 0 0 14px rgba(255, 210, 63, 0.45); transition: width 0.8s ease; }
.lv-bar em { position: relative; display: block; text-align: center; font: 400 15px/18px var(--pixel); font-style: normal; letter-spacing: 1px; color: #fff; text-shadow: 0 1px 0 #000a2e, 0 0 6px rgba(0, 4, 24, 0.9); }
.lv-goal small { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.page .lv-foot-note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }

@media (max-width: 560px) {
  .live-body { padding: 14px 12px; }
  .lv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .lv-stat:first-child:nth-last-child(3) { grid-column: 1 / -1; }
  .lv-stat small { font-size: 10.5px; }
  .lv-stat b { font-size: 20px; }
  .lv-podium { gap: 6px; }
  .lv-step .lv-av { width: 44px; height: 44px; }
  .lv-step.is-gold .lv-av { width: 54px; height: 54px; }
  .lv-usd { font-size: 17px; }
  .lv-step .lv-name { font-size: 13px; }
  .lv-step .lv-tier { display: none; }
  .page .lv-rows li { gap: 8px; padding: 8px 10px; }
  .lv-vault-top { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; }
  .lv-battery { height: 136px; }
  .lv-battery img { width: 44px; height: 44px; }
  .lv-big b { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .lv-fill, .lv-bar i { transition: none; }
}

/* ------------------------------------------------------------------ Arsenal & legends (docs/legends.js) */
.board-scroll { overflow-x: auto; margin: 14px 0 18px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, #0b1757, #06124f); -webkit-overflow-scrolling: touch; }
.big-board { border-collapse: separate; border-spacing: 0; font-size: 13px; line-height: 1.3; min-width: 100%; }
.big-board th, .big-board td { padding: 6px 7px; border-bottom: 1px solid rgba(51, 71, 154, 0.45); text-align: left; vertical-align: middle; }
.big-board thead th { position: sticky; top: 0; z-index: 1; background: #0a1a6b; font-family: var(--display); font-weight: 400; color: var(--gold); font-size: 14px; white-space: nowrap; }
.big-board .tier-col { position: sticky; left: 0; z-index: 2; background: #081659; min-width: 92px; }
.big-board thead .tier-col { z-index: 3; }
.big-board .tier-col b { display: block; font-family: var(--display); font-weight: 400; color: var(--gold); font-size: 16px; }
.big-board .tier-col small { display: block; color: var(--muted); }
.big-board .tier-col .hold { display: inline-block; margin: 2px 4px 2px 0; font-style: normal; font-size: 11px; color: #9fe9ff; }
.big-board .cls-col { border-top: 3px solid var(--cc); color: var(--cc); min-width: 150px; }
.big-board .cls-col b { color: var(--cc); }
.big-board .cls-col .gi { width: 22px; height: 22px; margin: -4px 6px -4px 0; }
.big-board td.cell { background: linear-gradient(180deg, color-mix(in srgb, var(--cc, #3a66ff) 12%, transparent), color-mix(in srgb, var(--cc, #3a66ff) 4%, transparent)); border-left: 1px solid color-mix(in srgb, var(--cc, #3a66ff) 25%, transparent); }
.big-board tr.band1 td.cell { box-shadow: inset 0 1px 0 rgba(255, 210, 63, 0.08); }
.big-board tr.band2 td.cell { box-shadow: inset 0 1px 0 rgba(255, 106, 42, 0.1); }
.big-board .piece { display: flex; align-items: center; gap: 4px; margin: 2px 0; white-space: nowrap; }
.big-board .piece .gi { width: 24px; height: 24px; margin: 0; }
.big-board .piece small { color: var(--text); font-size: 12px; }
.big-board.armour td.cell { --cc: #7fd4ff; }
.big-board.attacks td { font-size: 13px; } .big-board.attacks .atk-name { white-space: nowrap; border-left: 3px solid var(--cc); }
.big-board.attacks .atk-name .gi { width: 26px; height: 26px; margin: -4px 6px -4px 0; }
.big-board.attacks tr.sec th { position: static; background: linear-gradient(90deg, color-mix(in srgb, var(--cc, #3a66ff) 30%, #0a1a6b), #081659); color: var(--text-strong); font-size: 14px; border-left: 3px solid var(--cc, #3a66ff); }
/* Things from a land that hasn't opened are blurred (owner: "kinda blurred text", not REDACTED). .redacted holds filler
   words, never the real thing; [data-land] blurs the real prose until its land opens. */
.redacted { display: inline-block; white-space: nowrap; filter: blur(4px); opacity: 0.85; user-select: none; cursor: help; }
.redact-note { color: var(--gold); font-size: 12px; }
.redacted-cell { text-align: center; }
[data-land]:not(.land-open) { filter: blur(5px); user-select: none; cursor: help; }
[data-land]:not(.land-open) a { pointer-events: none; }
/* Pictures blur much harder than words: at 5 px a monster's shape still gave it away. */
[data-land]:not(.land-open) :is(img, .gi) { filter: blur(14px) brightness(0.65) saturate(0.6); }
/* A dev log entry blurs its insides and keeps a sharp lock line over them, hard enough that no word or picture can be made
   out (owner, of the Maelstros entry at 6 px: "revealing a bit too much"). */
.log-entry[data-land]:not(.land-open) { filter: none; position: relative; overflow: hidden; }
.log-entry[data-land]:not(.land-open) > * { filter: blur(11px); }
.log-entry[data-land]:not(.land-open)::after { content: "🔒 Opens with the Level 4 land"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold); font: 400 16px var(--display); text-shadow: 0 2px 0 #000a2e; }
.log-entry[data-land="2"]:not(.land-open)::after { content: "🔒 Opens with the Level 6 land"; }
[data-land="3"]:not(.land-open) { display: none !important; } /* the voyage (the Open World): hidden from everyone until ZAZA Level 11 (legends.js) */
.el-chip { display: inline-flex; align-items: center; gap: 3px; padding: 0 7px; border-radius: 999px; font-size: 12px; white-space: nowrap; background: color-mix(in srgb, var(--elc) 22%, #081659); border: 1px solid color-mix(in srgb, var(--elc) 70%, #000); color: #fff; }
.cls-chip { display: inline-block; margin: 1px 3px 1px 0; padding: 0 6px; border-radius: 5px; font-size: 11.5px; white-space: nowrap; color: var(--cc); border: 1px solid var(--cc); }
.cls-chip.best { background: color-mix(in srgb, var(--cc) 22%, transparent); }
.cls-chip.poor { border-style: dashed; opacity: 0.8; text-decoration: line-through; text-decoration-color: rgba(255, 77, 99, 0.7); }
.board-key { color: var(--muted); font-size: 14px; }
.el-table { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.el-table th, .el-table td { padding: 6px; text-align: center; border: 1px solid rgba(51, 71, 154, 0.45); }
.el-table thead th small { display: block; color: var(--muted); font-size: 11px; }
.el-table tbody th { text-align: left; }
.el-table td.strong { background: rgba(61, 220, 132, 0.18); color: #9dffc8; font-weight: 700; }
.el-table td.weak { background: rgba(255, 77, 99, 0.14); color: #ffb0bc; }
.zone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 14px 0; }
.zone-card { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.zone-card.hidden { background: #050a24; }
.zone-card h3 { margin: 0 0 6px; font-family: var(--display); font-weight: 400; color: var(--gold); font-size: 17px; }
.zone-card h3 small { color: var(--muted); font-family: var(--body); font-size: 12px; }
.zone-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.zone-card li { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 14px; }
.zone-card li small { color: var(--muted); }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 12px 0; }
.stat-tiles div { padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); text-align: center; }
.stat-tiles b { display: block; font-family: var(--display); font-weight: 400; color: var(--gold); font-size: 26px; }
.stat-tiles small { color: var(--muted); }
.gear-ladder { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 4px; }
.gear-ladder li { display: grid; grid-template-columns: 44px 1fr 90px; align-items: center; gap: 8px; font-size: 13px; }
.gear-ladder b { color: var(--gold); }
.gear-ladder .lbar { height: 10px; border-radius: 5px; background: #081245; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.gear-ladder .lbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-2), var(--gold)); }
.cls-bars { display: flex; flex-wrap: wrap; gap: 6px; }
.cls-bars span { padding: 3px 9px; border-radius: 8px; border: 1px solid var(--cc, var(--line-2)); color: var(--cc, var(--text)); font-size: 13px; }
.boss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 14px 0; }
.boss-card { padding: 14px; border-radius: 14px; border: 1px solid #a8541c; background: linear-gradient(180deg, #2a0d0a, #0b0a24); }
.boss-card.hidden { border-color: var(--line); background: #050a24; }
.boss-card .boss-art { display: grid; place-items: center; min-height: 120px; }
.boss-card .boss-art .gi.lg { width: 160px; height: 120px; }
.boss-card h3 { margin: 6px 0; font-family: var(--display); font-weight: 400; color: var(--gold); }
.boss-card .boss-name { margin: 6px 0; font-family: var(--display); font-size: 1.17em; line-height: 1.2; color: var(--gold); } /* a title that stays out of the page's outline */
.boss-card :is(h3, .boss-name) small { color: var(--muted); font-family: var(--body); font-size: 13px; }
.rar { display: inline-block; margin: 2px 4px 2px 0; padding: 0 7px; border-radius: 6px; font-size: 12px; border: 1px solid var(--line-2); }
.rar.r-uncommon { color: #7adf7a; border-color: #7adf7a; } .rar.r-rare { color: #5aa8ff; border-color: #5aa8ff; } .rar.r-epic { color: #b070ff; border-color: #b070ff; }
.rar.r-legendary { color: #ffaa3a; border-color: #ffaa3a; } .rar.r-mythic { color: #fff2a8; border-color: #fff2a8; box-shadow: 0 0 8px rgba(255, 242, 168, 0.4); }
.devlog { display: grid; gap: 22px; margin-top: 10px; }
.log-entry { position: relative; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); }
.log-entry h2 { margin-top: 2px; }
.log-date { margin: 0; color: var(--gold); font: 400 14px var(--display); }
.log-entry figure { margin: 14px 0; }
.log-entry figure img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line-2); }
.log-entry figcaption { margin-top: 6px; color: var(--muted); font-size: 14px; }
/* Class paths (docs/legends.js paths): one card per class, its best attacks in the order you get them. */
.big-board.attacks .atk-fx { color: var(--muted); }
.path-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; margin: 14px 0; }
.path-card { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); border-top: 4px solid var(--cc); background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 10%, var(--panel)), var(--panel) 120px); min-width: 0; }
.path-card header { display: flex; gap: 10px; align-items: center; }
.path-card header .gi { width: 40px; height: 40px; flex: none; }
.path-card h3 { margin: 0; font-family: var(--display); font-weight: 400; color: var(--cc); font-size: 21px; }
.path-card h3 .rare { font-style: normal; font-family: var(--body); font-size: 11px; color: var(--navy-950); background: var(--cc); padding: 1px 6px; border-radius: 5px; vertical-align: middle; }
.path-card header p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.path-meta { font-size: 13px; color: var(--text); margin: 10px 0 6px; }
.path-meta small { color: var(--muted); }
.path-route { margin: 8px 0; padding: 8px 10px; border-radius: 10px; background: rgba(3, 10, 44, 0.55); border: 1px solid color-mix(in srgb, var(--cc) 45%, var(--line)); font-size: 13px; line-height: 2; }
.path-route > span { font-family: var(--display); color: var(--gold); margin-right: 6px; }
.path-route .gi { width: 22px; height: 22px; margin: -5px 3px -5px 0; }
.path-route .arrow { font-style: normal; color: var(--cc); margin: 0 3px; }
.path-weapon { font-size: 13px; color: var(--muted); margin: 6px 0 10px; }
.path-weapon b { color: var(--text-strong); }
.path-stages { display: grid; gap: 8px; }
.path-stage h4 { margin: 0 0 4px; font-size: 13px; color: var(--gold); font-weight: 700; }
.path-stage ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.path-stage .pa { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 4px; border-radius: 8px; font-size: 12.5px; background: rgba(10, 26, 107, 0.7); border: 1px solid var(--line-2); flex-wrap: wrap; }
.path-stage .pa .gi { width: 22px; height: 22px; margin: 0; }
.path-stage .pa small { color: var(--muted); }
.path-stage .pa .fit { font-style: normal; font-size: 11px; font-weight: 700; }
.path-stage .pa.fit-best { border-color: #5fe86f; background: rgba(61, 220, 132, 0.14); }
.path-stage .pa.fit-best .fit { color: #9dffc8; }
.path-stage .pa.fit-poor { border-style: dashed; opacity: 0.75; }
.path-stage .pa.fit-poor .fit { color: #ffb0bc; }
.path-stage .pa-wep { font-style: italic; }
.fit-key { font-style: normal; font-weight: 700; padding: 0 5px; border-radius: 5px; }
.fit-key.best { color: #9dffc8; background: rgba(61, 220, 132, 0.14); }
.fit-key.poor { color: #ffb0bc; }
/* The dev log's pictures, each sized to what it shows (owner: "not all images have to be same size.. adjust accordingly
   to what fits best, but they have to remain in good quality and show the product"):
   - .log-shots.side: one picture beside the bullets, 300 px wide (.wide for a wide card, 360 px; 240/280 on tablets);
     a second one goes under it.
   - Any other .log-shots is one row that fills the entry: its pictures share one height, each as wide as its shape
     (4:3 by default, .r16x9 a whole screen, .r2x1 a wide place, .phone a phone screen standing beside a landscape one).
   - Every file holds at least twice the pixels it's shown at, so 2x screens stay sharp. Phones: one picture a row.
   Day links, fixes, one .log-day per day, and a row of the game's own icons (.item-grid, one line on wide screens). */
.log-days { font-size: 14px; color: var(--muted); }
.log-days a { white-space: nowrap; }
/* The dev log a week at a time (docs.js): a row of weeks over the entries, newest on the left, that scrolls sideways once
   they don't fit, ‹ › at its ends, the picked week in gold (a gold dot: a week with entries marked New), and Newer /
   Older under the entries. The other weeks' days are hidden, and the Jump to day links make way for the row. */
#devlog.by-week .log-days { display: none; }
.devlog > [hidden] { display: none !important; }
.log-weeks { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; }
.lw-row { position: relative; flex: 1; display: flex; gap: 8px; min-width: 0; padding: 2px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
.lw-row::-webkit-scrollbar { display: none; }
.lw-row [role="tab"] { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 104px; padding: 8px 14px; scroll-snap-align: center; font: inherit; color: var(--muted); background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.lw-row [role="tab"] b { font-size: 14.5px; font-weight: 800; line-height: 1.3; color: var(--text-strong); white-space: nowrap; }
.lw-row [role="tab"] small { font-size: 12.5px; line-height: 1.3; white-space: nowrap; }
.lw-row [role="tab"]:hover { border-color: var(--gold); }
.lw-row [role="tab"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lw-row [aria-selected="true"] { color: #3b2a00; background: linear-gradient(180deg, #ffe066, var(--gold)); border-color: var(--gold); box-shadow: 0 3px 0 var(--gold-2); }
.lw-row [aria-selected="true"] b { color: var(--navy-950); }
.lw-row .has-new::after { content: ""; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--panel); }
.lw-row .has-new[aria-selected="true"]::after { background: var(--navy-950); box-shadow: none; }
.lw-step { flex: none; width: 34px; height: 34px; padding: 0; font: 800 20px/1 var(--body); color: var(--text); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 10px; cursor: pointer; }
.lw-step:hover:not(:disabled) { color: var(--navy-950); background: var(--gold); border-color: var(--gold); }
.lw-step:disabled { opacity: 0.35; cursor: default; }
.pager.log-pager { margin-top: 22px !important; }
@media (max-width: 640px) {
  .lw-step { width: 30px; height: 30px; font-size: 18px; }
  .lw-row [role="tab"] { min-width: 96px; padding: 7px 10px; }
  .pager.log-pager { grid-template-columns: 1fr 1fr; }
  .pager.log-pager .next { grid-column: 2; }
  .pager.log-pager a { min-height: 0; padding: 12px 14px; }
}
/* The dev log's build counts (docs/builds.js): the homepage card's four figures as tiles (each figure over its label,
   centred, the labels on as few lines as they take), then a gold bar a day for two weeks, today's (not over yet) only
   outlined, and a dashed line at the average; hovering or focusing a bar reads it out in the caption. */
.log-builds { margin: 0 0 22px; }
.log-builds .stat-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 10px; }
.log-builds .stat-tiles div { display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; padding: 14px 10px 12px; }
.log-builds .stat-tiles b { font-size: 28px; line-height: 1.1; }
.log-builds .stat-tiles small { font-size: 13.5px; line-height: 1.3; text-wrap: balance; }
.build-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.build-bars { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 12px 14px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.build-bars figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-height: 2.6em; margin-bottom: 8px; font-size: 14px; line-height: 1.3; color: var(--muted); }
.build-bars figcaption b { color: var(--text-strong); font-weight: 800; }
.build-bars .bars { position: relative; flex: 1; display: flex; gap: 4px; min-height: 76px; border-bottom: 1px solid var(--line-2); }
.build-bars .bars > span { flex: 1; display: flex; align-items: flex-end; outline-offset: 2px; border-radius: 4px 4px 0 0; }
.build-bars .bars i { width: 100%; height: max(2px, var(--h)); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #ffe066, var(--gold-2)); transition: filter 0.12s; }
.build-bars .bars > span:is(:hover, :focus-visible) i { filter: brightness(1.18); box-shadow: 0 0 10px rgba(255, 210, 63, 0.45); }
.build-bars .bars > .today i { background: rgba(255, 210, 63, 0.16); box-shadow: inset 0 0 0 1.5px var(--gold); }
.build-bars .avg { position: absolute; left: 0; right: 0; bottom: var(--avg); border-top: 1px dashed rgba(227, 233, 255, 0.55); pointer-events: none; }
.bar-days { display: flex; justify-content: space-between; gap: 10px; margin-top: 5px; font-size: 12px; color: var(--muted); }
@media (max-width: 640px) { .log-builds .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .build-charts { grid-template-columns: minmax(0, 1fr); } }
.bar-days .key::before { content: ""; display: inline-block; width: 14px; margin-right: 5px; vertical-align: middle; border-top: 1px dashed rgba(227, 233, 255, 0.75); }
/* The calendar beside the bars (docs/builds.js calendar): a column a week, a square a day, one gold ramp from quiet to busy */
.build-cal figcaption { flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; text-align: left; }
.build-cal figcaption > span:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.cal-nav { display: flex; flex: none; gap: 4px; }
.cal-nav[hidden] { display: none; } /* every week fits: nothing to page through */
.cal-nav button { width: 26px; height: 24px; padding: 0; font: 800 16px/1 var(--body); color: var(--text); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 6px; cursor: pointer; }
.cal-nav button:hover:not(:disabled) { color: var(--navy-950); background: var(--gold); border-color: var(--gold); }
.cal-nav button:disabled { opacity: 0.35; cursor: default; }
.cal { display: grid; grid-auto-flow: column; grid-template-rows: auto repeat(7, auto); grid-template-columns: 28px repeat(var(--weeks, 10), minmax(0, 26px)); gap: 4px; justify-content: center; align-content: center; flex: 1; }
.cal > span { aspect-ratio: 1; border-radius: 4px; background: #18245f; outline-offset: 1px; }
.cal > :is(.mo, .wd) { aspect-ratio: auto; background: none; font-size: 11px; line-height: 1; color: var(--muted); white-space: nowrap; }
.cal > .wd { display: flex; align-items: center; }
.cal > .off { background: none; } /* the days before the first build, and those still to come: GitHub leaves them out too */
.cal .l1, .cal-key .l1 { background: #6b5314; }
.cal .l2, .cal-key .l2 { background: #a07a17; }
.cal .l3, .cal-key .l3 { background: #d4a526; }
.cal .l4, .cal-key .l4 { background: linear-gradient(180deg, #ffe066, var(--gold)); }
.cal > .today { outline: 1.5px solid var(--text-strong); }
.cal > [data-n]:is(:hover, :focus-visible) { filter: brightness(1.2); outline: 2px solid var(--gold); }
.cal-key { display: inline-flex; align-items: center; gap: 3px; }
.cal-key i { width: 11px; height: 11px; border-radius: 3px; background: #18245f; }
.log-entry { display: flow-root; }
.log-shots { display: flex; gap: 12px; margin: 12px 0; align-items: flex-start; }
.log-shots figure { flex: 1.3333 1 0; min-width: 0; margin: 0; }
.log-shots figure.r16x9 { flex-grow: 1.7778; }
.log-shots figure.r2x1 { flex-grow: 2; }
.log-shots figure.phone { flex-grow: 0.4621; }
.log-shots figcaption { font-size: 13px; line-height: 1.4; }
.log-shots.side { display: block; float: right; width: 300px; margin: 4px 0 12px 20px; }
.log-shots.side.wide { width: 360px; }
.log-shots.side figure + figure { margin-top: 12px; }
.log-entry li.fix { color: var(--muted); }
.log-day { display: grid; gap: 22px; }
.log-entry .item-grid { clear: both; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 12px 0 4px; }
.log-entry .item-grid .item { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 2px; padding: 10px 6px; text-align: center; }
.log-entry .item-grid .item .gi { grid-row: auto; margin-bottom: 4px; }
/* The Weekly Loot played out (docs/loot-reel.js) in the World's own CSS (/world/loot.css), on its windows' slab. Under the
   reel, a slot kept as tall as the prize's card, so the entry never jumps: the won fights' points pop up in it, then the card. */
.ld-fig { flex: 1 1 0; min-width: 0; }
.ld-stage { --muted: #a9b3d6; contain: inline-size; padding: 12px 14px 6px; border-radius: 14px; border: 2px solid var(--line-2); background: linear-gradient(180deg, #27376f, #121a45); box-shadow: 0 4px 0 #000a2e; font: 400 16px/normal var(--pixel); color: #f1ecd8; user-select: none; -webkit-user-select: none; }
.ld-stage .lt-head { margin: 0 0 4px; }
.ld-hop { margin: 0; text-align: center; font-size: 17px; color: #ffe9a6; animation: ld-hop 0.4s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.ld-hop b { font-weight: 400; font-size: 24px; color: var(--gold); }
@keyframes ld-hop { from { scale: 0.6; opacity: 0; } }
.ld-got { display: grid; align-content: center; min-height: 84px; margin-bottom: 6px; }
.ld-got .lt-hand { margin: 0; text-align: center; }
.ld-cap { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
@media (max-width: 760px) {
  .log-shots.side { width: 240px; }
  .log-shots.side.wide { width: 280px; }
}
@media (max-width: 640px) {
  .log-shots { flex-wrap: wrap; }
  .log-shots figure { flex-basis: 100%; }
  .log-shots figure.phone { flex: 0 0 56%; margin: 0 auto; }
  .log-shots.side, .log-shots.side.wide { float: none; width: auto; margin: 12px 0; }
  .log-entry .item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .log-entry .item-grid .item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ The game boards, RuneScape style
   Owner (2026-10-01): "improve the buttons and tables, to look more RuneScape vibe". Every board docs/legends.js draws
   sits on aged parchment in a dark wooden frame with wooden header bars and brown ink, like the World's Rankings scroll;
   element and class chips are bevelled stone buttons with shadowed lettering. Monster rows stay on one line. */
:root {
  --rs-ink: #2e1e08; --rs-ink-2: #6b5230; --rs-line: rgba(92, 62, 24, 0.42); --rs-gold: #ffd86a; --rs-amber: #7a4a06;
  --rs-paper: radial-gradient(ellipse 60% 40% at 28% 18%, rgba(255, 250, 228, 0.55), transparent 70%),
    radial-gradient(ellipse 55% 38% at 80% 80%, rgba(150, 108, 50, 0.16), transparent 70%),
    repeating-linear-gradient(90deg, rgba(120, 84, 36, 0.035) 0 2px, transparent 2px 5px),
    linear-gradient(90deg, #cfae72, #e8d3a2 5%, #f0e0b8 50%, #e8d3a2 95%, #cfae72);
  --rs-wood: linear-gradient(180deg, #80592b 0%, #5c3e19 48%, #40280d 100%);
  --rs-stone: linear-gradient(180deg, #665441 0%, #4b3c2d 50%, #3a2e22 100%);
  --rs-frame: inset 0 0 0 1px #f8ebc6, inset 0 0 22px rgba(110, 70, 20, 0.32), 0 6px 14px rgba(0, 0, 0, 0.45);
  --rs-bevel: inset 1px 1px 0 rgba(255, 236, 190, 0.25), inset -1px -1px 0 rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.35);
}
/* Parchment sheets in a wooden frame */
.board-scroll, .table.rs, .zone-card, .path-card, .boss-card, .boss-card.hidden, .zone-card.hidden {
  background: var(--rs-paper); color: var(--rs-ink); border: 3px solid #5a3d18; border-radius: 6px; box-shadow: var(--rs-frame);
}
.board-scroll { border-radius: 6px; }
/* Stone buttons: element and class chips */
.cls-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 1.5px 7px 0.5px 5px; border-radius: 3px; border: 1px solid #120c06; /* the font's capitals sit high: more room on top */
  background: var(--rs-stone); box-shadow: var(--rs-bevel); font: 700 12px/1.5 var(--body); white-space: nowrap; text-shadow: 1px 1px 0 #000; text-decoration: none;
}
.cls-chip { color: color-mix(in srgb, var(--cc) 85%, #fff); margin: 1px 3px 1px 0; }
.cls-chip.best { border-color: #c8a03a; box-shadow: inset 0 0 0 1px rgba(255, 216, 106, 0.5), var(--rs-bevel); background: var(--rs-stone); }
.cls-chip.poor { border-style: solid; opacity: 0.72; filter: saturate(0.55); text-decoration: line-through; text-decoration-color: #ff5a4a; }
/* Wooden header bars */
.big-board thead th, .el-table thead th, .table.rs th {
  background: var(--rs-wood); color: var(--rs-gold); font-family: var(--display); font-weight: 400; text-shadow: 1px 1px 0 #000; border-bottom: 2px solid #24160a;
}
.table.rs th { font-size: 14px; }
/* Ink, dotted rules and a faint stripe */
.big-board td, .el-table td, .table.rs td { color: var(--rs-ink); border-bottom: 1px dotted var(--rs-line); }
.big-board th, .big-board td { border-bottom-color: var(--rs-line); }
.table.rs td:first-child { color: var(--rs-ink); }
.table.rs tbody tr:nth-child(even) td { background: rgba(120, 84, 36, 0.08); }
.table.rs tbody tr:hover td, .big-board.attacks tbody tr:not(.sec):hover td { background: rgba(255, 250, 228, 0.45); }
.table.rs small, .big-board small, .big-board.attacks .atk-fx { color: var(--rs-ink-2); }
.table.rs b, .big-board td b { color: var(--rs-ink); }
.table.rs a, .big-board a { color: #1d3ab8; }
.table.rs .redact-note, .big-board td .redact-note, .zone-card .redact-note, .path-card .redact-note, .boss-card .redact-note { color: #8a5a00; }
/* The weapons, armour and attacks boards */
.big-board .tier-col { background: #e3cc97; border-right: 2px solid var(--rs-line); }
.big-board thead .tier-col { background: var(--rs-wood); }
.big-board .tier-col b { color: var(--rs-amber); }
.big-board .tier-col small { color: var(--rs-ink-2); }
.big-board .tier-col .hold { color: #22598a; font-weight: 700; }
.big-board .cls-col { border-top: 3px solid var(--cc); color: var(--cc); }
/* Class titles on the wood, in the site's chunky title style: Titan One in the class colour with a thick dark outline
   and a drop (the owner: "improve the titles"; pale tints looked weak), centred with a bigger icon. Browsers that can't
   paint the outline behind the letters get a shadow outline instead. */
.big-board .cls-col b, .big-board thead .tier-col { font-size: 17px; letter-spacing: 0.03em; text-shadow: 2px 0 0 #1a0f04, -2px 0 0 #1a0f04, 0 2px 0 #1a0f04, 0 -2px 0 #1a0f04, 1.5px 1.5px 0 #1a0f04, -1.5px 1.5px 0 #1a0f04, 1.5px -1.5px 0 #1a0f04, -1.5px -1.5px 0 #1a0f04, 0 3px 0 #1a0f04; }
@supports (paint-order: stroke fill) {
  .big-board .cls-col b, .big-board thead .tier-col { -webkit-text-stroke: 4px #1a0f04; paint-order: stroke fill; text-shadow: 0 2px 0 #1a0f04; }
}
.big-board .cls-col b { color: color-mix(in srgb, var(--cc) 88%, #fff); }
.big-board .cls-col .th-in .gi { width: 26px; height: 26px; }
.big-board .cls-col .th-in { display: flex; align-items: center; gap: 7px; }
.big-board .cls-col .th-in .gi { margin: -4px 0; }
.big-board .cls-col .th-in b { line-height: 1; }
.big-board .cls-col .th-in em.rare { margin-left: 0; }
.big-board thead .tier-col { color: #ffd86a; padding-top: 6.5px; padding-bottom: 5.5px; } /* its word sat half a pixel high */
.big-board.armour thead th:not(.tier-col) { padding-top: 5px; padding-bottom: 7px; } /* and these a pixel low */
/* The rare classes' badge, chunky like the titles beside it: the class colour, a dark outline and drop, a drawn lock
   while the class's land is closed (the owner: the old 🔒 rare tag didn't look good). */
.big-board .cls-col em.rare {
  display: inline-flex; align-items: center; gap: 3px; box-sizing: border-box; height: 19px; padding: 0 6px;
  border: 2px solid #1a0f04; border-radius: 7px; background: var(--cc); color: #1a0f04;
  font: 400 11px/1 var(--display); font-style: normal; letter-spacing: 0.06em; text-shadow: none; box-shadow: 0 2px 0 #1a0f04;
}
.big-board .cls-col em.rare > span { display: block; translate: 0 -0.03em; }
.big-board .cls-col em.rare .lock { flex: none; width: 8px; height: 10px; }
.big-board td.cell { background: color-mix(in srgb, var(--cc, #8a6530) 15%, transparent); border-left: 1px solid var(--rs-line); }
.big-board .piece small { color: var(--rs-ink); }
.big-board.attacks .atk-name { border-left: 4px solid var(--cc); }
.big-board.attacks tr.sec th { background: linear-gradient(90deg, color-mix(in srgb, var(--cc, #8a6530) 60%, #40280d), #40280d 85%); color: #fff3cf; font-family: var(--display); font-weight: 400; text-shadow: 1px 1px 0 #000; border-top: 2px solid #24160a; border-bottom: 2px solid #24160a; }
.big-board.attacks tr.sec th .redact-note { color: var(--rs-gold); font-family: var(--body); }
/* The element chart */
.el-table th, .el-table td { border: 1px solid var(--rs-line); }
.el-table thead th small { color: #f3dfae; font-family: var(--body); }
.el-table tbody th { background: #e3cc97; }
.el-table td { color: var(--rs-ink-2); font-weight: 700; }
.el-table td.strong { background: rgba(60, 150, 50, 0.3); color: #124d12; }
.el-table td.weak { background: rgba(190, 50, 30, 0.2); color: #861a0e; }
/* Monsters: a wooden plaque per element (per closed land while it is closed), one line per monster */
.zone-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 272px), 1fr)); }
.zone-card { padding: 0 0 8px; overflow: hidden; }
.zone-card h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 4px; padding: 7px 12px; background: var(--rs-wood); color: var(--rs-gold); text-shadow: 1px 1px 0 #000; border-bottom: 2px solid #24160a; white-space: nowrap; }
.zone-card h3 small { color: #f3dfae; font-size: 12px; }
.zone-card > p { padding: 6px 12px 0; }
.zone-card ul { padding: 0 8px; gap: 0; }
.zone-card li.mon { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 16px auto; align-items: center; gap: 6px; padding: 3px 4px; white-space: nowrap; flex-wrap: nowrap; border-bottom: 1px dotted var(--rs-line); }
.zone-card li.mon:last-child { border-bottom: 0; }
.zone-card li.mon .gi { width: 24px; height: 24px; margin: 0; }
.zone-card li.mon b { overflow: hidden; text-overflow: ellipsis; color: var(--rs-ink); font-size: 14px; }
.zone-card li.mon small { color: var(--rs-ink-2); font-size: 12px; }
.zone-card li.mon em { font-style: normal; font-size: 13px; text-align: center; }
.zone-card li.mon em.elite { color: #9a1a0e; }
.zone-card li.mon .el-chip { justify-self: end; }
/* Monsters by element: the element's name in its colour on the plaque, what hits it hard, and where each monster lives
   under its name. */
.el-card h3 span { color: color-mix(in srgb, var(--elc) 78%, #fff); }
.el-card .weak-to { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0 8px; padding: 3px 4px 7px; color: var(--rs-ink-2); font-size: 12.5px; font-weight: 700; border-bottom: 1px solid var(--rs-line); }
.el-card li.mon { grid-template-columns: 26px minmax(0, 1fr) auto 16px; padding: 4px; }
.el-card li.mon .who { display: grid; min-width: 0; line-height: 1.25; }
.el-card li.mon .who b { overflow: hidden; text-overflow: ellipsis; }
.el-card li.mon .who small { font-size: 11.5px; white-space: normal; }
/* Class paths */
.path-card { border-top: 3px solid #5a3d18; padding: 0 14px 14px; overflow: hidden; }
.path-card header { margin: 0 -14px 10px; padding: 10px 14px; background: var(--rs-wood); border-bottom: 3px solid var(--cc); }
.path-card h3 { color: color-mix(in srgb, var(--cc) 85%, #fff); text-shadow: 1px 1px 0 #000; }
.path-card header p { color: #f3dfae; }
.path-meta { color: var(--rs-ink); }
.path-meta small, .path-weapon { color: var(--rs-ink-2); }
.path-weapon b, .path-meta b { color: var(--rs-ink); }
.path-route { background: rgba(110, 76, 31, 0.12); border: 1px solid var(--rs-line); color: var(--rs-ink); }
.path-route > span, .path-route .arrow { color: var(--rs-amber); }
.path-stage h4 { color: var(--rs-amber); }
.path-stage .pa { background: var(--rs-stone); border: 1px solid #120c06; border-radius: 3px; box-shadow: var(--rs-bevel); color: #f3e6c4; text-shadow: 1px 1px 0 #000; }
.path-stage .pa small { color: #d8c49a; }
.path-stage .pa.fit-best { border-color: #8fd14f; box-shadow: inset 0 0 0 1px rgba(143, 209, 79, 0.55), var(--rs-bevel); background: var(--rs-stone); }
.path-stage .pa.fit-best .fit { color: #b6ff8a; }
.path-stage .pa.fit-poor { opacity: 0.7; }
.path-stage .pa.fit-poor .fit { color: #ff9a8a; }
/* Final bosses and the live numbers */
.boss-card :is(h3, .boss-name) { color: #8a1a0e; }
.boss-card :is(h3, .boss-name) small, .boss-card .board-key { color: var(--rs-ink-2); }
.boss-card p { color: var(--rs-ink); }
.stat-tiles div { background: var(--rs-stone); border: 2px solid #120c06; border-radius: 4px; box-shadow: var(--rs-bevel); }
.stat-tiles b { color: #ffde00; text-shadow: 1px 1px 0 #000; }
.stat-tiles small { color: #e8d8b0; }
/* The attacks board: four columns, the attack's element and cost under its name */
.big-board.attacks { table-layout: auto; }
.big-board.attacks .atk-name { white-space: nowrap; }
.big-board.attacks .atk-name .gi { vertical-align: middle; }
.big-board.attacks .atk-id { display: inline-flex; flex-direction: column; gap: 2px; vertical-align: middle; }
.big-board.attacks .atk-meta { display: inline-flex; align-items: center; gap: 6px; }
.big-board.attacks .atk-meta small { color: var(--rs-ink-2); font-size: 11.5px; }
.big-board.attacks .atk-cost { font-weight: 700; }
.big-board.attacks .atk-what { min-width: 180px; color: var(--rs-ink); }
.big-board.attacks .atk-what .atk-fx { display: block; margin-top: 2px; font-size: 11.5px; }
.big-board.attacks .atk-where { min-width: 86px; }
.big-board.attacks .atk-fit { min-width: 96px; }
.big-board.attacks td { padding: 6px 6px; }
.big-board.attacks thead th .cls-chip { font-size: 11px; }
.cls-chip.poor { opacity: 0.85; }
.big-board.attacks thead th:last-child { white-space: normal; line-height: 1.7; }
/* Parchment tables: a portrait (or icon) and its name side by side, never wrapping under each other */
.table.rs .who-cell { display: inline-flex; align-items: center; gap: 8px; }
.table.rs .who-cell > span { display: flex; flex-direction: column; }
.table.rs .who-cell b { white-space: nowrap; }
.table.rs .who-cell small { white-space: normal; max-width: 180px; }
.table.rs .tch { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.table.rs .tch .gi, .table.rs .who-cell .gi { width: 28px; height: 28px; margin: 0; flex: none; }
.table.rs .nw { white-space: nowrap; }
.table.rs td.also { min-width: 110px; }
.table.rs th, .table.rs td { padding: 8px 10px; }
/* The masters board has five columns: a little less padding keeps it inside the page on a computer. */
.table.rs.masters th, .table.rs.masters td { padding: 8px 7px; }
/* The element chart on a phone: icons only, so all eight columns fit */
.el-table .el-short { display: none; }
@media (max-width: 640px) {
  .el-table { font-size: 11px; }
  .el-table th, .el-table td { padding: 5px 2px; }
  .el-table thead th small { display: none; }
  .el-table thead th:first-child { white-space: normal; font-size: 10px; line-height: 1.2; }
  .el-table tbody th { text-align: center; }
  .el-table tbody th .el-chip { display: none; }
  .el-table tbody th .el-short { display: inline; font-size: 15px; }
  .el-table td .z { display: none; }
}

/* Element tags, as on the World's battle cards (world.css .gba-st .st.el): the element's colour over dark navy, a thin
   border in that colour, a small icon and the name in white pixel capitals. */
.el-chip {
  display: inline-flex; align-items: center; gap: 4px; box-sizing: border-box; height: 20px; padding: 1px 7px 0 5px; border-radius: 3px; /* the pixel capitals sit high: the spare pixel goes on top */
  background: color-mix(in srgb, var(--elc) 30%, #141d40); border: 1px solid var(--elc); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  color: #fff; font: 400 16px/1 var(--pixel); letter-spacing: 0.05em; text-transform: uppercase; text-shadow: none; white-space: nowrap; vertical-align: middle;
}
.el-chip i { font-style: normal; font-size: 11px; line-height: 1; letter-spacing: 0; }
.path-stage .pa .el-chip { height: 17px; padding: 2px 5px 0 4px; font-size: 14px; }
.path-stage .pa .el-chip i { font-size: 10px; }

/* ------------------------------------------------------------------ simulations: the card hunt simulator (docs/sim.js) */
.sim-set td small { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.sim-set td b { color: var(--text-strong); }
.sim-medal { display: inline-block; width: 11px; height: 11px; margin-right: 8px; border-radius: 50%; background: var(--medal); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35); vertical-align: -1px; }
.page .sim-small { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.sim-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.sim-group { display: grid; gap: 7px; min-width: 0; }
.sim-group:not(.sim-slide) { grid-column: 1 / -1; }
.sim-label { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sim-label small { font-size: 11px; letter-spacing: 0.02em; text-transform: none; }
.sim-label b { margin-left: 6px; font: 400 19px/1 var(--display); letter-spacing: 0; text-transform: none; color: var(--gold); }
.sim-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sim-chip { min-height: 36px; padding: 4px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--navy-900); color: var(--text); font: 700 14px/1.2 var(--body); cursor: pointer; }
.sim-chip small { margin-left: 3px; font-size: 11px; font-weight: 800; color: var(--muted); }
.sim-chip:hover { border-color: var(--gold); }
.sim-chip:focus-visible, .sim-cell:focus-visible, .sim-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.sim-chip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--navy-950); }
.sim-chip[aria-pressed="true"] small { color: var(--navy-800); }
.sim-slide input[type="range"] { width: 100%; margin: 4px 0; accent-color: var(--gold); }
.sim-slide > small { font-size: 12.5px; color: var(--muted); }
.sim-tierchips .sim-chip { min-height: 32px; font-size: 13px; }
.sim-link { padding: 0; border: 0; background: none; color: var(--cyan); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.sim-head b { font: 400 24px/1.2 var(--display); color: var(--gold); }
.sim-head span { font-size: 14px; color: var(--muted); }
/* Today's ratio: the players' share and the influencers' pool, the pool shaded by what's paid out of it. */
.sim-bar { display: flex; gap: 3px; height: 26px; margin: 10px 0 8px; }
.sim-seg { position: relative; display: flex; align-items: center; min-width: 0; padding: 0 10px; overflow: hidden; border-radius: 7px; }
.sim-seg em { position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 12.5px/1 var(--body); font-style: normal; color: var(--navy-950); }
.sim-seg.is-comm, .sim-key.is-comm { background: var(--gold); }
.sim-seg.is-amb { background: rgba(255, 111, 177, 0.32); }
.sim-seg.is-amb em { color: #fff; }
.sim-paid { position: absolute; left: 0; top: 0; bottom: 0; background: #ff6fb1; }
.sim-key.is-amb { background: #ff6fb1; }
.sim-key.is-rest { background: rgba(255, 111, 177, 0.32); }
.sim-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13.5px; color: var(--muted); }
.sim-legend b { color: var(--text-strong); }
.sim-key { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.sim-tiles { margin: 16px 0 18px; }
.lv-stat.is-hi { border-color: rgba(255, 210, 63, 0.6); }
.sim-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.page .sim-h { display: flex; align-items: center; gap: 4px; margin: 0 0 10px; font: 400 17px/1.3 var(--display); color: var(--text-strong); }
.page .sim-h small { margin-left: auto; font: 700 12.5px var(--body); color: var(--muted); }
.sim-rows { display: grid; gap: 7px; }
.sim-row { display: grid; grid-template-columns: minmax(124px, 1fr) minmax(48px, 1.2fr) auto; align-items: center; gap: 10px; font-size: 14px; }
.sim-row > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--text-strong); }
.sim-track { position: relative; height: 10px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.07); }
.sim-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--gold); }
.sim-row.is-avg .sim-track i { background: var(--cyan); }
.sim-track.is-amb i { background: #ff6fb1; }
.sim-track.is-amb i.ask { background: rgba(255, 111, 177, 0.28); }
.sim-val { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.sim-val b { color: var(--text-strong); }
.sim-val small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sim-metrics { margin: 0 0 4px; }
.sim-grid th small { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.sim-grid td { padding: 3px; }
.sim-cell { display: grid; place-items: center; width: 100%; min-width: 76px; padding: 14px 6px; border: 1px solid transparent; border-radius: 8px; background: rgba(255, 210, 63, var(--a)); color: var(--text-strong); font: inherit; cursor: pointer; }
.sim-cell b { font-size: 17px; white-space: nowrap; }
.sim-cell b small { margin-left: 1px; font-size: 12px; opacity: 0.7; }
.sim-tiers td small { color: var(--muted); }
.sim-explain { margin: 14px 0 6px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(3, 10, 44, 0.35); font-size: 14px; line-height: 1.55; }
.sim-explain-h { color: var(--text-strong); }
.sim-explain > small { color: var(--muted); font-size: 12.5px; }
.sim-explain ol { margin: 8px 0 0; padding-left: 20px; }
.sim-explain li { margin: 3px 0; }
.sim-explain li b { color: var(--gold); }
.sim-cell.is-ink { color: var(--navy-950); }
.sim-cell.is-on { border-color: var(--cyan); box-shadow: 0 0 0 2px var(--cyan); }
.sim-cell:hover { border-color: var(--cyan); }
@media (max-width: 640px) {
  .sim-controls, .sim-duo { grid-template-columns: 1fr; }
  .sim-chip { min-height: 34px; padding: 4px 10px; font-size: 13px; }
  .sim-seg em span { display: none; } /* just the % in the bar; the legend names them */
}

/* What's new for a World player (docs.js markNew, from the World's ⓘ): their unseen dev log entries wear NEW in gold,
   and a box over the entries (after Jump to) links the first few. */
.tag.new { color: var(--gold); border-color: rgba(255, 210, 63, 0.6); background: rgba(255, 210, 63, 0.12); margin-left: 6px; font-size: 14px; line-height: 18px; vertical-align: 1px; }
.log-entry.is-new { border-color: rgba(255, 210, 63, 0.55); box-shadow: inset 3px 0 0 var(--gold); }
.log-new { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 18px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255, 210, 63, 0.5); background: rgba(255, 210, 63, 0.07); }
.log-new b { flex-basis: 100%; color: var(--gold); font: 400 16px var(--display); }
.log-new a { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text-strong); font-size: 14px; font-weight: 700; line-height: 1.4; text-decoration: none; }
.log-new a:hover { border-color: var(--gold); }
.log-new time { flex: none; color: var(--gold); font-weight: 800; }
.log-new span { align-self: center; color: var(--muted); font-size: 14px; }

/* Collector Crypt: photographs of one real slab beside the explanation. */
.cc-example { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(200px, 1fr); gap: 24px; align-items: center; margin: 22px 0; }
.cc-slabs { display: flex; gap: 12px; justify-content: center; }
.cc-slabs figure { flex: 1; min-width: 0; margin: 0; text-align: center; }
.cc-slabs img { display: block; width: 100%; max-width: 180px; height: auto; margin: auto; border-radius: 9px; }
.cc-slabs figcaption { margin-top: 8px; font-size: 14px; }
@media (max-width: 600px) { .cc-example { grid-template-columns: 1fr; } }

/* New player guide (#new-player): the day as a road of six stops in the game's own art, then picture tiles like the
   tutorial's (a framed picture, the name, one line), and the tutorial's three pages side by side. */
.np-road { position: relative; list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 24px 0 34px; padding: 0; counter-reset: np; }
.np-road::before { content: ""; position: absolute; left: 8%; right: 8%; top: 38px; border-top: 3px dotted rgba(255, 210, 63, 0.5); }
.np-road li { margin: 0; counter-increment: np; }
.np-road a { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; color: var(--text); }
.np-road a:hover { text-decoration: none; }
.np-dot { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #1b3296, #081245 72%); box-shadow: inset 0 0 0 2px var(--line-2), 0 4px 0 #000a2e; transition: box-shadow 0.15s, transform 0.15s; }
.np-dot::after { content: counter(np); position: absolute; top: -3px; left: -3px; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; font: 400 14px/1 var(--display); color: var(--navy-950); background: var(--gold); box-shadow: 0 2px 0 var(--gold-dark); }
.np-road a:hover .np-dot { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--gold), 0 6px 0 #000a2e; }
.np-road .gold .np-dot { box-shadow: inset 0 0 0 2px var(--gold), 0 0 20px rgba(255, 210, 63, 0.35), 0 4px 0 #000a2e; }
.np-dot .gi { width: 50px; height: 50px; margin: 0; }
.np-dot .gi.npc { width: 46px; height: 50px; }
.np-dot img.np-img { width: 50px; height: 50px; object-fit: contain; border: 0; border-radius: 0; box-shadow: none; background: none; }
.np-road b { font: 400 15px/1.2 var(--display); color: var(--text-strong); }
.np-road small { font-size: 12.5px; line-height: 1.3; color: var(--muted); }

.np-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 16px 0 14px; }
.np-tile { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 8px 14px; text-align: center; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); }
.np-art { display: grid; place-items: center; width: 100%; height: 108px; margin-bottom: 8px; border-radius: 10px; background: linear-gradient(180deg, #58a343 0 64%, #47923a 64%); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.22); }
.np-art.night { background: radial-gradient(circle at 50% 55%, #2a3f9e, #0b1550 75%); }
.np-art.gold { background: radial-gradient(circle at 50% 50%, #5d3fb0, #241063 75%); }
.np-art .gi { width: 72px; height: 72px; margin: 0; }
.np-art .gi.npc { width: 64px; height: 70px; }
.np-art .gi.beast { width: 100%; height: 100px; }
.np-art img.np-img { width: auto; height: 92px; border: 0; border-radius: 0; box-shadow: none; background: none; }
.np-tile b { font: 400 16px/1.2 var(--display); color: var(--gold); }
.np-tile span { font-size: 13px; line-height: 1.4; color: var(--muted); }
.np-see { margin: 0 0 30px; font-size: 14px; color: var(--muted); }

.np-tut { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 14px; margin: 16px 0 14px; }
.np-tut figure { margin: 0; }
.np-tut a { display: block; }
.np-tut img { border-radius: 12px; }
.np-tut figcaption { margin-top: 8px; text-align: left; line-height: 1.35; }
.np-tut figcaption b { display: block; font-size: 14.5px; color: var(--text-strong); }
.np-pic { max-width: 400px; margin: 16px auto 14px; }

@media (max-width: 640px) {
  .np-road { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
  .np-road::before { display: none; }
  .np-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .np-tiles .np-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .np-tut { gap: 8px; }
  .np-tut img { border-radius: 8px; }
  .np-tut figcaption { margin-top: 6px; }
  .np-tut figcaption b { font-size: 12.5px; }
  .np-tut figcaption span { display: none; }
}

/* ---------------------------------------------------------------- Card Hunt demo (#card-hunt, docs/hunt-demo.js)
   One hunt on a loop in the World's own art: the meadow as the World draws it (2x), with the hunt pill, the area banner,
   the chat, the guardian's card, the fight and the pack opening styled as in world.css and hunt.css. Sizes follow the
   stage's width (--u: 1% of it; more on a phone's taller stage). Each shown state has its own resting style and its
   animation only brings it in, since reduced motion turns every animation off (the rule near the top). */
.hunt-demo { container-type: inline-size; margin: 20px 0 26px; }
.hd-stage { --u: 1cqw; position: relative; aspect-ratio: 16 / 10; overflow: hidden; isolation: isolate; border: 2px solid var(--line-2); border-radius: 14px; background: #71b953 url("/assets/docs-hunt/meadow-v1.webp") 39% 50% / cover no-repeat; image-rendering: pixelated; box-shadow: 0 4px 0 #000a2e; font: 400 calc(var(--u) * 2.1)/1.25 var(--pixel); color: #f1ecd8; letter-spacing: 0.02em; user-select: none; -webkit-user-select: none; }
@container (max-width: 560px) { .hd-stage { --u: 1.6cqw; aspect-ratio: 4 / 5; } }
.hd-stage :is(img, canvas) { image-rendering: pixelated; }
.hd-stage.paused *, .hd-stage.paused *::before, .hd-stage.paused *::after { animation-play-state: paused !important; }
.hd-world { --sx: 300px; --sy: 104px; position: absolute; left: 0; top: 0; width: 768px; height: 480px; transform-origin: 0 0; }
.hd-ground { position: absolute; left: 0; top: 0; width: 768px; height: 480px; max-width: none; }
.hd-hero { position: absolute; left: 0; top: 0; z-index: 3; width: 32px; height: 64px; will-change: transform; }
.hd-hero.off { visibility: hidden; }
.hd-hero canvas { position: absolute; left: 0; top: 0; width: 32px; height: 64px; }
.hd-shadow { position: absolute; left: 6px; bottom: -2px; width: 20px; height: 6px; border-radius: 50%; background: rgba(10, 20, 10, 0.28); }
.hd-tag { position: absolute; left: 50%; bottom: 100%; margin-bottom: 1px; transform: translateX(-50%); font: 400 16px/1 var(--pixel); color: #fff; white-space: nowrap; text-shadow: 1px 1px 0 #000a2e, -1px -1px 0 #000a2e, 1px -1px 0 #000a2e, -1px 1px 0 #000a2e; transition: opacity 0.2s; }
.hd-guard.show ~ .hd-hero .hd-tag, .hd-hero:has(.hd-bang.show) .hd-tag { opacity: 0; }
.hd-bang { position: absolute; left: 76%; bottom: 82%; font: 400 40px/1 var(--display); font-style: normal; color: var(--gold); text-shadow: 2px 2px 0 #1b1424, -2px -2px 0 #1b1424, 2px -2px 0 #1b1424, -2px 2px 0 #1b1424; opacity: 0; transform-origin: 50% 100%; }
.hd-bang.show { opacity: 1; animation: hdBang 0.45s cubic-bezier(0.2, 1.8, 0.4, 1) both; }
.hd-glow, .hd-dust { position: absolute; left: var(--sx); top: var(--sy); border-radius: 50%; opacity: 0; pointer-events: none; }
.hd-glow { width: 130px; height: 46px; margin: -23px 0 0 -65px; background: radial-gradient(closest-side, rgba(255, 246, 200, 0.95), rgba(255, 210, 63, 0.55) 45%, rgba(255, 210, 63, 0)); }
.hd-glow.show { opacity: 0.55; transform: scale(0.9); animation: hdGlow 1.8s ease-out both; }
.hd-dust { width: 150px; height: 52px; margin: -26px 0 0 -75px; border: 4px solid rgba(255, 255, 255, 0.85); }
.hd-dust.show { animation: hdRing 0.7s ease-out forwards; }
.hd-guard { position: absolute; left: var(--sx); top: var(--sy); z-index: 2; width: 96px; height: 73px; margin: -71px 0 0 -48px; opacity: 0; transform-origin: 50% 100%; }
.hd-guard::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -4px; height: 8px; border-radius: 50%; background: rgba(10, 20, 10, 0.3); }
.hd-guard img { display: block; width: 96px; height: 73px; animation: hdBob 1.6s ease-in-out infinite; }
.hd-guard.show { opacity: 1; animation: hdRise 0.9s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
.hd-pill { position: absolute; left: 50%; top: calc(var(--u) * 2.2); z-index: 5; display: inline-flex; align-items: center; gap: calc(var(--u) * 0.8); height: calc(var(--u) * 4.6); padding: 0 calc(var(--u) * 1.6); transform: translateX(-50%); border-radius: calc(var(--u) * 1.2); background: rgba(6, 12, 40, 0.86); border: 2px solid rgba(196, 139, 255, 0.55); box-shadow: 0 0 6px rgba(196, 139, 255, 0.18); color: #fff; font-size: calc(var(--u) * 2.3); white-space: nowrap; }
.hd-pill.live { border-color: #4fe08a; }
.hd-pill > span { line-height: 1; }
.hd-pill b { font-weight: 400; color: var(--gold); font-size: calc(var(--u) * 3); font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 #000a2e; }
.hd-pill i { position: relative; flex: none; display: block; width: calc(var(--u) * 3); height: calc(var(--u) * 4.9); margin: calc(var(--u) * -0.8) calc(var(--u) * 0.3) calc(var(--u) * -0.8) calc(var(--u) * -0.5); }
.hd-pill i img { display: block; width: 100%; height: 100%; transform: rotate(-8deg); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); image-rendering: auto; }
.hd-pill.hiding i img { animation: hdShake 2.4s ease-in-out infinite; }
.hd-pill.live i::after { content: ""; position: absolute; right: -3px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: #4fe08a; box-shadow: 0 0 6px #4fe08a; animation: hdLive 1.6s ease-in-out infinite; }
.hd-pill i em { position: absolute; right: calc(var(--u) * -1.3); bottom: calc(var(--u) * -0.5); min-width: calc(var(--u) * 2.1); height: calc(var(--u) * 2.1); padding: 0 3px; box-sizing: border-box; border-radius: 99px; background: var(--gold); color: #0a1440; font: 700 calc(var(--u) * 1.5)/calc(var(--u) * 2.1) system-ui, sans-serif; font-style: normal; text-align: center; box-shadow: 0 1px 0 #000a2e; }
.hd-pill i em[hidden] { display: none; }
.hd-fly { position: absolute; left: 0; top: 0; z-index: 5; display: block; pointer-events: none; will-change: transform, opacity; }
.hd-fly img { display: block; width: 100%; height: 100%; image-rendering: auto; filter: drop-shadow(0 0 6px rgba(255, 210, 63, 0.75)) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.55)); }
.hd-fly.ghost img { filter: none; }
.hd-twinkle { position: absolute; z-index: 5; width: 0; height: 0; pointer-events: none; }
.hd-twinkle::before, .hd-twinkle::after { content: ""; position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(0); }
.hd-twinkle::before { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle, #fff 0 8%, #ffd23f 9% 22%, transparent 23%), conic-gradient(from 0deg, transparent 0 40deg, #fff6c8 45deg, transparent 50deg 130deg, #fff6c8 135deg, transparent 140deg 220deg, #fff6c8 225deg, transparent 230deg 310deg, #fff6c8 315deg, transparent 320deg); animation: hdTwinkle 0.7s ease-out forwards; }
.hd-twinkle::after { width: 26px; height: 26px; border: 2px solid rgba(255, 210, 63, 0.9); border-radius: 50%; animation: hdTwRing 0.7s ease-out forwards; }
.hd-area { position: absolute; left: 50%; top: calc(var(--u) * 9); z-index: 4; min-width: calc(var(--u) * 30); padding: calc(var(--u) * 0.9) calc(var(--u) * 3) calc(var(--u) * 1); text-align: center; background: linear-gradient(180deg, #a8744a, #7a4f2c); border: 3px solid #3a2616; border-radius: 6px; box-shadow: inset 0 0 0 2px #c8945e, 0 6px 16px rgba(0, 0, 0, 0.45); transform: translate(-50%, -40%); opacity: 0; transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.18s ease; }
.hd-area.show { transform: translate(-50%, 0); opacity: 1; }
.hd-area b { display: block; font: 400 calc(var(--u) * 2.9)/1.2 var(--display); color: #fff6e0; text-shadow: 2px 2px 0 #3a2616; }
.hd-area small { display: block; font-size: calc(var(--u) * 2.1); color: #ffe6b0; }
.hd-chat { position: absolute; left: calc(var(--u) * 1.6); bottom: calc(var(--u) * 1.6); z-index: 4; width: 50%; display: flex; flex-direction: column; gap: calc(var(--u) * 0.5); padding: calc(var(--u) * 1) calc(var(--u) * 1.4); background: rgba(13, 22, 56, 0.84); border: 2px solid #070b1c; border-radius: 6px; box-shadow: inset 0 0 0 1px #4a5c98; font-size: calc(var(--u) * 2.15); line-height: 1.3; transition: opacity 0.2s; }
.hd-chat:empty { opacity: 0; }
.hd-chat p { margin: 0; overflow-wrap: anywhere; animation: hdLine 0.35s ease-out; }
.hd-chat .m-system { color: #c9a8ff; }
.hd-chat .m-hunt { color: #e3c2ff; }
.hd-ccard { display: grid; grid-template-columns: auto auto; column-gap: calc(var(--u) * 1); align-items: center; width: max-content; max-width: 100%; margin-top: calc(var(--u) * 0.6); padding: calc(var(--u) * 0.5) calc(var(--u) * 1.6) calc(var(--u) * 0.5) calc(var(--u) * 0.5); border-radius: 8px; background: linear-gradient(180deg, #241a52, #120c30); border: 2px solid var(--rc, #ffd23f); }
.hd-cthumb { grid-row: span 2; width: calc(var(--u) * 3.4); aspect-ratio: 0.6; overflow: hidden; border-radius: 3px; background: #0a1440; }
.hd-cthumb img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.hd-ccard b { font-weight: 400; color: #fff; }
.hd-ccard small { font-size: 0.9em; color: #c9b8ef; }
.hd-ccard.r-common { --rc: #4fe08a; } .hd-ccard.r-uncommon { --rc: #7fd4ff; } .hd-ccard.r-epic { --rc: #c08aff; }
.hd-lease { position: absolute; right: calc(var(--u) * 1.8); top: calc(var(--u) * 9); z-index: 5; width: 47%; padding: calc(var(--u) * 1.4) calc(var(--u) * 1.6); background: linear-gradient(180deg, #243263, #1c2750); border: 2px solid #070b1c; border-radius: 6px; box-shadow: inset 0 0 0 1px #4a5c98, inset 0 0 0 3px #141d40, 0 6px 18px rgba(0, 0, 0, 0.45); font-size: calc(var(--u) * 1.95); line-height: 1.3; opacity: 0; visibility: hidden; transform: translateY(-12px) scale(0.96); transition: opacity 0.25s, transform 0.3s cubic-bezier(0.2, 1.4, 0.4, 1), visibility 0s linear 0.3s; }
.hd-lease.show { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.hd-ltop { display: flex; align-items: center; gap: calc(var(--u) * 1.2); }
.hd-lpic { flex: none; width: calc(var(--u) * 9); height: calc(var(--u) * 9); object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.5)); }
.hd-kicker { display: block; color: #ff981f; font-size: calc(var(--u) * 1.55); letter-spacing: 0.1em; text-transform: uppercase; }
.hd-lname { display: block; font: 400 calc(var(--u) * 2.9)/1.15 var(--display); color: var(--gold); }
.hd-lease p { margin: calc(var(--u) * 0.3) 0; }
.hd-rec { color: #7fd4ff; }
.hd-tier { display: inline-block; padding: 0 calc(var(--u) * 0.8); border-radius: 99px; background: rgba(110, 230, 140, 0.18); border: 1px solid rgba(110, 230, 140, 0.55); color: #9ff0b4; }
.hd-packtag { display: inline-block; padding: 0 calc(var(--u) * 0.6); border-radius: 4px; background: #5b1f99; color: #f1e0ff; font-size: 0.8em; letter-spacing: 0.03em; }
.hd-lease .hd-terms { margin: calc(var(--u) * 0.8) 0; padding: calc(var(--u) * 0.6) calc(var(--u) * 0.8); border-radius: 6px; background: rgba(3, 10, 44, 0.6); color: #dfe6ff; }
.hd-terms b { font-weight: 400; color: #fff; }
.hd-row { display: flex; gap: calc(var(--u) * 0.8); }
.hd-btn { position: relative; flex: 1; padding: calc(var(--u) * 0.7) calc(var(--u) * 0.6); text-align: center; color: #fff; font-size: calc(var(--u) * 2.1); background: linear-gradient(180deg, #34457e, #1f2b58); border: 2px solid #070b1c; border-radius: 6px; box-shadow: inset 0 0 0 1px #4a5c98; }
.hd-btn.gold { color: #06124f; background: linear-gradient(180deg, #ffe066, #e8b52a); border-color: #3a2a00; box-shadow: inset 0 0 0 1px #fff3b0, 0 3px 0 #8a6410; }
.hd-btn.gold.press { transform: translateY(2px); filter: brightness(1.12); box-shadow: inset 0 0 0 1px #fff3b0, 0 1px 0 #8a6410; }
.hd-tap { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 6); height: calc(var(--u) * 6); margin: calc(var(--u) * -3) 0 0 calc(var(--u) * -3); border: 3px solid #fff; border-radius: 50%; opacity: 0; pointer-events: none; }
.hd-tap.go { animation: hdTap 0.6s ease-out forwards; }
.hd-fight { position: absolute; inset: 0; z-index: 6; background: #000; opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0s linear 0.35s; }
.hd-fight.show { opacity: 1; visibility: visible; transition-delay: 0s; }
.hd-scene { position: absolute; inset: 0; overflow: hidden; }
.hd-scene canvas { position: absolute; left: 0; top: 0; }
.hd-scene .bt-pops { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hd-scene .bt-stamp { position: absolute; transform: translate(-50%, -50%); font: 400 calc(var(--u) * 3.8)/1 var(--display); white-space: nowrap; pointer-events: none; color: #fff; text-shadow: 3px 3px 0 #1b1424, -2px -2px 0 #1b1424, 2px -2px 0 #1b1424, -2px 2px 0 #1b1424; animation: hdStamp 1.2s cubic-bezier(0.2, 1.6, 0.4, 1) forwards; }
.hd-scene .bt-stamp.ko { font-size: calc(var(--u) * 13); color: var(--gold); text-shadow: 6px 6px 0 #1b1424, -3px -3px 0 #1b1424, 3px -3px 0 #1b1424, -3px 3px 0 #1b1424, 0 0 50px rgba(255, 80, 40, 0.8); animation: hdKo 1.9s cubic-bezier(0.2, 1.5, 0.4, 1) forwards; }
.hd-gba { position: absolute; left: calc(var(--u) * 2); top: calc(var(--u) * 2); z-index: 5; width: 36%; padding: calc(var(--u) * 0.8) calc(var(--u) * 1.4) calc(var(--u) * 1); color: #1b1424; background: linear-gradient(180deg, #fbf8e8, #ebe3c4); border: 3px solid #2a2a3a; border-radius: 10px 10px 10px 2px; box-shadow: 0 4px 0 rgba(3, 10, 44, 0.6), inset 0 0 0 2px #fff; }
.hd-gtop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hd-gtop b { font-weight: 400; font-size: calc(var(--u) * 2.6); line-height: 1.1; }
.hd-gtop span { font-size: calc(var(--u) * 1.6); color: #6a5a7a; }
.hd-hp { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.hd-hp em { padding: 0 4px; border-radius: 3px; background: #2a2a3a; color: #ffb000; font-size: calc(var(--u) * 1.5); font-style: normal; }
.hd-hp > span { flex: 1; height: calc(var(--u) * 1.3); overflow: hidden; background: #4a4a5a; border: 2px solid #2a2a3a; border-radius: 99px; }
.hd-hp i { display: block; width: 100%; height: 100%; background: linear-gradient(180deg, #7cf08a, #3fbf5a); transition: width 0.5s ease-out; }
.hd-hp i.mid { background: linear-gradient(180deg, #ffe066, #e8b52a); }
.hd-hp i.low { background: linear-gradient(180deg, #ff8a80, #e84a3a); }
.hd-msg { position: absolute; left: calc(var(--u) * 1.6); right: calc(var(--u) * 1.6); bottom: calc(var(--u) * 1.6); z-index: 5; min-height: calc(var(--u) * 8); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.8); background: #1c2750; border: 3px solid #fbf8e8; border-radius: 10px; box-shadow: 0 0 0 3px #1b1424, inset 0 0 0 2px #0a102a; }
.hd-msg p { margin: 0; color: #fff; font-size: calc(var(--u) * 2.6); line-height: 1.3; text-shadow: 2px 2px 0 #0a102a; }
.hd-pop { position: absolute; z-index: 7; transform: translate(-50%, -100%); font: 400 calc(var(--u) * 4.4)/1 var(--display); color: #fff; text-shadow: 3px 3px 0 #1b1424, 0 0 12px rgba(255, 80, 80, 0.8); pointer-events: none; animation: hdPop 1.05s ease-out forwards; }
.hd-pop.big { font-size: calc(var(--u) * 5.6); color: #ffe066; }
.hd-pop.huge { font-size: calc(var(--u) * 7); color: #ffb347; text-shadow: 4px 4px 0 #1b1424, 0 0 18px rgba(255, 120, 40, 0.9); }
.hd-pop.me { color: #ff8a80; } .hd-pop.me.big, .hd-pop.me.huge { color: #ff5a5a; }
.hd-win { position: absolute; inset: 0; z-index: 3; overflow: hidden; background: radial-gradient(120% 90% at 50% 45%, #1d3aa8 0%, #0a1a6b 38%, #030a2c 75%); opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0s linear 0.4s; }
.hd-win.show { opacity: 1; visibility: visible; transition-delay: 0s; }
.hd-rays { position: absolute; left: 57%; top: 54%; width: 150%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, rgba(255, 210, 63, 0.15) 0 8deg, transparent 8deg 22deg); -webkit-mask: radial-gradient(closest-side, #000 25%, transparent 72%); mask: radial-gradient(closest-side, #000 25%, transparent 72%); animation: hdSpin 18s linear infinite; }
.hd-win .hd-who { position: absolute; left: 0; right: 0; top: calc(var(--u) * 9); margin: 0; text-align: center; font: 400 calc(var(--u) * 3.4)/1.1 var(--display); color: var(--gold); text-shadow: 3px 3px 0 #1b1424; }
.hd-open { position: absolute; left: 57%; top: 56%; width: calc(var(--u) * 15.5); aspect-ratio: 0.62; transform: translate(-50%, -50%); }
.hd-packbox .zpack { width: 100%; }
.hd-win.show .hd-packbox { animation: hdPackIn 1.9s ease-in-out both; }
.hd-win.opened .hd-packbox { opacity: 0; animation: hdPackGone 0.35s ease-in both; }
.hd-card { position: absolute; inset: 0; opacity: 0; }
.hd-win.opened .hd-card { opacity: 1; animation: hdCard 0.8s cubic-bezier(0.2, 1.3, 0.4, 1) 0.15s both; }
.hd-slab { position: absolute; inset: 0; overflow: hidden; border-radius: 6px; background: #0a1440; box-shadow: 0 0 0 3px var(--gold), 0 0 30px rgba(255, 210, 63, 0.6), 0 14px 24px rgba(0, 4, 24, 0.6); }
.hd-slab img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.hd-sample { position: absolute; right: -10%; top: 5%; padding: 1px 8px; border-radius: 6px; background: #ff8a1f; color: #1b0e00; font: 800 calc(var(--u) * 1.4)/1.5 var(--body); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; transform: rotate(8deg); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); }
.hd-burst { position: absolute; left: 50%; top: 50%; width: 260%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(0); background: radial-gradient(circle, #fff 0 10%, rgba(255, 230, 140, 0.9) 22%, rgba(255, 210, 63, 0) 60%); opacity: 0; pointer-events: none; }
.hd-win.opened .hd-burst { animation: hdBurst 0.7s ease-out both; }
.hd-pull { position: absolute; left: 67.5%; top: 56%; width: 30%; display: grid; justify-items: start; gap: calc(var(--u) * 0.7); transform: translateY(-50%); opacity: 0; }
.hd-win.opened .hd-pull { opacity: 1; animation: hdFade 0.5s ease-out 0.6s both; }
.hd-pull b { font: 400 calc(var(--u) * 3.2)/1.15 var(--display); color: #fff; text-shadow: 2px 2px 0 #1b1424; }
.hd-pull small { font-size: calc(var(--u) * 2.3); color: #c9b8ef; }
.hd-pull span { padding: 2px calc(var(--u) * 1.2); border-radius: 99px; background: rgba(61, 220, 132, 0.16); border: 1px solid #3ddc84; color: #b8f5c4; font-size: calc(var(--u) * 2.1); }
.hd-stage:has(.hd-win.show) .hd-chat { width: 40%; }
.hd-win .hd-who { padding-left: 20%; }
.hd-play { position: absolute; right: calc(var(--u) * 1.4); top: calc(var(--u) * 1.4); z-index: 8; display: grid; place-items: center; width: max(28px, calc(var(--u) * 4.4)); height: max(28px, calc(var(--u) * 4.4)); padding: 0; font-size: max(10px, calc(var(--u) * 1.6)); background: rgba(6, 12, 40, 0.72); border: 2px solid rgba(255, 255, 255, 0.55); border-radius: 50%; cursor: pointer; }
.hd-play:hover { border-color: var(--gold); }
.hd-play i { display: block; width: 0.9em; height: 1em; border-left: 0.3em solid #fff; border-right: 0.3em solid #fff; }
.hd-play.on i { width: 0; height: 0; margin-left: 0.2em; border-style: solid; border-width: 0.55em 0 0.55em 0.9em; border-color: transparent transparent transparent #fff; }
.hd-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; padding: 0; }
.hd-steps li { margin: 0; }
.hd-steps button { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 8px; width: 100%; height: 100%; padding: 9px 10px; text-align: left; font: inherit; color: var(--muted); background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.hd-steps button:hover { border-color: var(--gold); }
.hd-steps button i { grid-row: span 2; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 400 13px/1 var(--display); font-style: normal; color: var(--navy-950); background: var(--line-2); }
.hd-steps button b { color: var(--text-strong); font-size: 14px; line-height: 1.3; }
.hd-steps button small { font-size: 12.5px; line-height: 1.4; }
.hd-steps button.on { border-color: var(--gold); background: radial-gradient(160px 60px at 0% 0%, rgba(255, 210, 63, 0.16), transparent 70%), var(--panel); }
.hd-steps button.on i { background: var(--gold); }
.hd-cap { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); text-align: center; }
@container (max-width: 560px) {
  .hd-chat { right: calc(var(--u) * 1.6); width: auto; }
  .hd-stage:has(.hd-win.show) .hd-chat { width: auto; }
  .hd-stage:has(.hd-lease.show) .hd-chat { opacity: 0; }
  .hd-lease { left: calc(var(--u) * 1.6); right: calc(var(--u) * 1.6); top: auto; bottom: calc(var(--u) * 1.6); width: auto; font-size: calc(var(--u) * 2.1); }
  .hd-area { top: calc(var(--u) * 8.5); }
  .hd-gba { width: 58%; }
  .hd-win .hd-who { padding-left: 0; }
  .hd-rays { left: 50%; top: 40%; }
  .hd-open { left: 50%; top: 38%; width: calc(var(--u) * 14); }
  .hd-pull { left: 0; right: 0; top: 58%; width: auto; justify-items: center; text-align: center; transform: none; }
  .hd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@keyframes hdBang { 0% { opacity: 0; transform: scale(0.3) translateY(6px); } 100% { opacity: 1; transform: none; } }
@keyframes hdGlow { 0% { opacity: 0; transform: scale(0.2); } 30% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0.55; transform: scale(0.9); } }
@keyframes hdRing { 0% { opacity: 1; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes hdRise { 0% { opacity: 0; transform: translateY(26px) scaleY(0.2); filter: brightness(4); } 35% { opacity: 1; filter: brightness(3); } 70% { transform: translateY(-6px) scaleY(1.08); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes hdBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes hdShake { 0%, 72%, 100% { transform: rotate(-8deg); } 78% { transform: rotate(-17deg); } 84% { transform: rotate(2deg); } 90% { transform: rotate(-13deg); } 95% { transform: rotate(-5deg); } }
@keyframes hdLive { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes hdTwinkle { 30% { transform: translate(-50%, -50%) scale(1.25) rotate(25deg); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(0.2) rotate(70deg); opacity: 0; } }
@keyframes hdTwRing { 0% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } }
@keyframes hdLine { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
@keyframes hdTap { 0% { opacity: 0.9; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes hdStamp { 0% { transform: translate(-50%, -50%) scale(2.4) rotate(-8deg); opacity: 0; } 14% { transform: translate(-50%, -50%) scale(1) rotate(-4deg); opacity: 1; } 75% { transform: translate(-50%, -60%) rotate(-4deg); opacity: 1; } 100% { transform: translate(-50%, -85%) scale(0.9) rotate(-4deg); opacity: 0; } }
@keyframes hdKo { 0% { transform: translate(-50%, -50%) scale(4) rotate(-14deg); opacity: 0; } 12% { transform: translate(-50%, -50%) scale(0.92) rotate(-6deg); opacity: 1; } 18% { transform: translate(-50%, -50%) scale(1.06) rotate(-6deg); } 24%, 80% { transform: translate(-50%, -50%) rotate(-6deg); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.1) rotate(-6deg); opacity: 0; } }
@keyframes hdPop { 0% { transform: translate(-50%, -60%) scale(0.6); opacity: 0; } 15% { transform: translate(-50%, -100%) scale(1.2); opacity: 1; } 100% { transform: translate(-50%, -190%) scale(1); opacity: 0; } }
@keyframes hdSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes hdPackIn { 0% { opacity: 0; transform: scale(0.5) rotate(-12deg); } 22% { opacity: 1; transform: scale(1) rotate(0); } 55% { transform: translateY(-4%) rotate(3deg); } 75% { transform: rotate(-5deg) scale(1.03); } 85% { transform: rotate(5deg) scale(1.05); } 100% { opacity: 1; transform: rotate(0) scale(1.08); } }
@keyframes hdPackGone { 0% { opacity: 1; transform: scale(1.08); filter: brightness(1); } 100% { opacity: 0; transform: scale(1.35); filter: brightness(3); } }
@keyframes hdCard { 0% { opacity: 0; transform: perspective(600px) rotateY(90deg) scale(0.8); } 100% { opacity: 1; transform: none; } }
@keyframes hdBurst { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0.1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
@keyframes hdFade { 0% { opacity: 0; translate: 0 12px; } 100% { opacity: 1; translate: 0 0; } }
/* Class gems (docs/legends.js classgems board, 2026-10-17): each class's gem, then what the ★ does to its three
   techniques; the attacks board says the same under each class technique. */
.big-board.attacks .atk-what .atk-star { color: #7a4e00; font-weight: 700; }
.big-board.cgems td { vertical-align: top; min-width: 112px; color: var(--rs-ink); }
.big-board.cgems td:first-child { min-width: 130px; border-left: 4px solid var(--cc); }
.big-board.cgems .who-cell { display: inline-flex; align-items: center; gap: 6px; }
.big-board.cgems .who-cell .gi { width: 28px; height: 28px; }
.big-board.cgems .who-cell > span { display: flex; flex-direction: column; }
.big-board.cgems .tch { display: flex; align-items: center; gap: 4px; }
.big-board.cgems .tch .gi { width: 22px; height: 22px; }
.big-board.cgems small { display: block; margin-top: 2px; }

/* The vision page's story (#vision): /vision/story.css's stage, which takes the site's tokens, so they're set here, and
   kept clear of the docs' own p, h3, .chip and .tag. Its map fills the column with the sealed scroll under it; once
   open, vision.js scrolls the page so the scroll's foot shows. story.css's .scroll rolls stay off the docs' scroll art. */
#vision .stage {
  --yellow: #ffd60a;
  --yellow-soft: #ffe566;
  --white: #ffffff;
  --blue-deep: #0a2bb8;
  --radius: 16px;
  --gutter: 0px;
  --topbar-h: calc(var(--top-h) + 20px);
  --font-display: var(--display);
  --font-body: var(--body);
  --font-mono: var(--mono);
  margin: 22px auto 30px;
}
@media (min-width: 721px) { #vision .stage { --ms-h: 210px; } }
#vision .stage [hidden] { display: none; }
#vision .vcam > img { display: block; }
#vision .stage p { margin-bottom: 0; }
#vision .stage .step-top { margin-bottom: 0.4rem; }
#vision .stage h3 { margin: 0; color: #4a2f0e; font-family: var(--display); font-size: clamp(1.4rem, 2.3vw, 1.9rem); font-weight: 400; line-height: 1.05; }
#vision .stage .chip { width: auto; height: 1.45rem; padding: 0 0.6rem; border: 0; border-radius: 999px; font-size: 0.68rem; line-height: 1; }
#vision .vdot .tag { display: block; font-family: var(--display); font-weight: 400; letter-spacing: 0; text-transform: none; }
#vision .vdot .tag::before { content: none; }
#vision .ms .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3.1rem; padding: 0 1.5rem; border: 3px solid #000a2e; border-radius: 999px; background: var(--yellow); color: var(--navy-900); font-family: var(--display); font-size: 1.05rem; line-height: 1; white-space: nowrap; box-shadow: 0 5px 0 #000a2e; transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease; }
#vision .ms .btn:hover { background: var(--yellow-soft); transform: translateY(-2px); box-shadow: 0 7px 0 #000a2e; }
#vision .ms .btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #000a2e; }
.gi.scroll::before, .gi.scroll::after { content: none; }