/* ==========================================================================
   Guide pages: How to join, Kits and modes, FAQ, Start here.
   A numbered contents rail on the left from 1000px up, the sections on the right. Everything
   shared (buttons, tier badges, panels, steps, accordions) comes from zp.css; this sheet keeps
   only the layouts these pages alone have. Also linked by the kit pages and the Hall of Fame,
   so every selector here is scoped to a guide class.
   ========================================================================== */

/* ---------- the page head sits inside main on these four pages ----------
   main is already the shell, so the head takes its full width (no second gutter) and main
   drops its top padding, which lines the head up with pages whose head sits outside main. */
:is([data-page="modes"], [data-page="join"], [data-page="faq"], [data-page="start-here"]) > main:not(.zp-bleed) { padding-top: 0; }
:is([data-page="modes"], [data-page="join"], [data-page="faq"], [data-page="start-here"]) > main > .page-hero { width: 100%; }

/* ---------- layout and the contents rail ---------- */
.g-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.g-toc { display: none; }
.g-main { min-width: 0; }
@media (min-width: 1000px) {
  .g-layout { grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-7); }
  .g-toc { display: block; position: relative; }
}
.g-toc nav { position: sticky; top: calc(var(--top-h) + var(--s-6)); padding-top: var(--s-6); }
.g-toc p { margin: 0 0 var(--s-3); font-family: var(--f-mono); font-size: var(--mc-s1); letter-spacing: 0; text-transform: uppercase; color: var(--text-3); }
.g-toc ol { list-style: none; margin: 0; padding: 0; display: grid; border-left: 1px solid var(--line); }
.g-toc a {
  display: flex; align-items: baseline; gap: 10px; margin-left: -1px;
  padding: 7px 10px; font-size: var(--fs-sm); font-weight: 500; line-height: 1.35; color: var(--text-3); text-decoration: none;
  border-left: 2px solid transparent; transition: color var(--fast), border-color var(--fast), background var(--fast);
}
.g-toc a span { font-family: var(--f-mono); font-size: var(--mc-s1); color: var(--text-3); flex: none; }
.g-toc a:hover { color: var(--text); background: var(--surface); }
.g-toc a[aria-current="true"] { color: var(--text); border-left-color: var(--accent); }
.g-toc a[aria-current="true"] span { color: var(--accent); }
.g-toc a:focus-visible { outline-offset: -2px; }

/* ---------- sections ---------- */
.g-sec { padding: var(--s-6) 0; scroll-margin-top: calc(var(--top-h) + 16px); }
.g-sec + .g-sec { border-top: 1px solid var(--line); }
.g-sec:last-child { padding-bottom: 0; }
.g-sec .zp-sec-head { margin-bottom: var(--s-4); }
.g-sec .zp-sec-head h2 { font-size: var(--px-3); }
@media (min-width: 900px) { .g-sec .zp-sec-head h2 { font-size: var(--px-4); } }
.g-sec .zp-kicker .n, .g-label span { color: var(--text-3); }
.g-sec > .zp-h2 { margin-top: 0; font-size: var(--px-3); }
.g-sec > p, .g-text { max-width: 68ch; color: var(--text-2); }
.g-sec > p { margin: var(--s-3) 0 0; }
.g-sec h3 { font-size: var(--mc-s1); text-transform: uppercase; letter-spacing: 0; }
/* Links in running text (they carry no class; component links do) */
.g-sec a:not([class]) { color: var(--accent-hi); text-decoration: underline; text-decoration-color: var(--accent-line); }
.g-sec a:not([class]):hover { color: var(--text); text-decoration-color: var(--accent); }
.g-note { margin: var(--s-4) 0 0; max-width: 68ch; font-size: var(--fs-sm); color: var(--text-3); }
.g-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
@media (max-width: 559px) {
  .g-sec .g-actions .zp-btn { flex: 1 1 100%; }
  .g-sec .g-actions .zp-ip { justify-content: space-between; }
}

/* Numbered rows, for short sequences inside a section */
.g-steps { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; max-width: 760px; counter-reset: gs; border-top: 1px solid var(--line); }
.g-steps li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0 var(--s-3); padding: 12px 0; border-bottom: 1px solid var(--line); counter-increment: gs; color: var(--text-2); }
.g-steps li::before { content: counter(gs, decimal-leading-zero); font-family: var(--f-display); font-size: var(--mc-s1); font-weight: 700; line-height: 1.25; color: var(--accent); }
.g-steps b { color: var(--text); font-weight: 600; }

/* zp-steps with four steps: two columns, then four */
.g-sec .zp-steps { margin-top: var(--s-4); }
@media (min-width: 760px) { .g-sec .zp-steps.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .g-sec .zp-steps.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.g-sec .zp-step .zp-ip { margin-top: var(--s-2); justify-self: start; max-width: 100%; }
.g-sec .zp-step p b { color: var(--text); }

/* Plain cards in a grid (kept for older markup) */
.g-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin-top: var(--s-4); }
@media (min-width: 680px) { .g-grid, .g-grid.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .g-grid, .g-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.g-card { padding: var(--s-4); }
.g-card h3 { margin: 0; }
.g-card p { margin: var(--s-2) 0 0; font-size: var(--fs-sm); color: var(--text-2); }
.g-start { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--text-3); }
.g-start b { font-family: var(--f-mono); font-size: var(--mc-s1); font-weight: 500; letter-spacing: 0; text-transform: uppercase; color: var(--text-3); margin-right: 2px; }

