/* ==========================================================================
   ZeroPvP, Minecraft look v2 (2026-10-19): modern and dark
   ==========================================================================

   Loaded last on every page, after zp.css and the page's own sheet, with mc-art.css (the sprites
   as data URIs, tools/mc-art/art2.js) just before it. zp.css still decides the layout; this layer
   decides how everything looks.

   v2 follows the owner's second brief of 2026-10-19:
   - Real vanilla textures are allowed (his decision): the game's buttons with their hover and
     disabled sprites, text fields, slots, the hotbar, the XP bar, the tooltip, item icons and the
     game's own bitmap font (McVanilla, tools/mc-art/mcfont.js; ZeroCraft is the fallback).
   - A plain background: a very dark, slightly cool colour with a faint light at the top. No block
     texture behind the page anywhere.
   - A dark GUI: the game's container frame (rounded black edge, 2 px bevel) in dark tones. Panel
     heads, the footer and a few accents use the real obsidian texture, darkened.
   - A modern layout around it: generous spacing, one frame per card instead of frames in frames,
     a sticky top bar, a clean phone menu, bigger headings. Motion is short fades, slides and a
     two pixel lift on cards; nothing loops, and reduced motion and lite mode switch it off.
   - Text is the game's: light, with its hard drop shadow one font pixel down and right.

   9 font pixels to the em, so text is set only at the --mc-s* steps (18, 27, 36, 45, 54, 63, 72 px).
   One GUI pixel is two screen pixels: every sprite is scaled by exactly two.
   ========================================================================== */

