/* ==========================================================================
   Kit pages (kits/<key>.html). Only what these pages alone need; every shared part (panels,
   ladder rows, tier badges, item slots, stat strip, buttons) comes from zp.css, which loads
   after this sheet. Boxes that fill late keep their size from the first paint.
   ========================================================================== */

/* The head sits inside main, which is already the shell. */
body[data-page="kit"] main > .page-hero { width: auto; }

/* ---------- the head ---------- */
.kp-crumb {
  display: flex; align-items: center; gap: 6px; margin: 0 0 var(--s-4);
  font-family: var(--f-mono); font-size: var(--fs-xs); font-weight: 500; line-height: 1.2;
  letter-spacing: 0; text-transform: uppercase; color: var(--text-3);
}
.kp-crumb a { color: var(--accent); text-decoration: none; }
.kp-crumb a:hover { color: var(--accent-hi); text-decoration: underline; }
.kp-crumb svg { width: 12px; height: 12px; flex: none; }
.kp-title { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.kp-title .kp-ico { width: 64px; height: 64px; border-radius: var(--r-3); background: var(--surface-2); }
.kp-title .kp-ico img { width: 44px; height: 44px; }
.page-hero .kp-title h1 { margin: 0; min-width: 0; }
.kp-stats .zp-stat-k .zp-tier { height: 18px; min-width: 0; padding: 0 6px 0 7px; font-size: var(--mc-s1); font-family: var(--f-display); font-weight: 700; -webkit-font-smoothing: antialiased; }
a.zp-stat.kp-no1 { color: inherit; text-decoration: none; transition: background var(--fast); }
a.zp-stat.kp-no1:hover { background: var(--surface-2); }
a.zp-stat.kp-no1:focus-visible { outline-offset: -2px; }

/* ---------- the loadout: armour and offhand over the hotbar, as in game ---------- */
.lo {
  position: relative; display: grid; gap: 6px; padding: var(--s-3);
  background: var(--surface-sunk); border: 1px solid var(--line); border-radius: var(--r-2); box-shadow: var(--well);
}
.lo-labels {
  display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px;
  font-family: var(--f-mono); font-size: var(--mc-s1); font-weight: 500; line-height: 1; letter-spacing: 0; text-transform: uppercase; color: var(--text-3);
}
.lo-labels span:first-child { grid-column: 1 / 5; }
.lo-labels span:nth-child(2) { grid-column: 6 / 10; }
.lo-labels.is-one span { grid-column: 1 / -1; }
.lo-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
.lo-armour { margin-bottom: 6px; }
.lo .zp-slot { width: auto; height: auto; aspect-ratio: 1; min-width: 0; background: var(--bg); transition: border-color var(--fast), background var(--fast); }
.lo .zp-slot img { position: relative; width: 70%; height: 70%; }
.lo .zp-slot.is-full:hover { border-color: var(--line-3); background: var(--surface-2); }
.lo-hotbar { counter-reset: hb; }
.lo-hotbar .zp-slot { counter-increment: hb; }
.lo-hotbar .zp-slot::before { content: counter(hb); position: absolute; left: 3px; top: 2px; font-family: var(--f-mono); font-size: var(--mc-s1); line-height: 1; color: var(--text-3); }
.lo .zp-slot .pm {
  position: absolute; left: 15%; top: 15%; width: 70%; height: 70%;
  -webkit-mask: url(../../items/potion_overlay.png) center / contain no-repeat; mask: url(../../items/potion_overlay.png) center / contain no-repeat;
}
.lo .zp-slot .txt { padding: 1px; font-family: var(--f-mono); font-size: var(--mc-s1); font-weight: 500; line-height: 1.05; color: var(--text-2); text-align: center; word-break: break-word; }
.lo-gap { visibility: hidden; }
/* No fight to show: the slots keep their space, a plain sentence sits over them. */
.lo.is-empty > * { visibility: hidden; }
.lo.is-empty::after {
  content: attr(data-empty); position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s-4);
  border-radius: var(--r-2); background: var(--surface-sunk);
  font-size: var(--fs-sm); line-height: 1.5; color: var(--text-2); text-align: center;
}
.lo-cap { margin: 0; min-height: 2.9em; font-size: var(--fs-sm); line-height: 1.45; color: var(--text-3); }
.lo-cap a { color: var(--accent); text-decoration: none; }
.lo-cap a:hover { color: var(--accent-hi); text-decoration: underline; }