/* ---------- join: the address, the status rows, the hub ---------- */
.g-ipbox { margin-top: var(--s-5); display: grid; gap: var(--s-3); max-width: 460px; }
.g-ipbox .zp-ipbox { min-height: 64px; }
.g-ipbox .zp-ipbox-btn { font-size: var(--mc-s1); padding: 0 22px; }
.g-ipbox .g-ipbox-more { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.g-ipbox .g-ipbox-more .zp-btn { flex: 1 1 auto; }

.g-status { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); box-shadow: var(--lip), var(--raise); overflow: hidden; }
@media (min-width: 760px) { .g-status { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.g-status-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3);
  min-height: 64px; padding: 12px var(--s-4); border-bottom: 1px solid var(--line);
}
.g-status-row:last-child { border-bottom: 0; }
@media (min-width: 760px) { .g-status-row { border-bottom: 0; } .g-status-row + .g-status-row { border-left: 1px solid var(--line); } }
.g-status-row b { display: block; font-family: var(--f-display); font-size: var(--mc-s1); font-weight: 700; letter-spacing: 0; text-transform: uppercase; line-height: 1.1; color: var(--text); }
.g-status-row small { display: block; margin-top: 3px; font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--text-3); overflow-wrap: anywhere; }
.g-status-row .st { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--text-2); text-align: right; }
.g-status-row .zp-dot.is-soon { background: var(--text-3); box-shadow: 0 0 0 3px rgba(117, 114, 138, 0.18); }
@media (max-width: 479px) {
  .g-status-row { grid-template-columns: auto minmax(0, 1fr); }
  .g-status-row .st { grid-column: 2; text-align: left; }
}

.g-hub { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); box-shadow: var(--lip), var(--raise); overflow: hidden; }
@media (min-width: 680px) { .g-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.g-hub li { margin-bottom: -1px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 2px var(--s-3); padding: 10px var(--s-4); border-bottom: 1px solid var(--line); }
@media (min-width: 680px) { .g-hub li:nth-child(odd) { border-right: 1px solid var(--line); } }
.g-hub .kbd { grid-row: span 2; width: 34px; height: 34px; font-size: var(--mc-s1); color: var(--text-2); }
.g-hub b { font-family: var(--f-display); font-size: var(--mc-s1); font-weight: 700; letter-spacing: 0; text-transform: uppercase; line-height: 1.15; color: var(--text); }
.g-hub span:not(.kbd) { font-size: var(--fs-sm); color: var(--text-2); min-width: 0; }
.g-hub span .zp-cmd { white-space: normal; }

/* ---------- modes: the kit cards ---------- */
.kit-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin-top: var(--s-4); }
@media (min-width: 640px) { .kit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .kit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1360px) { .kit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kit-card { display: flex; flex-direction: column; gap: var(--s-3); padding: 14px; scroll-margin-top: calc(var(--top-h) + 16px); }
.kit-top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-3); text-decoration: none; color: inherit; }
.kit-top .zp-kit-ico { width: 44px; height: 44px; }
.kit-top .zp-kit-ico img { width: 30px; height: 30px; }
.kit-top img { image-rendering: pixelated; }
.kit-top > div { display: grid; gap: 3px; min-width: 0; }
.kit-top h3 { margin: 0; font-size: var(--mc-s1); text-transform: uppercase; letter-spacing: 0; line-height: 1; }
.kit-top small { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.4; }
.g-sec .kit-card a.kit-top { color: inherit; text-decoration: none; }
.g-sec .kit-card a.kit-top:hover h3 { color: var(--accent-hi); }
.g-sec .kit-card a.kit-top:hover .zp-kit-ico { border-color: var(--accent-line); }
.g-sec .kit-card a.kit-top:focus-visible { outline-offset: 3px; }

/* Number one, placed, fights in 30 days (filled by guide.js) */
.kit-facts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; }
.kit-facts:empty { display: none; }
.kit-facts .kit-no1 { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); padding: 7px 10px; background: var(--surface-2); text-decoration: none; color: inherit; }
.kit-facts .kit-no1:hover { background: var(--surface-3); }
.kit-facts .kit-no1 .zp-label { font-size: var(--mc-s1); color: var(--gold); }
.kit-facts .kit-no1 b { font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-sec .kit-card .kit-facts a.kit-no1 { color: inherit; text-decoration: none; }
.g-sec .kit-card .kit-facts a.kit-no1:hover b { color: var(--accent-hi); }
.kit-facts .kit-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; }
.kit-facts .kit-nums > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); padding: 6px 10px; background: var(--surface-2); min-width: 0; }
.kit-facts .kit-nums dt { font-family: var(--f-mono); font-size: var(--mc-s1); letter-spacing: 0; text-transform: uppercase; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kit-facts .kit-nums dd { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: var(--mc-s1); line-height: 1; font-variant-numeric: tabular-nums; }
.kit-facts .kit-nums > div:only-child { grid-column: 1 / -1; }
/* The older chip markup, if anything still renders it */
.kit-facts .zp-chip { margin: 6px; }

.kit-card .kit-note { margin: 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-3); }