:root {
  --mc-font: 'McVanilla', 'ZeroCraft', 'Monocraft', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --mc-code: 'Monocraft', 'McVanilla', ui-monospace, monospace;
  --mc-s1: 18px; --mc-s2: 27px; --mc-s3: 36px; --mc-s4: 45px; --mc-s5: 54px; --mc-s6: 63px; --mc-s7: 72px;
  --mc-h2r: 27px; --mc-h1r: 36px; --mc-hero: 45px;
  --mc-shadow: 0.1111em 0.1111em 0 color-mix(in srgb, currentColor 25%, #000);
  --mc-shadow-b: 0.1111em 0 0 currentColor, 0.1111em 0.1111em 0 color-mix(in srgb, currentColor 25%, #000), 0.2222em 0.1111em 0 color-mix(in srgb, currentColor 25%, #000);

  /* the game's chat colours */
  --mc-white: #ffffff; --mc-gray: #aaaaaa; --mc-dgray: #555555; --mc-yellow: #ffff55; --mc-gold: #ffaa00;
  --mc-green: #55ff55; --mc-dgreen: #00aa00; --mc-red: #ff5555; --mc-aqua: #55ffff; --mc-blue: #5555ff;
  --mc-hover: #ffffff;

  /* the dark GUI (the faces match mc-art.css) */
  --mc-page: #0c0d11;
  --mc-gui-face: #16151c; --mc-gui-ink: #f2f1f6; --mc-gui-ink-2: #a9a5b6;
  --mc-well-bg: #100f15;
  --mc-line: #1d1c24;
  --mc-obsidian-veil: linear-gradient(rgba(16, 14, 23, 0.88), rgba(16, 14, 23, 0.88));
  --mc-tip-bg: rgba(16, 0, 16, 0.94);

  /* the zp.css tokens, remapped */
  --f-display: var(--mc-font); --f-body: var(--mc-font); --f-mono: var(--mc-font); --f-pixel: var(--mc-font);
  --font-display: var(--mc-font); --font-body: var(--mc-font); --font-mono: var(--mc-font); --font-pixel: var(--mc-font);
  --fs-xs: var(--mc-s1); --fs-sm: var(--mc-s1); --fs-base: var(--mc-s1); --fs-md: var(--mc-s1);
  --fs-lg: var(--mc-s2); --fs-xl: var(--mc-s2); --fs-2xl: var(--mc-h2r); --fs-3xl: var(--mc-h1r); --fs-hero: var(--mc-hero);
  --px-2: 18px; --px-3: 27px; --px-4: 36px; --px-5: 45px; --px-6: 54px; --px-7: 63px; --px-8: 72px;

  --bg-deep: #0a0b0e; --bg: #0c0d11; --bg-band: #0e0f14;
  --surface: #16151c; --surface-2: #1c1b23; --surface-3: #24232c; --surface-4: #2e2c37; --sunken: #0d0c11;
  --line: #1d1c24; --line-2: #2a2833; --line-3: #45424f;
  --text: #f2f1f6; --text-2: #c3c0cd; --text-3: #8f8b9c;
  --live: #ff5555; --live-wash: rgba(255, 85, 85, 0.14); --win: #55ff55; --win-wash: rgba(85, 255, 85, 0.1);
  --loss: #ff5555; --loss-wash: rgba(255, 85, 85, 0.1); --gold: #ffaa00; --silver: #d0d0da; --bronze: #d98c4e;
  --hot: #ffaa00;
  --r-1: 0; --r-2: 0; --r-3: 0; --r-4: 0;
  --lip: none; --raise: none; --raise-hi: none; --well: none; --shade: none;
  /* --top-h and --top-tall (the bar) are set in zp.css since v6 */
  --mc-lift: 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (min-width: 640px) { :root { --mc-h1r: 45px; --mc-hero: 54px; --mc-h2r: 27px; } }
@media (min-width: 1000px) { :root { --mc-h1r: 54px; --mc-hero: 63px; --mc-h2r: 36px; } }
@media (min-width: 1280px) { :root { --mc-hero: 72px; } }

/* ---------- base: a plain dark page ---------- */
html {
  background: var(--mc-page);
  image-rendering: pixelated;
  scrollbar-color: #3b3944 var(--mc-page);
}
body {
  font-family: var(--mc-font);
  font-size: var(--mc-s1);
  line-height: 1.5;
  color: var(--text);
  text-shadow: var(--mc-shadow);
  font-synthesis: none;
  font-kerning: none;
  font-variant-ligatures: none;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  text-rendering: optimizeSpeed;
  background: radial-gradient(90% 100% at 50% 0%, #16171f 0%, rgba(12, 13, 17, 0) 100%) 0 0 / 100% 760px no-repeat, var(--mc-page);
}
*, *::before, *::after { letter-spacing: 0 !important; text-transform: none !important; font-synthesis: none; }
/* photographs and the big logo are scaled smoothly; everything else keeps its pixels */
img[src$=".jpg"], img[src$=".jpeg"], img[src$=".webp"], img[src*="brand/"], img[src*="banner"], img[src*="dogado"], video, canvas, iframe { image-rendering: auto; }
h1, h2, h3, h4, h5, h6, .zp-h1, .zp-h2, .zp-h3 { font-family: var(--mc-font); font-weight: 400; line-height: 1.2; text-wrap: balance; }
b, strong, th { font-weight: 400; }
/* bold inside running text is the game's bold: the glyph drawn twice, one pixel apart */
:where(p, dd, blockquote, .doc) :is(b, strong):not([class]):not([id]):not(a *), .mc-b { text-shadow: var(--mc-shadow-b); }
small { font-size: var(--mc-s1); }
code, kbd, samp, pre { font-family: var(--mc-font); font-size: 1em; }
pre, pre code { font-family: var(--mc-code); }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 4px; }
::selection { background: #a98bff; color: #fff; text-shadow: none; }
hr { border: 0; border-top: 2px solid var(--mc-line); }
:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; border-radius: 0; }
input, select, textarea, button { font-family: var(--mc-font); font-size: var(--mc-s1); letter-spacing: 0; }
.zp-num, .zp-tnum, td, .zp-stat-v, .stat-value, .zp-rank, .zp-score, time, .tnum { font-variant-numeric: normal; }

/* ---------- scrollbars ---------- */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--mc-page); }
::-webkit-scrollbar-thumb { background: #34323d; border: 2px solid var(--mc-page); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: #4a4755; }
::-webkit-scrollbar-corner { background: var(--mc-page); }

/* ---------- small text pieces ---------- */
.zp-kicker, .kicker, .eyebrow-pill, .g-label {
  font-size: var(--mc-s1); color: var(--accent); gap: 10px; line-height: 1.3;
}
.zp-kicker::before, .kicker::before { width: 8px; height: 8px; clip-path: none; box-shadow: 2px 2px 0 color-mix(in srgb, currentColor 25%, #000); }
.zp-sec-head .zp-kicker::after, .page-hero .zp-kicker::after, .page-hero .kicker::after, .page-hero .eyebrow-pill::after { display: none; }
.zp-label, .zp-stat-k, .stat-label, .ph-cap, .zp-sheet-k, .zp-ipbox-k { font-size: var(--mc-s1); color: var(--text-3); line-height: 1.3; }
.zp-lede, .lede, .zp-muted, .zp-sec-head p, .section-head p { color: var(--text-2); }
.zp-faint, .zp-note, .note { color: var(--text-3); font-size: var(--mc-s1); }
.zp-w, .is-win-text { color: var(--mc-green); }
.zp-l, .is-loss-text { color: var(--mc-red); }
.zp-accent { color: var(--accent); }

/* commands: the chat line */
.zp-cmd, .mono-cmd, .cmd {
  font-size: 1em; font-weight: 400; padding: 0 6px; border: 0; border-radius: 0;
  background: rgba(0, 0, 0, 0.5); color: var(--mc-yellow); box-shadow: none;
}
.mono-cmd.copied { color: var(--mc-green); }
kbd, .kbd { min-width: 24px; height: 24px; border: 2px solid #a0a0a0; border-radius: 0; background: #000; color: #e0e0e0; font-size: var(--mc-s1); }

/* ==========================================================================
   Buttons: the game's button sprites, 9-sliced at two times
   ========================================================================== */
.zp-btn, .btn, .play-btn, .zp-sec-link, .mc-btn, button.copy {
  --b-img: var(--mc-btn); --b-img-h: var(--mc-btn-hover); --b-img-d: var(--mc-btn-down);
  position: relative;
  align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 18px; margin: 0;
  border: 6px solid transparent; border-radius: 0;
  border-image: var(--b-img) 3 fill / 6px / 0 repeat;
  background: none; box-shadow: none !important; transform: none;
  color: #ffffff; text-shadow: var(--mc-shadow);
  font-family: var(--mc-font); font-size: var(--mc-s1); font-weight: 400; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: none; cursor: pointer; user-select: none;
}
.mc-wide { width: 100%; }
.zp-btn:hover, .btn:hover, .play-btn:hover, .zp-sec-link:hover, .mc-btn:hover, button.copy:hover,
.zp-btn:focus-visible, .btn:focus-visible, .play-btn:focus-visible, .zp-sec-link:focus-visible, .mc-btn:focus-visible {
  border-image-source: var(--b-img-h); background: none; color: #ffffff; outline: none;
}
.zp-btn:active, .btn:active, .play-btn:active, .zp-sec-link:active, .mc-btn:active { border-image-source: var(--b-img-d); transform: none; box-shadow: none; }
.zp-btn:active > *, .mc-btn:active > * { translate: 0 2px; }
.zp-btn[disabled], .zp-btn[aria-disabled="true"], .btn[disabled], .mc-btn[disabled] {
  --b-img: var(--mc-btn-off); --b-img-h: var(--mc-btn-off); --b-img-d: var(--mc-btn-off); color: #a0a0a0; opacity: 1; cursor: not-allowed;
}
.zp-btn svg, .btn svg, .play-btn svg { width: 18px; height: 18px; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.55)); }
.zp-btn.is-primary, .btn-primary, .btn.btn-primary, .play-btn.primary, .play-btn.ip, .mc-btn.is-primary {
  --b-img: var(--mc-btn-primary); --b-img-h: var(--mc-btn-primary-hover); --b-img-d: var(--mc-btn-down); color: #fff;
}
.zp-btn.is-discord, .play-btn.discord { --b-img: var(--mc-btn-discord); --b-img-h: var(--mc-btn-discord-hover); color: #fff; }
.zp-btn.is-gold, .btn.gold { --b-img: var(--mc-btn-gold); --b-img-h: var(--mc-btn-gold-hover); color: #fff; }
.zp-btn.is-ghost, .btn-ghost { margin: 0; }
.zp-btn.is-lg { min-height: 48px; padding: 0 24px; font-size: var(--mc-s1); }
.zp-btn.is-sm { min-height: 36px; padding: 0 14px; font-size: var(--mc-s1); margin: 0; }
.zp-btn.is-sm:active { transform: none; box-shadow: none; }
.zp-icon-btn { width: 40px; padding: 0; }
.zp-icon-btn.is-sm { width: 36px; min-height: 36px; }
.zp-btn.zp-icon-btn, .zp-btn.zp-icon-btn.is-sm { padding: 0; }
.mc-btn, button.copy { display: inline-flex; }
.zp-btn.is-arrow::after, .zp-sec-link::after { border-color: currentColor; border-width: 2px; width: 6px; height: 6px; }
.zp-sec-link { min-height: 40px; padding: 0 16px; }
/* section links in a panel head stay small text links */
.zp-panel-head .zp-sec-link, .zp-panel-foot .zp-sec-link, .ph-cap .zp-sec-link {
  min-height: 0; padding: 2px 0; border: 0; border-image: none; background: none; color: var(--accent-hi, #cdbbff); text-shadow: var(--mc-shadow);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; font-size: var(--mc-s1);
}
.zp-panel-head .zp-sec-link::after, .zp-panel-foot .zp-sec-link::after { display: none; }
.zp-panel-head .zp-sec-link:hover, .zp-panel-foot .zp-sec-link:hover { color: #fff; border: 0; }

/* copy the address */
.zp-ip { gap: 0; padding: 0; overflow: visible; }
.zp-ip .zp-ip-text { padding: 0 14px; font-family: var(--mc-font); font-size: var(--mc-s1); font-weight: 400; }
.zp-ip .zp-ip-hint { padding: 0 12px; border-left: 2px solid rgba(0, 0, 0, 0.3); background: none; font-size: var(--mc-s1); align-self: stretch; }
.zp-ip.is-lg .zp-ip-text { font-size: var(--mc-s1); }
.zp-ip.is-copied, .play-btn.ip.copied { --b-img: var(--mc-btn-green); --b-img-h: var(--mc-btn-green); color: #fff; }
.zp-ipbox {
  border: 0; border-radius: 0; padding: 0; background: none; box-shadow: none; margin: 0; max-width: 520px;
  display: grid; grid-template-columns: 1fr auto; gap: 8px; cursor: pointer;
}
.zp-ipbox:active { transform: none; box-shadow: none; }
.zp-ipbox-main { border: 2px solid transparent; border-image: var(--mc-field) 1 / 2px / 0 stretch; background: #000; padding: 6px 14px; }
.zp-ipbox:hover .zp-ipbox-main { border-image-source: var(--mc-field-focus); }
.zp-ipbox .zp-ip-text { font-family: var(--mc-font); font-size: var(--mc-s1); color: #e0e0e0; }
.zp-ipbox-k { color: #707070; text-shadow: none; }
.zp-ipbox-btn {
  border: 6px solid transparent; border-image: var(--mc-btn-primary) 3 fill / 6px / 0 repeat;
  background: none; box-shadow: none; color: #fff; font-family: var(--mc-font); font-size: var(--mc-s1); padding: 0 18px;
}
.zp-ipbox:hover .zp-ipbox-btn { border-image-source: var(--mc-btn-primary-hover); background: none; }
.zp-ipbox.is-copied { border: 0; }
.zp-ipbox.is-copied .zp-ipbox-main { border-image-source: var(--mc-field-focus); }
.zp-ipbox.is-copied .zp-ipbox-btn { border-image-source: var(--mc-btn-green); background: none; color: #fff; box-shadow: none; }

/* ==========================================================================
   Fields: the game's text field sprite, white edge when focused
   ========================================================================== */
.zp-search, .search, .ph-search, .zp-input, .zp-select, .zp-field input, .zp-field select, .zp-field textarea, .mc-field,
input[type="search"]:not(.zp-search input):not(.search input):not(.ph-search input), input[type="text"]:not(.zp-search input):not(.search input):not(.ph-search input), textarea {
  background-color: #000; color: #e0e0e0; border: 2px solid transparent; border-radius: 0; box-shadow: none; text-shadow: var(--mc-shadow);
  border-image: var(--mc-field) 1 / 2px / 0 stretch;
  font-family: var(--mc-font); font-size: var(--mc-s1);
}
.zp-search:focus-within, .search:focus-within, .ph-search:focus-within, .zp-input:focus, .zp-select:focus, .zp-field input:focus, .zp-field select:focus, .zp-field textarea:focus, textarea:focus,
input[type="search"]:focus, input[type="text"]:focus { border-image-source: var(--mc-field-focus); box-shadow: none; outline: none; }
.zp-search input:focus, .search input:focus, .ph-search input:focus { border-image: none; }
.zp-search, .search { height: 44px; padding: 0 10px; gap: 10px; }
.zp-search input, .search input, .ph-search input { color: #e0e0e0; font-size: var(--mc-s1); background: none; border: 0; border-image: none; text-shadow: var(--mc-shadow); }
.zp-search input::placeholder, .search input::placeholder, .ph-search input::placeholder, input::placeholder, textarea::placeholder { color: #707070; text-shadow: none; opacity: 1; }
.zp-search svg, .search svg, .ph-search svg { color: #a0a0a0; }
.zp-search .zp-btn, .ph-search .zp-btn { min-height: 32px; }
.zp-select, .zp-field select { background-repeat: no-repeat; background-position: calc(100% - 12px) 50%; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h10v2H8v2H6v2H4V4H2V2H0z' fill='%23e0e0e0'/%3E%3C/svg%3E"); background-size: 10px 6px; }
/* the blinking underscore caret (mc.js puts it after the text of a focused field) */
.mc-caret-host { position: relative; }
.mc-caret-on { caret-color: transparent; }
.mc-caret { position: absolute; z-index: 2; pointer-events: none; color: #e0e0e0; font-family: var(--mc-font); line-height: 1; text-shadow: var(--mc-shadow); white-space: pre; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-lite]) .mc-caret { animation: mc-blink 1.2s steps(1) infinite; }
}
@keyframes mc-blink { 50% { opacity: 0; } }

/* ==========================================================================
   Panels and cards: one dark frame each
   ========================================================================== */
/* A content panel: the dark container, an obsidian title strip, the content straight on the face. */
.zp-panel {
  border: 8px solid transparent; border-radius: 0;
  border-image: var(--mc-gui) 4 fill / 8px / 0 stretch;
  background: none; box-shadow: 0 24px 48px -32px rgba(0, 0, 0, 0.9);
  padding: 0;
  color: var(--text);
}
.zp-panel::before, .zp-panel::after { display: none; }
.zp-panel-head {
  min-height: 48px; padding: 8px 14px; border: 0; border-radius: 0;
  background: var(--mc-obsidian-veil), var(--mc-obsidian) 0 0 / 32px 32px;
  box-shadow: 0 2px 0 #050507;
  color: var(--text); text-shadow: var(--mc-shadow);
}
.zp-panel-head .zp-label, .zp-panel-head .zp-tag, .zp-panel-head small, .zp-panel-head span { color: var(--text-3); text-shadow: var(--mc-shadow); }
.zp-panel-title { font-size: var(--mc-s1); color: var(--text); text-shadow: var(--mc-shadow); gap: 10px; line-height: 1.2; }
.zp-panel-title::before { width: 8px; height: 8px; clip-path: none; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6); }
.zp-panel-title small { color: var(--text-3); font-size: var(--mc-s1); }
.zp-panel-head .zp-cmd, .zp-panel-foot .zp-cmd { background: rgba(0, 0, 0, 0.6); }
.zp-panel-foot {
  padding: 10px 14px; border: 0; border-radius: 0; background: rgba(0, 0, 0, 0.22); box-shadow: 0 -2px 0 #0b0b0f;
  color: var(--text-3); text-shadow: var(--mc-shadow); font-size: var(--mc-s1);
}
.zp-panel-foot b, .zp-panel-head b { color: var(--text); text-shadow: var(--mc-shadow-b); }
.zp-panel-foot a:not(.zp-btn), .zp-panel-head a:not(.zp-btn):not(.zp-tag) { color: var(--accent-hi, #cdbbff); }

/* Cards, asides, menus and dialogs: the same frame, a shade darker */
.zp-card, .panel, .ph-aside, .doc-toc, .zp-step, .zp-next, .zp-callout, .callout, .mc-dark {
  border: 8px solid transparent; border-radius: 0;
  border-image: var(--mc-gui-dark) 4 fill / 8px / 0 stretch;
  background: none; box-shadow: none;
}
.zp-card { padding: 14px 16px; }
a.zp-card, .zp-kit, a.mc-card { transition: transform var(--mc-lift), border-image-source 0s; }
a.zp-card:hover, a.mc-card:hover { border-image-source: var(--mc-gui-hover); background: none; outline: 0; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-lite]) a.zp-card:hover, html:not([data-lite]) a.mc-card:hover, html:not([data-lite]) a.zp-kit:hover { transform: translateY(-2px); }
}
.zp-step::after { display: none; }
.zp-step::before { color: var(--accent); }
.zp-callout, .callout { color: var(--text-2); }
.zp-callout, .callout, .zp-next { border-left-width: 8px; }

/* ---------- stat strips: a row of small cards ---------- */
.zp-stats, .hero-stats {
  border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; gap: 8px;
}
.zp-stat, .hero-stats .stat-tile, .stat-tile {
  border: 8px solid transparent; margin: 0;
  border-image: var(--mc-gui-dark) 4 fill / 8px / 0 stretch;
  padding: 8px 10px;
}
.zp-stat-v, .stat-value { font-size: var(--mc-s2); color: #fff; line-height: 1.1; }
@media (min-width: 640px) { .zp-stat-v, .stat-value { font-size: var(--mc-s3); } }
.zp-stat-v small { font-family: var(--mc-font); font-size: var(--mc-s1); color: var(--text-3); }
.zp-stat.is-live .zp-stat-k::before { border-radius: 0; background: var(--mc-red); }

/* ---------- rows, ladders, tables ---------- */
.zp-lrow { border-bottom: 0; min-height: 48px; padding: 6px 14px; }
.zp-lrow:nth-child(even):not(.is-head) { background: rgba(255, 255, 255, 0.025); }
a.zp-lrow, button.zp-lrow { transition: background-color 120ms ease-out; }
a.zp-lrow:hover, button.zp-lrow:hover { background: rgba(169, 139, 255, 0.08); }
.zp-lrow.is-head { background: rgba(0, 0, 0, 0.3); font-size: var(--mc-s1); color: var(--text-3); min-height: 36px; }
.zp-lrow.is-top-1 { box-shadow: inset 4px 0 0 var(--mc-gold); background: rgba(255, 170, 0, 0.06); }
.zp-lrow.is-top-2 { box-shadow: inset 4px 0 0 var(--silver); }
.zp-lrow.is-top-3 { box-shadow: inset 4px 0 0 var(--bronze); }
.zp-table { font-size: var(--mc-s1); }
.zp-table th, .zp-table td { border-bottom: 0; padding: 8px 14px; }
.zp-table thead th { font-size: var(--mc-s1); color: var(--text-3); background: rgba(0, 0, 0, 0.3); font-weight: 400; text-shadow: var(--mc-shadow); }
.zp-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.025); }
.zp-table tbody tr:hover { background: rgba(169, 139, 255, 0.07); }
.zp-table tbody th { font-weight: 400; text-shadow: var(--mc-shadow); }
.zp-rank { font-size: var(--mc-s1); color: var(--text-3); }
.zp-rank.is-1 { color: var(--mc-gold); } .zp-rank.is-2 { color: var(--silver); } .zp-rank.is-3 { color: var(--bronze); }
.zp-rank.is-box { clip-path: none; border-radius: 0; width: 30px; height: 30px; box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.35), inset 2px 2px 0 rgba(255, 255, 255, 0.3); }
.zp-num, .zp-score { font-size: var(--mc-s1); }
.zp-res { font-size: var(--mc-s1); border-radius: 0; }
.zp-res.is-w { background: rgba(85, 255, 85, 0.12); color: var(--mc-green); box-shadow: inset 0 0 0 2px rgba(85, 255, 85, 0.4); }
.zp-res.is-l { background: rgba(255, 85, 85, 0.12); color: var(--mc-red); box-shadow: inset 0 0 0 2px rgba(255, 85, 85, 0.4); }
.zp-delta { font-size: var(--mc-s1); }
.zp-delta.is-up { color: var(--mc-green); } .zp-delta.is-down { color: var(--mc-red); }
.zp-head { border-radius: 0; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6); }
.zp-who b, .zp-who-name { font-weight: 400; text-shadow: var(--mc-shadow); }
a.zp-who:hover b { color: var(--accent-hi, #cdbbff); }
.zp-wl { font-size: var(--mc-s1); }
.rk { height: 22px; font-family: var(--mc-font); font-size: var(--mc-s1); border-radius: 0; border-width: 2px; }

/* ---------- badges ---------- */
.zp-tier, .tier-pill {
  clip-path: none; border-radius: 0; height: 26px; min-width: 48px; padding: 0 6px;
  font-size: var(--mc-s1); line-height: 1;
  color: var(--tc, var(--text-3)); text-shadow: var(--mc-shadow);
  background: color-mix(in srgb, var(--tc, #8c83a5) 16%, #08080b);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tc, #8c83a5) 55%, #000);
}
.zp-tier.is-lg { height: 34px; min-width: 64px; font-size: var(--mc-s2); clip-path: none; padding: 0 8px; }
.zp-tier.is-xl { height: 52px; min-width: 88px; font-size: var(--mc-s3); clip-path: none; padding: 0 10px; box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--tc, #8c83a5) 55%, #000); }
.zp-tier.is-solid { background: var(--tc); color: #000; text-shadow: none; box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.3), inset 2px 2px 0 rgba(255, 255, 255, 0.35); }
.zp-tier.is-none { color: var(--text-3); background: #0d0c11; box-shadow: inset 0 0 0 2px #2a2833; }
.zp-tier.is-sm, .zp-stat-v.is-text, .zp-stat-v.na, .zp-rank.is-range { font-family: var(--mc-font); font-weight: 400; }
.zp-kchip, .kchip, .ph-chip, .tier-chip {
  border-radius: 0; height: 28px; font-size: var(--mc-s1); padding: 0 6px 0 4px; gap: 6px;
  background: #0d0c11; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tc, #45424f) 50%, #000);
}
.zp-kchip:not([data-tier]), .kchip:not([data-tier]) { font-family: var(--mc-font); font-weight: 400; font-size: var(--mc-s1); }
.zp-kchip img, .kchip img { width: 16px; height: 16px; }
.zp-tag, .zp-chip {
  height: 26px; padding: 0 8px; border: 0; border-radius: 0; font-size: var(--mc-s1);
  background: #0d0c11; color: var(--text-2); box-shadow: inset 0 0 0 2px #2a2833;
}
.zp-tag.is-accent { color: var(--accent); background: #0d0c11; box-shadow: inset 0 0 0 2px #5b4a9c; }
.zp-tag.is-hot, .zp-tag.is-live { color: var(--mc-red); background: #0d0c11; box-shadow: inset 0 0 0 2px #7a2020; }
.zp-tag.is-win { color: var(--mc-green); background: #0d0c11; box-shadow: inset 0 0 0 2px #1d6e1d; }
.zp-tag.is-loss { color: var(--mc-red); background: #0d0c11; box-shadow: inset 0 0 0 2px #7a2020; }
.zp-panel-head .zp-tag { background: rgba(0, 0, 0, 0.45); color: var(--text-2); text-shadow: var(--mc-shadow); }
.zp-live-tag { border-radius: 0; font-family: var(--mc-font); font-size: var(--mc-s1); background: none; color: var(--mc-red); padding: 0; }
.zp-live-tag::before { border-radius: 0; }
.zp-dot { border-radius: 0; width: 8px; height: 8px; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6) !important; }
.zp-dot.is-on { background: var(--mc-green); }
.zp-dot.is-off, .zp-dot.is-live, .zp-dot.is-hot { background: var(--mc-red); }
.zp-status { font-family: var(--mc-font); font-size: var(--mc-s1); color: var(--text-2); }

/* ---------- tabs and segments: small game buttons, the open one lavender ---------- */
.zp-tabs { border-bottom: 0; gap: 6px; padding: 2px 0; }
.zp-tab, .zp-seg > button, .zp-seg > a {
  height: auto; min-height: 36px; padding: 0 12px;
  border: 6px solid transparent; border-radius: 0;
  border-image: var(--mc-btn) 3 fill / 6px / 0 repeat;
  background: none; color: #e6e6e6; font-size: var(--mc-s1); text-shadow: var(--mc-shadow); box-shadow: none;
}
.zp-tab::after { display: none; }
.zp-tab:hover, .zp-seg > button:hover, .zp-seg > a:hover { border-image-source: var(--mc-btn-hover); background: none; color: #fff; }
.zp-tab[aria-selected="true"], .zp-tab.is-active, .zp-tab.active,
.zp-seg > [aria-pressed="true"], .zp-seg > [aria-selected="true"], .zp-seg > .is-active, .zp-seg > .active {
  border-image-source: var(--mc-btn-primary); background: none; color: #fff; box-shadow: none;
}
.zp-tab[aria-selected="true"]:hover, .zp-tab.is-active:hover, .zp-seg > [aria-pressed="true"]:hover, .zp-seg > .is-active:hover { border-image-source: var(--mc-btn-primary-hover); }
.zp-tab .zp-count { font-family: var(--mc-font); font-size: var(--mc-s1); color: #d0d0d0; }
.zp-tab img { width: 18px; height: 18px; }
.zp-seg { padding: 0; gap: 6px; background: none; border: 0; box-shadow: none; border-radius: 0; }

/* ---------- accordions ---------- */
.zp-acc { border-top: 0; display: grid; gap: 8px; }
.zp-acc details { border: 8px solid transparent; border-image: var(--mc-gui-dark) 4 fill / 8px / 0 stretch; }
.zp-acc summary { padding: 8px 10px; font-weight: 400; }
.zp-acc summary:hover { color: var(--accent-hi, #cdbbff); }
.zp-acc summary::after { border-color: currentColor; border-radius: 0; }
.zp-acc details > div { padding: 0 10px 10px; }

/* ---------- empty and loading ---------- */
.zp-empty, .empty { color: var(--text-3); font-size: var(--mc-s1); }
.zp-skel { border-radius: 0; background: rgba(255, 255, 255, 0.05); }

/* ==========================================================================
   Slots and the hotbar
   ========================================================================== */
.zp-slot, .mc-slot {
  width: 40px; height: 40px; border: 2px solid transparent; border-radius: 0; box-shadow: none; background: none;
  border-image: var(--mc-slot) 1 fill / 2px / 0 stretch;
}
.zp-slot img, .mc-slot img { width: 32px; height: 32px; image-rendering: pixelated; }
.zp-slot .ct { font-family: var(--mc-font); font-size: var(--mc-s1); right: 0; bottom: -4px; color: #fff; text-shadow: var(--mc-shadow); z-index: 2; }
/* v3 items (mc-items.js): the real item, its glint, the durability bar and the unknown "?" */
.zp-slot .mi-img { image-rendering: pixelated; }
.zp-slot .mi-glint {
  position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; transform: translate(-50%, -50%); pointer-events: none;
  background: url(../mc/glint.png?v=3) 0 0 / 64px 64px repeat; mix-blend-mode: screen; opacity: 0.32; image-rendering: auto;
  -webkit-mask: var(--mi) center / 100% 100% no-repeat; mask: var(--mi) center / 100% 100% no-repeat;
}
.zp-slot.is-glint:hover .mi-glint, .zp-slot.is-glint:focus-visible .mi-glint { animation: mi-glint 3s linear infinite; }
@keyframes mi-glint { to { background-position: 64px -64px; } }
@media (prefers-reduced-motion: reduce) { .zp-slot.is-glint:hover .mi-glint { animation: none; } }
.zp-slot .mi-q { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--mc-font); font-size: var(--mc-s2, 18px); color: #fff; text-shadow: var(--mc-shadow); pointer-events: none; }
.zp-slot .mi-img.is-unknown { opacity: 0.55; }
/* v5 durability bar (mc-items.js durabilityBar): a box the size of the item, in which one unit of
   6.25% is one of the item's 16 pixels; black 13 x 2 at x 2, y 13, the coloured line 1 px high on
   its top row, width set inline. */
.zp-slot .mi-dur { position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; transform: translate(-50%, -50%); pointer-events: none; z-index: 1; }
.zp-slot .mi-dur::before { content: ""; position: absolute; left: 12.5%; top: 81.25%; width: 81.25%; height: 12.5%; background: #000; }
.zp-slot .mi-dur i { position: absolute; left: 12.5%; top: 81.25%; height: 6.25%; }
.inv-panel .zp-slot .mi-glint, .inv-panel .zp-slot .mi-dur { width: 72%; height: 72%; }
body[data-page="match-detail"] .inv-panel .zp-slot .mi-glint, body[data-page="match-detail"] .inv-panel .zp-slot .mi-dur { width: 80%; height: 80%; }
.zp-slot:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mc-slot.is-dark { border-image-source: var(--mc-well); }
/* the hotbar: nine of the game's slots, frames overlapping, one selected */
.ph-hotbar, .mc-hotbar {
  display: flex; gap: 0; width: max-content; max-width: 100%; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.ph-hotbar span, .mc-hotbar > * {
  position: relative; display: grid; place-items: center; flex: 0 1 44px; width: 44px; height: 44px; aspect-ratio: 1; min-width: 0;
  border: 6px solid transparent; border-radius: 0; background: none; box-shadow: none;
  border-image: var(--mc-hotbar-slot) 3 fill / 6px / 0 stretch;
  margin-left: -4px;
}
.ph-hotbar span:first-child, .mc-hotbar > :first-child { margin-left: 0; }
.ph-hotbar span.is-on::after, .mc-hotbar > .is-on::after {
  content: ""; position: absolute; inset: -8px; z-index: 1;
  border: 8px solid transparent; border-image: var(--mc-hotbar-select) 4 / 8px / 0 stretch; pointer-events: none;
}
.ph-hotbar span.is-on { border-color: transparent; box-shadow: none; }
.ph-hotbar img, .mc-hotbar img { width: 32px; height: 32px; max-width: none; image-rendering: pixelated; }
@media (hover: hover) and (pointer: fine) { .ph-hotbar span:hover { transform: none; } }
@media (max-width: 479px) { .ph-hotbar span, .mc-hotbar > * { width: 38px; height: 38px; flex-basis: 38px; } .ph-hotbar img, .mc-hotbar img { width: 24px; height: 24px; } }

/* ==========================================================================
   The XP bar: every progress and share bar
   ========================================================================== */
.mc-xp { position: relative; display: block; height: 10px; background: var(--mc-xp-track) 0 0 / 20px 10px repeat-x; }
.mc-xp > i, .mc-xp > span { display: block; height: 100%; background: var(--mc-xp-fill) 0 0 / 20px 10px repeat-x; }
.mc-xp-level { color: #80ff20; text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000; }
:is(.pf-track, .kc-track, .rival-bar, .duel-bar, .act-bar, .pc-track, .kr-bar, .lb-wrbar, .mc-bar) {
  height: 10px; border-radius: 0; overflow: hidden; box-shadow: none;
  background: var(--mc-xp-track) 0 0 / 20px 10px repeat-x;
}
:is(.pf-track, .kc-track, .rival-bar, .duel-bar, .act-bar, .pc-track, .kr-bar, .lb-wrbar, .mc-bar) > i {
  height: 100%; border-radius: 0; background: var(--mc-xp-fill) 0 0 / 20px 10px repeat-x;
}
.kc-track.place > i { filter: saturate(0.2) brightness(0.9); }
.pc-track > em { background: rgba(255, 255, 255, 0.5); width: 2px; }

/* ==========================================================================
   Item tooltips (mc.js): the game's own tooltip sprite
   ========================================================================== */
.mc-tip {
  position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none;
  max-width: min(360px, calc(100vw - 24px)); padding: 4px 8px;
  border: 4px solid transparent; border-image: var(--mc-tooltip) 2 fill / 4px / 0 stretch;
  background: none; color: #fff; text-shadow: var(--mc-shadow);
  font-family: var(--mc-font); font-size: var(--mc-s1); line-height: 1.45; text-align: left; white-space: normal; overflow-wrap: anywhere;
  visibility: hidden;
}
.mc-tip.is-on { visibility: visible; }
.mc-tip .t1 { display: block; color: #fff; }
.mc-tip .t2 { display: block; color: var(--mc-gray); }
.mc-tip .t2.is-accent { color: var(--accent); }

/* ==========================================================================
   Top bar (v6, 2026-10-21): the ZeroPvP badge in the middle, obsidian in the dark GUI frame,
   hanging a little below the bar. The layout and the motion are in zp.css.
   ========================================================================== */
.zp-badge {
  border: 8px solid transparent; border-image: var(--mc-gui) 4 / 8px / 0 stretch;
  background: var(--mc-obsidian-veil), var(--mc-obsidian) 0 0 / 32px 32px; background-clip: padding-box;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.55));
}
.zp-brand:hover .zp-badge, .zp-brand:focus-visible .zp-badge { border-image-source: var(--mc-gui-hover); }
.zp-brand:focus-visible { outline: none; }
.zp-brand:focus-visible .zp-badge { outline: 2px solid #fff; outline-offset: 2px; }
html[data-lite] .zp-badge { filter: none; }
.zp-nav > a, .zp-more > button {
  font-family: var(--mc-font); font-size: var(--mc-s1); font-weight: 400; color: #cfccd8; text-shadow: var(--mc-shadow);
  transition: color 120ms ease-out;
}
.zp-nav > a:hover, .zp-more > button:hover, .zp-more.is-open > button { color: #fff; }
.zp-nav > a[aria-current="page"], .zp-more.has-current > button { color: #fff; }
.zp-nav > a[aria-current="page"]::after, .zp-more.has-current > button::after { box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6); }
.zp-nav-ink { background: #3b3944; }
.zp-more > button svg { filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.6)); }
.zp-menu {
  border: 8px solid transparent; border-radius: 0; border-image: var(--mc-gui) 4 fill / 8px / 0 stretch;
  background: none; box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.95); padding: 2px; top: calc(100% - 12px);
}
.zp-menu a { border-radius: 0; padding: 8px 12px; }
.zp-menu a b { font-family: var(--mc-font); font-size: var(--mc-s1); font-weight: 400; }
.zp-menu a small { font-size: var(--mc-s1); color: var(--text-3); }
.zp-menu a:hover, .zp-menu a:focus-visible { background: rgba(169, 139, 255, 0.1); box-shadow: none; }
.zp-menu a:hover b { color: #fff; }
.zp-menu a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--accent); background: rgba(255, 255, 255, 0.04); }
.zp-signin { font-family: var(--mc-font); font-size: var(--mc-s1); border-radius: 0; color: #cfccd8; }
.zp-signin:hover, .zp-signin[aria-current="page"] { background: none; color: #fff; border-color: transparent; }
.zp-signin svg, .zp-signin img { border-radius: 0; }
.zp-ipchip {
  height: 36px; padding: 0 10px; border: 2px solid transparent; border-radius: 0; background: #000; box-shadow: none;
  border-image: var(--mc-field) 1 / 2px / 0 stretch;
  font-family: var(--mc-font); font-size: var(--mc-s1); color: #e0e0e0;
}
.zp-ipchip:hover { border-image-source: var(--mc-field-focus); background: #000; }
.zp-ipchip:active { transform: none; box-shadow: none; }
.zp-ipchip .zp-ip-hint { font-size: var(--mc-s1); color: #a0a0a0; border-left: 2px solid #2a2a2a; }
.zp-ipchip.is-copied { border-image-source: var(--mc-field-focus); color: var(--mc-green); }
.zp-burger span { height: 4px; width: 20px; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6); }
.zp-burger { gap: 3px; }
.zp-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.zp-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* the phone menu: plain, grouped, one line per page */
.zp-sheet { background: var(--mc-page); }
.zp-sheet-in { border-top: 0; gap: 22px; }
.zp-sheet-nav { gap: 18px; }
.zp-sheet-k { font-size: var(--mc-s1); color: var(--text-3); text-align: left; margin: 0 0 6px 2px; }
.zp-sheet-group { display: grid; gap: 0; }
.zp-sheet-group > a:first-of-type { margin-top: 0; }
.zp-sheet-group a {
  justify-content: space-between; min-height: 48px; padding: 0 14px; border: 0; border-image: none; background: none;
  box-shadow: inset 0 -2px 0 var(--mc-line);
  font-family: var(--mc-font); font-size: var(--mc-s1); font-weight: 400; color: #d6d3df; text-shadow: var(--mc-shadow);
}
.zp-sheet-group a svg { display: block; width: 16px; height: 16px; color: var(--text-3); filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.6)); }
.zp-sheet-group a:hover, .zp-sheet-group a:focus-visible { background: rgba(169, 139, 255, 0.08); color: #fff; outline: none; }
.zp-sheet-group a[aria-current="page"] { padding-left: 14px; color: #fff; background: rgba(169, 139, 255, 0.08); box-shadow: inset 4px 0 0 var(--accent), inset 0 -2px 0 var(--mc-line); }
.zp-sheet-group a[aria-current="page"] svg { color: var(--accent); }
.zp-sheet-group { border: 8px solid transparent; border-image: var(--mc-gui-dark) 4 fill / 8px / 0 stretch; padding: 0; }
.zp-sheet-group > .zp-sheet-k { margin: 6px 14px 4px; }
.zp-sheet-group a:last-child { box-shadow: none; }
.zp-sheet-group a[aria-current="page"]:last-child { box-shadow: inset 4px 0 0 var(--accent); }
.zp-sheet-status { font-size: var(--mc-s1); justify-content: center; }

/* ==========================================================================
   Page head: a big title on the plain page
   ========================================================================== */
.page-hero::before {
  background: none; border-bottom: 2px solid var(--mc-line); box-shadow: none;
}
.page-hero h1, .zp-h1 { font-size: var(--mc-h1r); line-height: 1.1; }
.page-hero > p, .ph-main > p, .page-hero .hero-sub { color: var(--text-2); font-size: var(--mc-s1); }
.page-hero .hero-meta, .ph-main .hero-meta, .page-hero .updated { font-size: var(--mc-s1); color: var(--text-3); }
.ph-aside { padding: 10px 12px; gap: 8px; }
.ph-cap a { border-bottom: 0; text-decoration: underline; text-decoration-thickness: 2px; }
.ph-rows { border-top: 0; }
.ph-rows > li > a, .ph-rows > li > .ph-row, .ph-row { border-bottom: 0; min-height: 44px; }
.ph-rows > li:nth-child(even) > * { background: rgba(255, 255, 255, 0.025); }
.ph-rows > li > a:hover { background: rgba(169, 139, 255, 0.08); box-shadow: none; }
.ph-rows .lead img { border-radius: 0; }
.ph-rows .n, .ph-rows .end { font-family: var(--mc-font); font-weight: 400; font-size: var(--mc-s1); }
.ph-rows .who b { font-weight: 400; }
.ph-rows .who small, .ph-rows .end small { font-size: var(--mc-s1); }
.ph-kits { gap: 6px; background: none; border: 0; border-radius: 0; }
.ph-kits a { background: none; border: 2px solid transparent; border-image: var(--mc-well) 1 fill / 2px / 0 stretch; }
.ph-kits a:hover { background: rgba(169, 139, 255, 0.08); }
.ph-kits b { font-family: var(--mc-font); font-weight: 400; font-size: var(--mc-s1); }
.ph-kits small { font-size: var(--mc-s1); }
.ph-nums { border: 0; border-radius: 0; gap: 6px; }
.ph-nums > div { border: 2px solid transparent; margin: 0; border-image: var(--mc-well) 1 fill / 2px / 0 stretch; }
.ph-nums dd { font-size: var(--mc-s2); }
.ph-nums dt { font-size: var(--mc-s1); color: var(--text-3); }
.ph-links { border-top: 0; }
.ph-links a { border-bottom: 0; font-size: var(--mc-s1); font-weight: 400; }
.ph-links a:hover { background: rgba(169, 139, 255, 0.08); color: #fff; }
.ph-links small { font-size: var(--mc-s1); }
.ph-steps li { font-size: var(--mc-s1); }
.ph-steps li::before { font-family: var(--mc-font); font-weight: 400; font-size: var(--mc-s1); }
.ph-tiers span { font-family: var(--mc-font); font-size: var(--mc-s1); border-radius: 0; height: 28px; }
.ph-prizes { border: 0; }
.ph-prizes li { border-bottom: 0; font-size: var(--mc-s1); }
.ph-prizes li:nth-child(odd) { background: rgba(255, 255, 255, 0.03); }
.ph-prizes b { font-family: var(--mc-font); font-weight: 400; font-size: var(--mc-s1); color: var(--mc-gold); }
.ph-spark { border-radius: 0; border: 2px solid #000; }
.ph-chip, .tier-chip { clip-path: none; }
.ph-uhc-big { font-family: var(--mc-font); font-weight: 400; font-size: var(--mc-s2); }

/* section heads */
.zp-sec-head h2, .section-head h2, .zp-h2, .zp-foot-cta h2, .home-comm-grid h2 { font-size: var(--mc-h2r); line-height: 1.15; }
.zp-sec-head { margin-bottom: 28px; }
.zp-sec-head .zp-kicker, .section-head .kicker { margin-bottom: 10px; }
/* the bands are gone: sections sit on the plain page, spaced apart */
.zp-band, .zp-deep { background: none; border-block: 0; box-shadow: none; }
:is(.pf-sec, .st-sec, .uhc-sec, .hof-sec):nth-of-type(even)::before, .zp-alt::before { background: none; border-block: 0; box-shadow: none; }

/* ---------- long documents ---------- */
.doc { max-width: 72ch; }
.doc section { border-top: 0; padding: 18px 0; }
.doc h2 { font-size: var(--mc-s2); line-height: 1.2; }
.doc h2 .n { font-family: var(--mc-font); font-size: var(--mc-s1); color: var(--accent); }
.doc h3 { font-size: var(--mc-s1); color: var(--mc-yellow); }
.doc p, .doc li { line-height: 1.65; color: var(--text-2); }
.doc a { color: var(--accent-hi, #cdbbff); }
.doc a:hover { color: #fff; }
.doc code { font-family: var(--mc-font); font-size: 1em; border-radius: 0; background: rgba(0, 0, 0, 0.5); color: var(--mc-yellow); }
.doc-table { border: 8px solid transparent; border-image: var(--mc-gui-dark) 4 fill / 8px / 0 stretch; border-radius: 0; }
.doc-table table { font-size: var(--mc-s1); }
.doc-table th, .doc-table td { border-bottom: 0; }
.doc-table th { background: rgba(0, 0, 0, 0.3); color: var(--text-3); font-size: var(--mc-s1); font-weight: 400; }
.doc-table tr:nth-child(even) td { background: rgba(255, 255, 255, 0.025); }
.doc-table td:first-child { font-weight: 400; }
.doc-toc p { font-size: var(--mc-s1); color: var(--text-3); }
.doc-toc a { border-radius: 0; font-size: var(--mc-s1); }
.doc-toc a:hover { background: rgba(169, 139, 255, 0.08); color: #fff; }

/* ==========================================================================
   Footer (v6, 2026-10-21): obsidian, compact. The slim row and the groups on the dark obsidian,
   a thin darker strip with the notice at the bottom. Layout in zp.css.
   ========================================================================== */
.zp-foot {
  border-top: 0; margin-top: 72px;
  background: linear-gradient(rgba(10, 9, 15, 0.9), rgba(10, 9, 15, 0.9)), var(--mc-obsidian) 0 0 / 32px 32px;
  box-shadow: 0 -2px 0 #050507, 0 -4px 0 rgba(255, 255, 255, 0.03);
}
.zp-foot-top { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45), 0 4px 0 rgba(255, 255, 255, 0.03); }
.zp-foot-logo:hover img { filter: brightness(1.15); }
.zp-foot-tag { color: var(--text-3); }
.zp-foot-group > summary { color: #fff; text-shadow: var(--mc-shadow); }
.zp-foot-group > summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.zp-foot-group a { color: var(--text-2); text-shadow: var(--mc-shadow); }
.zp-foot-group a:hover, .zp-foot-group a:focus-visible { color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.zp-foot-group a[aria-current="page"] { color: #fff; }
.zp-foot-bar { background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 2px 0 #050507; }
.zp-foot-legal { color: var(--text-3); }
.zp-foot-legal p { text-shadow: var(--mc-shadow); }
@media (max-width: 599px) {
  .zp-foot-group { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); }
  .zp-foot-group > summary:hover { color: var(--accent-hi, #cdbbff); }
}
.mc-notice { color: var(--text-3); }
/* the click sound switch mc.js adds to the legal line */
.mc-sound { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--text-3); font: inherit; text-shadow: inherit; cursor: pointer; }
.mc-sound::before { content: ""; width: 14px; height: 14px; border: 2px solid #a0a0a0; background: #000; box-sizing: border-box; }
.mc-sound[aria-pressed="true"]::before { background: var(--accent); box-shadow: inset 0 0 0 2px #000; }
.mc-sound:hover { color: #fff; }
.mc-sound:hover::before { border-color: #fff; }

/* event bar and who is on */
.zp-eventbar { background: rgba(0, 0, 0, 0.45); border-bottom: 0; box-shadow: 0 2px 0 #050507; }
.zp-eventbar-in b { font-family: var(--mc-font); font-weight: 400; font-size: var(--mc-s1); }
.zp-eventbar-count, .zp-next-count { font-size: var(--mc-s1); }
.zp-eventbar-x { border-radius: 0; border: 2px solid #a0a0a0; }
.zp-next-row b { font-family: var(--mc-font); font-weight: 400; font-size: var(--mc-s2); }
.zp-next-row span, .zp-next-text, .zp-next-then { font-size: var(--mc-s1); }
.zp-online-p { border-radius: 0; border: 2px solid transparent; border-image: var(--mc-well) 1 fill / 2px / 0 stretch; background: none; font-size: var(--mc-s1); }
.zp-online-p:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.zp-online-p img { border-radius: 0; }
.zp-online-more { font-size: var(--mc-s1); }

/* the skip link */
.zp-skip { border-radius: 0; font-weight: 400; background: #000; color: #fff; border: 2px solid #fff; }

/* the splash line from v1 is gone (it pulsed for ever) */
.mc-splash { display: none; }

/* ---------- shared fixes after the page passes ---------- */
.ph-search { min-width: 0; }
.ph-search input { flex: 1 1 0; width: 0; min-width: 0; }
.zp-acc { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 600px) { .ph-rows .end small { white-space: normal; text-align: right; line-height: 1.3; max-width: 6em; } }
/* a row of hearts: <span class="mc-hearts"><i></i><i class="h-half"></i><i class="h-empty"></i></span> */
.mc-hearts { display: inline-flex; }
.mc-hearts i { width: 18px; height: 18px; margin-left: -2px; background: url(../mc/icons.png) no-repeat 0 0 / 256px 64px; }
.mc-hearts i:first-child { margin-left: 0; }
.mc-hearts .h-half { background-position: -32px 0; }
.mc-hearts .h-empty { background-position: -64px 0; }

/* ---------- motion: short, once, and only when wanted ---------- */
/* no endless loops in v2: the tickers stand still and scroll sideways by hand */
.zm-marquee, .zm-marquee.is-moving { overflow-x: auto; scrollbar-width: none; }
.zm-marquee::-webkit-scrollbar { display: none; }
.zm-marquee .zm-track { animation: none !important; transform: none !important; }
.zm-marquee .zm-track[aria-hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .mc-caret { animation: none !important; }
  a.zp-card, .zp-kit, a.mc-card { transition: none; }
}
html[data-lite] a.zp-card, html[data-lite] .zp-kit, html[data-lite] a.mc-card { transition: none; }