/* ---------- the body ---------- */
.kp-wrap { display: grid; gap: var(--s-5); }
.kp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.kp-col { display: grid; gap: var(--s-5); min-width: 0; align-content: start; }
.kp-foot:empty { display: none; }
.kp-sub { margin: 0 0 var(--s-4); font-size: var(--fs-sm); color: var(--text-3); }

/* Ladder rows: rank, player, tier, ZP, wins and losses */
.zp-ladder.kp-ladder { --cols: 30px minmax(0, 1fr) 64px 60px; }
.kp-ladder .zp-lrow { gap: 10px; }
.kp-rows { display: grid; }
.kp-ladder .kp-wlc { display: none; }
.kp-ladder .zp-who small { font-family: var(--f-mono); }
.kp-ladder .zp-tier { justify-self: start; }
.kp-pl { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
.kp-skel { display: block; min-height: 52px; }
.kp-skel::before { content: ""; display: block; height: 14px; width: 60%; margin-top: 11px; background: var(--surface-2); border-radius: var(--r-1); }
@media (min-width: 560px) {
  .zp-ladder.kp-ladder { --cols: 36px minmax(0, 1fr) 64px 72px 92px; }
  .kp-ladder .kp-wlc { display: block; }
  .kp-ladder .zp-who small { display: none; }
}

/* Recent fights: winner, score, ZP won and when */
.zp-ladder.kp-fights { --cols: minmax(0, 1fr) auto 96px; }
.kp-fights .zp-lrow { gap: 10px; }
.kp-fights .zp-score { white-space: nowrap; }
.kp-fights .zp-score .dim { margin: 0 3px; }
.kp-when { display: grid; justify-items: end; gap: 2px; min-width: 0; }
.kp-when small { font-family: var(--f-mono); font-size: var(--mc-s1); color: var(--text-3); white-space: nowrap; }
.kp-board .zp-empty, .kp-fights .zp-empty { margin: 0; }

/* ---------- the tier spread: one bar per tier, in that tier's colour ---------- */
.td { position: relative; }
.td-plot { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); align-items: end; height: 160px; border-bottom: 1px solid var(--line-2); }
.td-col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; outline: none; cursor: default; border-radius: var(--r-1) var(--r-1) 0 0; }
.td-col:hover, .td-col:focus-visible { background: var(--surface-2); }
.td-col:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.td-bar { display: block; width: min(22px, 64%); background: color-mix(in srgb, var(--tc, var(--accent)) 72%, var(--surface)); box-shadow: inset 0 2px 0 var(--tc, var(--accent)); border-radius: var(--r-1) var(--r-1) 0 0; transition: background-color var(--fast); }
.td-col:hover .td-bar, .td-col:focus-visible .td-bar { background: var(--tc, var(--accent)); }
.td-val { margin-bottom: 4px; font-family: var(--f-display); font-size: var(--mc-s1); font-weight: 700; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.td-col[data-tip]:hover::after, .td-col[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; translate: -50% 0; z-index: 3;
  padding: 6px 9px; border-radius: var(--r-2); white-space: nowrap;
  background: var(--surface-3); border: 1px solid var(--line-2); box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.9);
  font-family: var(--f-mono); font-size: var(--fs-xs); line-height: 1; color: var(--text); pointer-events: none;
}
.td-col:first-child[data-tip]:hover::after, .td-col:first-child[data-tip]:focus-visible::after { left: 0; translate: 0 0; }
.td-col:last-child[data-tip]:hover::after, .td-col:last-child[data-tip]:focus-visible::after { left: auto; right: 0; translate: 0 0; }
.td-axis { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); margin-top: 6px; font-family: var(--f-mono); font-size: var(--mc-s1); line-height: 1; color: var(--text-3); text-align: center; }
.td-empty { position: absolute; left: 0; right: 0; top: 40px; margin: 0 auto; max-width: 34ch; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-sunk); font-size: var(--fs-sm); line-height: 1.5; color: var(--text-2); text-align: center; }
.td-empty[hidden] { display: none; }
.td-table { margin-top: var(--s-4); }
.td-table summary { cursor: pointer; width: fit-content; font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: 0; text-transform: uppercase; color: var(--text-2); }
.td-table summary:hover { color: var(--text); }
.td-table table { width: 100%; margin-top: var(--s-3); border-collapse: collapse; font-size: var(--fs-sm); }
.td-table th, .td-table td { padding: 6px 8px; border-top: 1px solid var(--line); text-align: left; color: var(--text-2); font-weight: 500; }
.td-table td { text-align: right; color: var(--text); }