/* The latest winning hotbar: nine slots that always fit the card */
.kit-bar { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; padding: 5px; background: #0b0b10; border: 1px solid var(--line); border-radius: var(--r-2); box-shadow: var(--well); }
.kit-bar[hidden] { display: none; }
.kit-bar .slot { position: relative; display: grid; place-items: center; aspect-ratio: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-1); overflow: hidden; }
.kit-bar .slot img { width: 72%; height: 72%; image-rendering: pixelated; }
.kit-bar .slot .ct { position: absolute; right: 2px; bottom: 0; font-family: var(--f-display); font-weight: 700; font-size: var(--mc-s1); line-height: 1.1; color: #fff; text-shadow: 1px 1px 0 #000; }
.kit-bar .slot .txt { font-family: var(--f-mono); font-size: var(--mc-s1); line-height: 1.05; color: var(--text-3); text-align: center; word-break: break-word; padding: 1px; }
.kit-card .kit-bar-cap { margin: -4px 0 0; font-size: var(--fs-xs); line-height: 1.45; color: var(--text-3); }
.kit-card .kit-links { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--line); }
.g-sec .kit-card .kit-links a { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface-2); color: var(--text-2); text-decoration: none; font-family: var(--f-display); font-size: var(--mc-s1); font-weight: 600; letter-spacing: 0; text-transform: uppercase; transition: color var(--fast), border-color var(--fast), background var(--fast); }
.g-sec .kit-card .kit-links a:hover { color: var(--text); border-color: var(--line-3); background: var(--surface-3); }

/* ---------- modes: the other ways to play, as rows ---------- */
.g-modes { list-style: none; margin: var(--s-4) 0 0; padding: 0; overflow: hidden; }
.g-mode { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-2) var(--s-3); padding: 14px var(--s-4); border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--top-h) + 16px); }
.g-mode:last-child { border-bottom: 0; }
.g-mode .zp-kit-ico { width: 40px; height: 40px; }
.g-mode .zp-kit-ico img { width: 26px; height: 26px; image-rendering: pixelated; }
.g-mode-body { min-width: 0; }
.g-mode-body h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: var(--mc-s1); line-height: 1.1; }
.g-mode-body p { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--text-2); max-width: 90ch; }
.g-mode-start { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: var(--fs-xs); color: var(--text-3); }
.g-mode-start .zp-label { font-size: var(--mc-s1); }
.g-mode-start .zp-cmd { font-size: var(--mc-s1); }
.g-mode-start .g-item { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border: 1px solid var(--line); border-radius: var(--r-1); color: var(--text-2); white-space: nowrap; }
@media (min-width: 900px) {
  .g-mode { grid-template-columns: 40px minmax(0, 1fr) 260px; align-items: center; gap: var(--s-4); }
  .g-mode-start { grid-column: 3; flex-direction: column; align-items: flex-start; gap: 6px; padding-left: var(--s-4); border-left: 1px solid var(--line); align-self: stretch; justify-content: center; }
}

/* ---------- FAQ: grouped accordions ---------- */
.faq-group { margin-top: var(--s-3); max-width: 860px; border-top: 1px solid var(--line); }
.faq-group details { border-bottom: 1px solid var(--line); }
.faq-group summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 52px; padding: 12px 4px; cursor: pointer; list-style: none;
  font-size: var(--fs-base); font-weight: 600; line-height: 1.4; color: var(--text);
  transition: color var(--fast), background var(--fast);
}
.faq-group summary::-webkit-details-marker { display: none; }
.faq-group summary:hover { background: var(--surface); }
.faq-group summary:focus-visible { outline-offset: -2px; }
.faq-group summary i { position: relative; width: 12px; height: 12px; flex: none; margin-right: 4px; color: var(--text-3); transition: transform var(--fast) var(--ease), color var(--fast); }
.faq-group summary i::before, .faq-group summary i::after { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 2px; background: currentColor; }
.faq-group summary i::after { transform: rotate(90deg); }
.faq-group details[open] > summary { color: var(--text); box-shadow: inset 2px 0 0 var(--accent); padding-left: 12px; }
.faq-group details[open] > summary i { transform: rotate(45deg); color: var(--accent); }
.faq-group details > div { padding: 0 4px 16px 12px; max-width: 70ch; color: var(--text-2); }
.faq-group details > div p { margin: 0 0 10px; }
.faq-group details > div p:last-child { margin-bottom: 0; }
.faq-group details > div ul { margin: 6px 0 0; padding-left: 1.2rem; }
.faq-group details > div li { margin: 4px 0; }
.faq-group .zp-cmd { white-space: normal; }

