/* The item picker (tools/wiki/picker.js): chips for the +level, the version and the options, the game's tooltip card and the item's picture beside them. */
.pk { clear: none; margin: 14px 0 18px; padding: 12px 14px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.pk[hidden] { display: none; }
.pk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pk-title { font: 700 16px var(--sans); }
.pk-actions { display: flex; gap: 6px; }
.pk-btn, .pk-chip { font: 13px/1.2 var(--sans); color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 3px; cursor: pointer;
  white-space: nowrap; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.pk-btn { padding: 4px 10px; }
.pk-chip { padding: 6px 10px; min-height: 32px; min-width: 38px; }
.pk-btn:hover:not(:disabled), .pk-chip:hover { background: var(--th); }
.pk-btn:disabled { opacity: .45; cursor: default; }
.pk-chip.on { background: var(--btn); color: var(--btn-text); border-color: var(--btn); }
.pk-chip.on:hover { filter: brightness(1.12); }
.pk-btn:focus-visible, .pk-chip:focus-visible, .pk-card:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.pk-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 8px 22px; align-items: start; }
.pk-ctl { display: grid; gap: 9px; min-width: 0; }
.pk-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px 10px; align-items: start; }
.pk-row[hidden] { display: none; }
.pk-lab { font: 600 13px/32px var(--sans); color: var(--muted); -webkit-user-select: none; user-select: none; }
.pk-chips { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.pk-out { display: grid; justify-items: center; gap: 8px; position: sticky; top: 10px; min-width: 0; }
.pk-live { position: absolute; left: -9999px; }

/* the tooltip box as the game draws it: 80% black in a 1 px black frame, a line each, centred, the dark red and ancient lines on bars */
.pk-card { width: 100%; max-width: 340px; padding: 3px 2px; background: rgba(0, 0, 0, .92); outline: 1px solid #000; color: #fff;
  font: 12.5px/17px Tahoma, "Segoe UI", Arial, sans-serif; text-align: center; }
.pk-line { min-height: 17px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.pk-line > span { text-wrap: balance; }
.pk-line.half { min-height: 0; height: 8px; }
.pk-line.b { font-weight: 700; }

@media (max-width: 820px) {
  .pk-body { grid-template-columns: minmax(0, 1fr); }
  .pk-out { position: static; }
  .pk-row { grid-template-columns: minmax(0, 1fr); }
  .pk-lab { line-height: 1.2; }
  .pk-chip { min-height: 38px; min-width: 42px; }
  .pk-card { max-width: 360px; }
}
@media (prefers-reduced-motion: reduce) { .pk-chip, .pk-btn { transition: none; } }

/* the builder as a game window (CEO, 2026-10-26: "MU-style controls"): our own CSS drawing of the client's look (black stone panel, grey-rimmed
   boxes, orange labels, dark rounded buttons with a silver rim, white tick boxes); no game art. Only the controls: the card is in the infobox. */
.pk.ctl-only { background: radial-gradient(120% 90% at 50% 0%, #1d1c1b, #0b0b0b 70%); border: 2px solid #4d4b49; border-radius: 8px; color: #ddd;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px #2a2827, 0 4px 14px rgba(0,0,0,.35); padding: 10px 12px 12px; }
.pk.ctl-only .pk-body { grid-template-columns: minmax(0, 1fr); }
.pk.ctl-only .pk-title { color: #fff; font: 700 15px Tahoma, "Segoe UI", Arial, sans-serif; letter-spacing: .2px; }
.pk.ctl-only .pk-row { grid-template-columns: 1fr; gap: 3px; padding: 7px 8px 8px; border: 1px solid #6d6b69; border-radius: 4px; background: rgba(0,0,0,.45);
  box-shadow: inset 0 0 0 1px #000; }
.pk.ctl-only .pk-lab { color: #e8a33a; font: 700 12px/1.4 Tahoma, "Segoe UI", Arial, sans-serif; }
.pk.ctl-only .pk-ctl { gap: 7px; }
.pk.ctl-only .pk-btn, .pk.ctl-only .pk-chip { font: 12px/1.2 Tahoma, "Segoe UI", Arial, sans-serif; color: #e6e6e6; background: linear-gradient(#3c3b3a, #171615);
  border: 1px solid #8b8885; border-radius: 7px; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 3px rgba(0,0,0,.6); }
.pk.ctl-only .pk-chip { min-height: 30px; padding: 5px 9px; }
.pk.ctl-only .pk-btn:hover:not(:disabled), .pk.ctl-only .pk-chip:hover { background: linear-gradient(#4a4846, #1f1e1d); border-color: #c9c5c0; color: #fff; }
.pk.ctl-only .pk-chip.on { background: linear-gradient(#5a4520, #2a1d08); border-color: #f0b030; color: #ffd27a; box-shadow: inset 0 0 6px rgba(255,190,60,.45), 0 0 0 1px #000; }
/* tick boxes for the on/off extras and the excellent options, as the game's */
.pk.ctl-only .pk-chip[role="checkbox"] { background: none; border-color: transparent; box-shadow: none; padding-left: 4px; display: inline-flex; align-items: center; gap: 7px; text-align: left; white-space: normal; }
.pk.ctl-only .pk-chip[role="checkbox"]::before { content: ""; flex: none; width: 15px; height: 15px; background: #f2f2f2; border: 1px solid #000; box-shadow: inset 1px 1px 2px rgba(0,0,0,.4); }
.pk.ctl-only .pk-chip[role="checkbox"].on { color: #fff; background: none; border-color: transparent; box-shadow: none; }
.pk.ctl-only .pk-chip[role="checkbox"].on::before { background: #f2f2f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") center/13px no-repeat; }
.pk.ctl-only .pk-chip[role="checkbox"]:hover { background: rgba(255,255,255,.06); }
.pk.ctl-only .pk-btn:focus-visible, .pk.ctl-only .pk-chip:focus-visible { outline: 2px solid #f0b030; }