/* ---------- tips and the other kits ---------- */
.kp-tips { margin: 0; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.kp-tips li { font-size: var(--fs-base); }
.kp-others { display: grid; gap: var(--s-3); margin-top: var(--s-2); }
.kp-others .ph-kits { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 760px) {
  .kp-tips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-5); }
  .kp-others .ph-kits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1001px) {
  .kp-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .kp-others .ph-kits { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
  .kp-title { gap: var(--s-3); }
  .kp-title .kp-ico { width: 52px; height: 52px; }
  .kp-title .kp-ico img { width: 36px; height: 36px; }
  .kp-btns .zp-btn { flex: 1 1 100%; }
  .kp-btns .zp-ip { justify-content: space-between; }
  .kp-btns .zp-ip .zp-ip-hint { padding: 0 16px; }
  .lo { padding: var(--s-2); gap: 5px; }
  .lo-grid { gap: 3px; }
  .lo-hotbar .zp-slot::before { font-size: var(--mc-s1); left: 2px; top: 1px; }
  .lo .zp-slot .ct { font-size: var(--mc-s1); }
  .td-plot { height: 150px; }
  .td-axis { font-size: var(--mc-s1); letter-spacing: 0; }
  .td-val { font-size: var(--mc-s1); }
}

/* ==========================================================================
   Minecraft look (2026-10-19)
   kit.css loads before zp.css and mc.css, so every rule here starts at body[data-page="kit"].
   The loadout is the survival inventory: a grey container with the armour column beside the
   player in the black preview box, the offhand at the figure's foot, the 27 slots of the main
   inventory and the hotbar with its first slot selected. Every item has its item tooltip (mc.js),
   the stack count sits in the slot's corner with the game's shadow.
   ========================================================================== */
body[data-page="kit"] .kp-loadout {
  --lo-s: 40px; --lo-pad: 10px;
  border-image-source: var(--mc-gui);
  width: min(100%, calc(9 * var(--lo-s) + 16px + 2 * var(--lo-pad))); justify-self: end;
  padding: 4px var(--lo-pad) 8px; gap: 8px;
  color: var(--mc-gui-ink); text-shadow: var(--mc-shadow);
}
body[data-page="kit"] .kp-loadout .ph-cap { color: var(--mc-gui-ink); text-shadow: var(--mc-shadow); }
body[data-page="kit"] .kp-loadout a { color: #cdbbff; text-shadow: none; border-bottom: 0; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
body[data-page="kit"] .kp-loadout a:hover { color: #000; }
body[data-page="kit"] .lo { display: block; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
body[data-page="kit"] .lo-top {
  display: grid; grid-template-columns: var(--lo-s) calc(var(--lo-s) * 2.75) var(--lo-s) minmax(0, 1fr);
  grid-template-rows: repeat(4, var(--lo-s));
}
body[data-page="kit"] .lo-armour { grid-column: 1; grid-row: 1 / 5; display: grid; grid-template-rows: repeat(4, var(--lo-s)); }
body[data-page="kit"] .lo-preview {
  grid-column: 2; grid-row: 1 / 5; margin: 0 2px; overflow: hidden;
  display: grid; place-items: end center;
  background: #000; border: 2px solid; border-color: #373737 #ffffff #ffffff #373737;
}
body[data-page="kit"] .lo-preview img { width: auto; height: calc(100% - 8px); margin-bottom: 4px; image-rendering: pixelated; }
body[data-page="kit"] .lo-off { grid-column: 3; grid-row: 4; }
body[data-page="kit"] .lo-who {
  grid-column: 4; grid-row: 1 / 5; min-width: 0; padding: 0 0 0 10px;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 0; line-height: 1.45;
}
body[data-page="kit"] .lo-who:not(:empty)::before { content: "Winner"; color: var(--mc-gui-ink-2); }
body[data-page="kit"] .lo-who > * { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-page="kit"] .lo-label { margin: 8px 0 2px; font-size: var(--mc-s1); line-height: 1.2; color: var(--mc-gui-ink); text-shadow: var(--mc-shadow); }
body[data-page="kit"] .lo-grid { display: grid; grid-template-columns: repeat(9, var(--lo-s)); gap: 0; }
body[data-page="kit"] .lo-hotbar { margin-top: 8px; }
body[data-page="kit"] .lo .zp-slot {
  position: relative; display: grid; place-items: center;
  width: var(--lo-s); height: var(--lo-s); aspect-ratio: auto; min-width: 0; background: none; transition: none;
}
body[data-page="kit"] .lo .zp-slot img { position: relative; width: 32px; height: 32px; image-rendering: pixelated; }
body[data-page="kit"] .lo .zp-slot .pm { left: 50%; top: 50%; width: 32px; height: 32px; translate: -50% -50%; }
body[data-page="kit"] .lo .zp-slot .txt { font-size: var(--mc-s1); line-height: 1; color: var(--mc-gui-ink); text-shadow: var(--mc-shadow); overflow: hidden; max-width: 100%; }
body[data-page="kit"] .lo .zp-slot .ct {
  position: absolute; right: 1px; bottom: 0; z-index: 2;
  font-size: var(--mc-s1); line-height: 1; color: #fff; text-shadow: var(--mc-shadow);
}
/* the hovered slot turns white, as in game */
body[data-page="kit"] .lo .zp-slot:hover { background: none; border-color: transparent; }
body[data-page="kit"] .lo .zp-slot:hover::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(255, 255, 255, 0.45); pointer-events: none; }
/* the selected hotbar slot: the lavender selection frame */
body[data-page="kit"] .lo-hotbar .zp-slot::before { content: none; }
body[data-page="kit"] .lo-hotbar .zp-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;
}
/* no fight to show: the slots stay, the sentence sits over them in a dark well */
body[data-page="kit"] .lo.is-empty { position: relative; }
body[data-page="kit"] .lo.is-empty > * { visibility: visible; opacity: 0.6; }
body[data-page="kit"] .lo.is-empty::after {
  z-index: 4; inset: 30px 10px; padding: 12px; border-radius: 0;
  border: 2px solid transparent; border-image: var(--mc-well) 1 fill / 2px / 0 stretch; background: none;
  font-size: var(--mc-s1); color: var(--text-2); text-shadow: var(--mc-shadow);
}
body[data-page="kit"] .lo-cap { min-height: 0; font-size: var(--mc-s1); line-height: 1.5; color: var(--mc-gui-ink); text-shadow: var(--mc-shadow); }

/* the kit icon beside the title sits in a slot */
body[data-page="kit"] .kp-title .kp-ico {
  width: 52px; height: 52px; 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"] .kp-title .kp-ico img { width: 48px; height: 48px; image-rendering: pixelated; }
body[data-page="kit"] .kp-crumb { font-size: var(--mc-s1); color: var(--mc-gray); }
body[data-page="kit"] .kp-crumb svg { filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.6)); }

/* the tier spread: square bars in the tier colour with a pixel bevel */
body[data-page="kit"] .td-plot { border-bottom: 2px solid #3a3446; }
body[data-page="kit"] .td-col { border-radius: 0; }
body[data-page="kit"] .td-col:hover, body[data-page="kit"] .td-col:focus-visible { background: rgba(255, 255, 255, 0.08); }
body[data-page="kit"] .td-col:focus-visible { box-shadow: inset 0 0 0 2px #fff; }
body[data-page="kit"] .td-col[data-tip]:hover::after, body[data-page="kit"] .td-col[data-tip]:focus-visible::after { content: none; display: none; }
body[data-page="kit"] .td-bar {
  width: min(20px, 70%); border-radius: 0;
  background: var(--tc, var(--accent));
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.35), inset -2px 0 0 rgba(0, 0, 0, 0.35), 2px 0 0 #000, -2px 0 0 #000, 0 -2px 0 #000;
}
body[data-page="kit"] .td-col:hover .td-bar, body[data-page="kit"] .td-col:focus-visible .td-bar { background: color-mix(in srgb, var(--tc, var(--accent)) 80%, #fff); }
body[data-page="kit"] .td-val { font-family: var(--mc-font); font-weight: 400; font-size: var(--mc-s1); margin-bottom: 6px; }
body[data-page="kit"] .td-axis { font-family: var(--mc-font); font-size: var(--mc-s1); color: var(--mc-gray); }
body[data-page="kit"] .td-axis.is-groups { grid-template-columns: repeat(5, minmax(0, 1fr)); }
body[data-page="kit"] .td-axis.is-groups span { box-shadow: inset 2px 0 0 #3a3446; padding-top: 2px; }
body[data-page="kit"] .td-axis.is-groups span:first-child { box-shadow: none; }
body[data-page="kit"] .td-axis i { font-style: normal; }
body[data-page="kit"] .td-empty { 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="kit"] .td-table summary { font-family: var(--mc-font); font-size: var(--mc-s1); color: var(--mc-gray); }
body[data-page="kit"] .td-table summary:hover { color: var(--mc-hover); }
body[data-page="kit"] .td-table th, body[data-page="kit"] .td-table td { border-top: 0; font-weight: 400; }
body[data-page="kit"] .td-table tr:nth-child(even) > * { background: rgba(255, 255, 255, 0.035); }
body[data-page="kit"] .kp-sub { font-size: var(--mc-s1); color: var(--mc-gray); }
body[data-page="kit"] .kp-pl { font-family: var(--mc-font); font-size: var(--mc-s1); color: var(--mc-gray); }
/* the pixel font runs wider: the last column of a fight takes what its words need */
body[data-page="kit"] .zp-ladder.kp-fights { --cols: minmax(0, 1fr) auto max-content; }
body[data-page="kit"] .kp-when small { font-family: var(--mc-font); font-size: var(--mc-s1); color: var(--mc-gray); }
body[data-page="kit"] .kp-skel::before { border-radius: 0; background: rgba(255, 255, 255, 0.06); }

/* the other kits: each icon in a slot */
body[data-page="kit"] .kp-others .ph-kits img { width: 32px; height: 32px; padding: 2px; border: 2px solid transparent; border-image: var(--mc-slot) 1 fill / 2px / 0 stretch; box-sizing: content-box; image-rendering: pixelated; }

/* the top ten: the tier column fits the "Placing" badge in the pixel font */
body[data-page="kit"] .zp-ladder.kp-ladder { --cols: 30px minmax(0, 1fr) 84px 50px; }
@media (min-width: 560px) { body[data-page="kit"] .zp-ladder.kp-ladder { --cols: 36px minmax(0, 1fr) 88px 64px 84px; } }

@media (max-width: 1000px) { body[data-page="kit"] .kp-loadout { justify-self: start; } }
@media (max-width: 479px) {
  body[data-page="kit"] .kp-loadout { --lo-s: 36px; --lo-pad: 6px; }
  body[data-page="kit"] .lo-who { padding-left: 8px; }
  body[data-page="kit"] .td-axis i { display: none; }
  body[data-page="kit"] .zp-ladder.kp-ladder .zp-lrow { gap: 8px; padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 359px) {
  body[data-page="kit"] .kp-loadout { --lo-s: 32px; --lo-pad: 4px; }
  body[data-page="kit"] .lo .zp-slot img, body[data-page="kit"] .lo .zp-slot .pm { width: 28px; height: 28px; }
}