/* ---------- start here: hub bar, the tier ladder, two-up cards ---------- */
.g-hotbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: var(--s-4); padding: 6px; max-width: 860px; background: #0b0b10; border: 1px solid var(--line-2); border-radius: var(--r-3); box-shadow: var(--well); }
@media (min-width: 760px) { .g-hotbar { grid-template-columns: repeat(9, minmax(0, 1fr)); } }
.g-hotbar > div { position: relative; display: grid; align-content: center; gap: 2px; min-height: 64px; padding: 8px 8px 8px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-1); min-width: 0; }
.g-hotbar > div .n { position: absolute; top: 4px; right: 6px; font-family: var(--f-mono); font-size: var(--mc-s1); color: var(--text-3); }
.g-hotbar b { font-family: var(--f-display); font-size: var(--mc-s1); font-weight: 700; letter-spacing: 0; text-transform: uppercase; line-height: 1.1; }
.g-hotbar small { font-size: var(--mc-s1); color: var(--text-3); line-height: 1.25; }
.g-hotbar > div.is-empty { background: transparent; border-style: dashed; border-color: var(--line); }
@media (max-width: 759px) { .g-hotbar > div.is-empty { display: none; } }

.g-ladder { margin-top: var(--s-4); max-width: 860px; overflow: hidden; }
.g-ladder .zp-ladder { --cols: 52px minmax(0, 1fr) 58px 34px 52px; }
.g-ladder .zp-lrow { gap: var(--s-2); min-height: 44px; padding: 6px var(--s-3); }
.g-ladder .zp-lrow.is-head { min-height: 32px; }
.g-ladder .zp-lrow .zp-num { font-size: var(--px-2); }
.g-ladder .zp-lrow .zp-num.dim { color: var(--text-3); font-weight: 600; }
.g-ladder .zp-lrow .promo { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; }
.g-ladder .zp-lrow .promo.is-instant { color: var(--text-3); }
.g-ladder .zp-lrow.is-div { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 8px var(--s-3) 6px; background: var(--bg-band); font-size: var(--fs-xs); color: var(--text-3); }
.g-ladder .zp-lrow.is-div b { font-family: var(--f-mono); font-size: var(--mc-s1); font-weight: 500; letter-spacing: 0; text-transform: uppercase; color: var(--text-2); margin-right: 8px; }
.g-ladder .zp-lrow.is-div.is-top b { color: var(--gold); }
@media (min-width: 640px) {
  .g-ladder .zp-ladder { --cols: 64px minmax(0, 1fr) 96px 72px 96px; }
  .g-ladder .zp-lrow { gap: var(--s-3); padding: 6px var(--s-4); }
  .g-ladder .zp-lrow.is-div { padding: 8px var(--s-4) 6px; }
}
.g-ladder .zp-panel-foot { flex-wrap: wrap; justify-content: flex-start; gap: 4px var(--s-4); font-size: var(--fs-xs); }

.g-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin-top: var(--s-4); max-width: 860px; }
@media (min-width: 680px) { .g-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.g-split .zp-card h3 { margin: 0 0 6px; font-size: var(--mc-s1); }
.g-split .zp-card p { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }

.g-sec .zp-callout { margin-top: var(--s-4); max-width: 860px; }
.g-sec .zp-callout b { color: var(--text); }
.g-example { margin-top: var(--s-4); max-width: 860px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 12px var(--s-4); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); font-size: var(--fs-sm); color: var(--text-2); }
.g-example .zp-label { width: 100%; }
.g-example .op { font-family: var(--f-display); font-weight: 700; color: var(--text-3); }
.g-example .zp-num { font-size: var(--px-2); color: var(--text); }

.g-list { list-style: none; margin: var(--s-4) 0 0; padding: 0; max-width: 860px; border-top: 1px solid var(--line); }
.g-list li { padding: 10px 0 10px 18px; position: relative; border-bottom: 1px solid var(--line); color: var(--text-2); }
.g-list li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 6px; height: 6px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 100%); }
.g-list b { color: var(--text); }

/* ==========================================================================
   Minecraft look (2026-10-19)
   guide.css loads before zp.css and mc.css and only on the four guide pages, so every rule here
   starts at body[data-page] to win over the shared sheets.
   - contents rail: a dark GUI menu, the section you are in marked in lavender
   - join: the server list entry (icon, MOTD line, ping bars), the Add Server screen drawn in CSS,
     the hub items in hotbar slots
   - modes: every kit card a grey container with its winning hotbar in inventory slots
   - FAQ: every question a sunken well that opens in place
   - start here: the hub bar as the game's hotbar, the first slot selected
   ========================================================================== */

/* ---------- the contents rail ---------- */
body[data-page] .g-toc nav {
  margin-top: var(--s-6); padding: 6px 4px;
  border: 8px solid transparent; border-image: var(--mc-gui-dark) 4 fill / 8px / 0 stretch;
}
body[data-page] .g-toc p { margin: 0 6px 6px; font-size: var(--mc-s1); color: var(--mc-gray); }
body[data-page] .g-toc ol { border-left: 0; gap: 2px; }
body[data-page] .g-toc a {
  margin: 0; padding: 6px 8px; border-left: 0; font-size: var(--mc-s1); font-weight: 400; line-height: 1.3; color: #e0e0e0; transition: none;
}
body[data-page] .g-toc a span { font-family: var(--mc-font); font-size: var(--mc-s1); color: var(--mc-gray); }
body[data-page] .g-toc a:hover { background: rgba(169, 139, 255, 0.08); box-shadow: none; color: #fff; }
body[data-page] .g-toc a[aria-current="true"] { color: #fff; background: rgba(169, 139, 255, 0.08); box-shadow: inset 4px 0 0 var(--accent); }
body[data-page] .g-toc a[aria-current="true"]:hover { box-shadow: inset 4px 0 0 var(--accent); }

/* ---------- sections and running text ---------- */
body[data-page] .g-sec + .g-sec { border-top: 2px solid var(--mc-line); box-shadow: none; }
body[data-page] .g-sec h3 { font-size: var(--mc-s1); }
body[data-page] .g-sec .zp-sec-head h2 { font-size: var(--mc-s2); }
@media (min-width: 900px) { body[data-page] .g-sec .zp-sec-head h2 { font-size: var(--mc-s3); } }
body[data-page] .g-sec a:not([class]) { color: var(--accent-hi, #c4b1ff); text-decoration-color: currentColor; }
body[data-page] .g-sec a:not([class]):hover { color: var(--mc-hover); }
body[data-page] .g-note { font-size: var(--mc-s1); color: var(--text-3); }

/* numbered rows: lines in a sunken well */
body[data-page] .g-steps { border-top: 0; padding: 2px 0; border: 2px solid transparent; border-image: var(--mc-well) 1 fill / 2px / 0 stretch; }
body[data-page] .g-steps li { grid-template-columns: 36px minmax(0, 1fr); padding: 10px 14px; border-bottom: 0; }
body[data-page] .g-steps li:nth-child(even) { background: rgba(255, 255, 255, 0.035); }
body[data-page] .g-steps li::before { font-family: var(--mc-font); font-weight: 400; font-size: var(--mc-s1); line-height: 1.5; color: var(--accent); }
body[data-page] .g-steps b { font-weight: 400; }
body[data-page] .g-list { border-top: 0; padding: 2px 0; border: 2px solid transparent; border-image: var(--mc-well) 1 fill / 2px / 0 stretch; }
body[data-page] .g-list li { padding: 10px 14px 10px 32px; border-bottom: 0; }
body[data-page] .g-list li:nth-child(even) { background: rgba(255, 255, 255, 0.035); }
body[data-page] .g-list li::before { left: 14px; top: 20px; width: 6px; height: 6px; clip-path: none; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6); }
body[data-page] .g-example { border: 2px solid transparent; border-radius: 0; border-image: var(--mc-well) 1 fill / 2px / 0 stretch; background: none; font-size: var(--mc-s1); }
body[data-page] .g-example .op { font-family: var(--mc-font); font-weight: 400; color: var(--mc-gray); }
body[data-page] .g-example .zp-num { font-size: var(--mc-s1); }

/* steps as GUI panels; the address button fits a narrow step */
body[data-page] .g-sec .zp-step .zp-ip { width: auto; max-width: 100%; min-width: 0; padding: 0; }
body[data-page] .g-sec .zp-step .zp-ip .zp-ip-text { padding: 0 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body[data-page] .g-sec .zp-step .zp-ip .zp-ip-hint { padding: 0 8px; }
body[data-page] .g-sec .zp-step h3 { color: #fff; }
body[data-page] .g-sec .zp-step p b { font-weight: 400; }

/* ---------- join: the server list entry ---------- */
body[data-page] .g-status { gap: 4px; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
body[data-page] .g-status-row {
  grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 14px; align-items: start;
  min-height: 0; padding: 8px 12px 8px 8px; border: 2px solid transparent; border-image: var(--mc-well) 1 fill / 2px / 0 stretch;
}
body[data-page] .g-status-row + .g-status-row { border-left: 2px solid transparent; }
body[data-page] .g-status-row::before {
  content: ""; grid-column: 1; grid-row: 1 / 3; width: 64px; height: 64px;
  background: url(../../icon-96.png) center / 64px 64px no-repeat; image-rendering: pixelated;
}
body[data-page] #stBedrock::before { filter: grayscale(1) brightness(0.7); }
body[data-page] .g-status-row > div { grid-column: 2; grid-row: 1 / 3; align-self: center; min-width: 0; }
body[data-page] .g-status-row b { font-family: var(--mc-font); font-weight: 400; font-size: var(--mc-s1); line-height: 1.3; color: #fff; }
body[data-page] .g-status-row small { margin-top: 2px; font-family: var(--mc-font); font-size: var(--mc-s1); line-height: 1.4; color: var(--mc-gray); }
/* the dot becomes the ping bars: five green bars online, the red cross offline or not back yet */
body[data-page] .g-status-row .zp-dot {
  grid-column: 3; grid-row: 1; justify-self: end; margin-top: 4px;
  width: 20px; height: 16px; border-radius: 0; box-shadow: none !important;
  background: url(../mc/icons.png) -128px -32px / 256px 64px no-repeat; image-rendering: pixelated;
}
body[data-page] .g-status-row .zp-dot.is-on { background-position: 0 -32px; }
body[data-page] .g-status-row .zp-dot.is-off, body[data-page] .g-status-row .zp-dot.is-soon { background-position: -160px -32px; }
body[data-page] .g-status-row .st { grid-column: 3; grid-row: 2; font-family: var(--mc-font); font-size: var(--mc-s1); color: var(--mc-gray); text-align: right; }
@media (max-width: 479px) {
  body[data-page] .g-status-row { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 2px 10px; }
  body[data-page] .g-status-row::before { width: 48px; height: 48px; background-size: 48px 48px; }
  body[data-page] .g-status-row > div { grid-row: 1; }
  body[data-page] .g-status-row .st { grid-column: 2 / 4; text-align: left; }
}

/* ---------- join: the Add Server screen ---------- */
body[data-page] .g-java { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin-top: var(--s-4); align-items: start; }
body[data-page] .g-java .zp-steps { margin-top: 0; gap: 6px; }
body[data-page] .g-java .zp-steps.is-4 { grid-template-columns: minmax(0, 1fr); }
body[data-page] .g-java .zp-step { grid-template-columns: 48px minmax(0, 1fr); column-gap: 10px; row-gap: 4px; padding: 8px 12px; }
body[data-page] .g-java .zp-step::before { grid-row: 1 / span 3; font-size: var(--mc-s3); line-height: 1; }
body[data-page] .g-java .zp-step > * { grid-column: 2; margin: 0; }
@media (min-width: 1000px) {
  body[data-page] .g-java { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); }
}
@media (min-width: 760px) { body[data-page] .g-status { grid-template-columns: minmax(0, 1fr); } }
body[data-page] .g-addsrv {
  margin: 0; padding: 12px 16px 10px; display: grid; gap: 10px;
  border: 8px solid transparent; border-image: var(--mc-gui) 4 fill / 8px / 0 stretch; background: none; box-shadow: none;
}
body[data-page] .g-addsrv-t { text-align: center; color: #fff; margin-bottom: 4px; }
body[data-page] .g-addsrv-f { display: grid; gap: 4px; }
body[data-page] .g-addsrv-k { color: #a0a0a0; line-height: 1.2; }
body[data-page] .g-addsrv-in {
  display: block; min-height: 40px; padding: 6px 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  background: #000; border: 2px solid #a0a0a0; color: #e0e0e0; line-height: 1.4;
}
body[data-page] .g-addsrv-in.is-focus { border-color: #fff; }
body[data-page] .g-addsrv-in i { font-style: normal; color: #e0e0e0; }
body[data-page] .g-addsrv-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
body[data-page] .g-addsrv-btns .mc-btn { width: 100%; }
body[data-page] .g-addsrv-btns .mc-btn.is-copied { --b-img: var(--mc-btn-green); --b-img-h: var(--mc-btn-green); color: #fff; }
body[data-page] .g-addsrv-cap { margin: 2px 0 0; text-align: center; color: var(--mc-gray); font-size: var(--mc-s1); }

/* ---------- join: the hub items, numbered in hotbar slots ---------- */
body[data-page] .g-hub { gap: 4px; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
body[data-page] .g-hub li {
  margin: 0; grid-template-columns: 44px minmax(0, 1fr); gap: 0 12px; padding: 8px 12px 8px 8px;
  border: 2px solid transparent; border-image: var(--mc-well) 1 fill / 2px / 0 stretch;
}
@media (min-width: 680px) { body[data-page] .g-hub li:nth-child(odd) { border-right: 2px solid transparent; } }
body[data-page] .g-hub .kbd {
  width: 44px; height: 44px; min-width: 0; display: grid; place-items: center;
  border: 6px solid transparent; border-image: var(--mc-hotbar-slot) 3 fill / 6px / 0 stretch; background: none;
  font-size: var(--mc-s1); color: #fff; text-shadow: var(--mc-shadow);
}
body[data-page] .g-hub li:first-child .kbd { position: relative; }
body[data-page] .g-hub li:first-child .kbd::after {
  content: ""; position: absolute; inset: -10px; border: 8px solid transparent; border-image: var(--mc-hotbar-select) 4 / 8px / 0 stretch; pointer-events: none;
}
body[data-page] .g-hub b { font-family: var(--mc-font); font-weight: 400; font-size: var(--mc-s1); line-height: 1.3; color: #fff; }
body[data-page] .g-hub span:not(.kbd) { font-size: var(--mc-s1); color: var(--text-2); }

/* ---------- modes: kit cards as dark containers ---------- */
body[data-page] .kit-card {
  border-image-source: var(--mc-gui); padding: 8px 12px 12px; gap: 12px;
  color: var(--text); text-shadow: var(--mc-shadow);
}
body[data-page] .kit-top { gap: 10px; }
body[data-page] .kit-top .zp-kit-ico {
  width: 44px; height: 44px; border: 2px solid transparent; border-radius: 0; box-shadow: none; background: none;
  border-image: var(--mc-slot) 1 fill / 2px / 0 stretch;
}
body[data-page] .kit-top .zp-kit-ico img { width: 32px; height: 32px; }
body[data-page] .kit-top h3 { font-size: var(--mc-s2); line-height: 1.2; color: #fff; text-shadow: var(--mc-shadow); }
body[data-page] .kit-top small { font-size: var(--mc-s1); line-height: 1.4; color: var(--text-3); }
body[data-page] .g-sec .kit-card a.kit-top:hover h3 { color: var(--accent-hi, #cdbbff); text-decoration: none; }
body[data-page] .g-sec .kit-card a.kit-top:hover .zp-kit-ico { background: none; }
body[data-page] .g-sec .kit-card a.kit-top:hover .zp-kit-ico::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.3); }
body[data-page] .kit-top .zp-kit-ico { position: relative; }
body[data-page] .kit-card .kit-note { font-size: var(--mc-s1); color: var(--text-2); }
body[data-page] .g-sec .kit-card a:not([class]) { color: var(--accent-hi, #cdbbff); }
body[data-page] .g-sec .kit-card a:not([class]):hover { color: #fff; }
/* the ladder facts in a dark well */
body[data-page] .kit-facts {
  gap: 0; border: 2px solid transparent; border-radius: 0; border-image: var(--mc-well) 1 fill / 2px / 0 stretch; background: none;
  color: var(--text); text-shadow: var(--mc-shadow);
}
body[data-page] .kit-facts .kit-no1 { background: none; padding: 6px 10px; }
body[data-page] .kit-facts .kit-no1:hover { background: rgba(255, 255, 255, 0.08); }
body[data-page] .kit-facts .kit-no1 .zp-label { color: var(--mc-gold); }
body[data-page] .kit-facts .kit-no1 b { font-weight: 400; font-size: var(--mc-s1); }
body[data-page] .g-sec .kit-card .kit-facts a.kit-no1:hover b { color: var(--mc-hover); }
body[data-page] .kit-facts .kit-nums { grid-template-columns: minmax(0, 1fr); gap: 0; }
body[data-page] .kit-facts .kit-nums > div { background: none; padding: 4px 10px; }
body[data-page] .kit-facts .kit-no1 + .kit-nums > div:first-child, body[data-page] .kit-facts .kit-nums > div + div { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.06); }
body[data-page] .kit-facts .kit-nums dt { font-family: var(--mc-font); font-size: var(--mc-s1); color: var(--mc-gray); }
body[data-page] .kit-facts .kit-nums dd { font-family: var(--mc-font); font-weight: 400; font-size: var(--mc-s1); }
/* the winning hotbar: nine inventory slots, the first one selected */
body[data-page] .kit-bar { gap: 0; padding: 0 4px; background: none; border: 0; border-radius: 0; box-shadow: none; }
body[data-page] .kit-bar .slot {
  overflow: visible; border: 2px solid transparent; border-radius: 0; background: none;
  border-image: var(--mc-slot) 1 fill / 2px / 0 stretch;
}
body[data-page] .kit-bar .slot img { width: 80%; height: 80%; }
body[data-page] .kit-bar .slot:hover::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(255, 255, 255, 0.3); pointer-events: none; }
body[data-page] .kit-bar .slot.is-on::before {
  content: ""; position: absolute; inset: -4px; z-index: 3; pointer-events: none;
  border: 8px solid transparent; border-image: var(--mc-hotbar-select) 4 / 8px / 0 stretch;
}
body[data-page] .kit-bar .slot .ct { right: 0; bottom: -2px; z-index: 2; font-family: var(--mc-font); font-weight: 400; font-size: var(--mc-s1); line-height: 1; color: #fff; text-shadow: var(--mc-shadow); }
body[data-page] .kit-bar .slot .txt { font-family: var(--mc-font); font-size: var(--mc-s1); color: var(--text-2); overflow: hidden; }
body[data-page] .kit-card .kit-bar-cap { margin: 0; font-size: var(--mc-s1); line-height: 1.45; color: var(--text-3); }
body[data-page] .kit-card .kit-links { gap: 6px; padding-top: 4px; border-top: 0; }
body[data-page] .g-sec .kit-card .kit-links a {
  min-height: 36px; padding: 0 8px; border-radius: 0; background: none; color: #fff; text-shadow: var(--mc-shadow);
  font-family: var(--mc-font); font-weight: 400; font-size: var(--mc-s1); transition: none;
  border: 6px solid transparent;
  border-image: var(--mc-btn) 3 fill / 6px / 0 repeat;
}
body[data-page] .g-sec .kit-card .kit-links a:hover, body[data-page] .g-sec .kit-card .kit-links a:focus-visible { border-image-source: var(--mc-btn-hover); color: #fff; background: none; outline: none; }
body[data-page] .g-sec .kit-card .kit-links a:active { border-image-source: var(--mc-btn-down); }

/* ---------- modes: the other ways to play ---------- */
body[data-page] .g-mode .zp-kit-ico {
  width: 44px; height: 44px; border: 2px solid transparent; border-radius: 0; box-shadow: none; background: none;
  border-image: var(--mc-slot) 1 fill / 2px / 0 stretch;
}
body[data-page] .g-mode .zp-kit-ico img { width: 32px; height: 32px; }
body[data-page] .g-mode { grid-template-columns: 44px minmax(0, 1fr); border-bottom: 0; }
body[data-page] .g-mode-body h3 { font-size: var(--mc-s1); line-height: 1.3; color: #fff; }
body[data-page] .g-mode-body p { font-size: var(--mc-s1); }
body[data-page] .g-mode-start { font-size: var(--mc-s1); }
body[data-page] .g-mode-start .g-item { height: 26px; padding: 0 8px; border: 0; border-radius: 0; background: #0b0a10; box-shadow: inset 0 0 0 2px #3a3446; color: var(--text-2); }
@media (min-width: 900px) {
  body[data-page] .g-mode { grid-template-columns: 44px minmax(0, 1fr) 280px; }
  body[data-page] .g-mode-start { border-left: 2px solid rgba(255, 255, 255, 0.08); }
}

/* ---------- FAQ: every question a sunken well ---------- */
body[data-page] .faq-group { display: grid; gap: 4px; border-top: 0; }
body[data-page] .faq-group details { border: 2px solid transparent; border-image: var(--mc-well) 1 fill / 2px / 0 stretch; }
body[data-page] .faq-group summary { min-height: 48px; padding: 10px 14px; font-size: var(--mc-s1); font-weight: 400; line-height: 1.4; color: #fff; transition: none; }
body[data-page] .faq-group summary:hover { background: rgba(255, 255, 255, 0.06); color: var(--mc-hover); }
body[data-page] .faq-group summary:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
body[data-page] .faq-group summary i { width: 10px; height: 10px; margin-right: 2px; color: var(--mc-gray); transition: none; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.6)); }
body[data-page] .faq-group summary i::before, body[data-page] .faq-group summary i::after { top: 4px; width: 10px; height: 2px; }
body[data-page] .faq-group details[open] > summary { padding-left: 14px; color: var(--mc-yellow); box-shadow: inset 4px 0 0 var(--accent); background: rgba(255, 255, 255, 0.04); }
body[data-page] .faq-group details[open] > summary i { transform: none; color: var(--mc-yellow); }
body[data-page] .faq-group details[open] > summary i::after { display: none; }
body[data-page] .faq-group details > div { padding: 4px 14px 14px 18px; font-size: var(--mc-s1); line-height: 1.6; color: var(--text-2); }
body[data-page] .faq-group details > div b { font-weight: 400; color: #fff; }

/* ---------- start here: the hub bar is the game's hotbar ---------- */
body[data-page] .g-hotbar { gap: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; max-width: 900px; }
body[data-page] .g-hotbar > div {
  min-height: 84px; padding: 8px 8px 8px 8px; margin: 0 0 -2px -2px; text-align: center; justify-items: center;
  border: 6px solid transparent; border-radius: 0; background: none;
  border-image: var(--mc-hotbar-slot) 3 fill / 6px / 0 stretch;
}
body[data-page] .g-hotbar > div:first-child { position: relative; z-index: 1; }
body[data-page] .g-hotbar > div:first-child::after {
  content: ""; position: absolute; inset: -10px; border: 8px solid transparent; border-image: var(--mc-hotbar-select) 4 / 8px / 0 stretch; pointer-events: none;
}
body[data-page] .g-hotbar > div.is-empty { border-style: solid; border-color: transparent; background: none; }
body[data-page] .g-hotbar > div .n { top: 2px; right: auto; left: 4px; font-family: var(--mc-font); font-size: var(--mc-s1); line-height: 1; color: var(--mc-gray); }
body[data-page] .g-hotbar b { font-family: var(--mc-font); font-weight: 400; font-size: var(--mc-s1); line-height: 1.2; color: #fff; }
body[data-page] .g-hotbar small { font-size: var(--mc-s1); line-height: 1.3; color: var(--mc-gray); }
/* nine slots in a row leave no room for the item names: those move into the tooltip */
@media (min-width: 760px) {
  body[data-page] .g-hotbar small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body[data-page] .g-hotbar > div { min-height: 64px; padding: 14px 2px 6px; }
}
body[data-page] .g-hotbar > div[data-tip]:hover::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.12); pointer-events: none; }
body[data-page] .g-split .zp-card p { font-size: var(--mc-s1); }
body[data-page] .g-ladder .zp-lrow .zp-num { font-size: var(--mc-s1); }
body[data-page] .g-ladder .zp-lrow .promo { font-family: var(--mc-font); font-size: var(--mc-s1); }
body[data-page] .g-ladder .zp-lrow.is-div { background: rgba(0, 0, 0, 0.35); font-size: var(--mc-s1); }
body[data-page] .g-ladder .zp-lrow.is-div b { font-family: var(--mc-font); font-weight: 400; font-size: var(--mc-s1); }
body[data-page] .g-ladder .zp-panel-foot { font-size: var(--mc-s1); }

/* join head, phones: the status line drops under the edition so neither is cut */
@media (max-width: 479px) {
  body[data-page="join"] .ph-aside .ph-row { grid-template-columns: auto minmax(0, 1fr); row-gap: 2px; }
  body[data-page="join"] .ph-aside .ph-row .end { grid-column: 2; display: flex; align-items: center; gap: 8px; }
}
@media (max-width: 479px) {
  body[data-page] .g-hotbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}