/* =========================================================
   EQUIPAMENTO — o inventário de RPG da ficha (inventory.js; prefixo .eqp-)
   Quatro espaços, um de cada tipo (mão, cabeça, roupa, consumível), em
   volta da soma nos atributos; embaixo, os guardados em cartas.
   O mesmo desenho aparece só para ler na janela do morador (Moradores →
   Inventário). Cada tipo de espaço tem a sua cor (--eq-t):
   mão vermelho, cabeça azul, roupa laranja, consumível verde.
   Mundo Invertido: painel escuro com brilho; Hawkins: revista em
   quadrinhos (papel, contorno preto, sombra dura), como a Minha Ficha.
   Celular: bloco "EQUIPAMENTO" no fim do mobile.css.
   ========================================================= */
.eqp {
  --eq-bg: linear-gradient(170deg, rgba(20, 16, 38, 0.94), rgba(8, 10, 24, 0.96));
  --eq-line: #3a3352; --eq-text: #ece8f6; --eq-muted: #aaa3c6; --eq-dim: #8d86b0;
  --eq-card: linear-gradient(165deg, #1b1630, #110e22); --eq-card-line: #463d63;
  --eq-accent: #ff2e6b; --eq-up: #8ff0ae; --eq-up-bg: #0d2a18; --eq-down: #ff9aa6; --eq-down-bg: #2c0d15;
  --eq-radius: 6px; --eq-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.85);
  container: eqp / inline-size;
  display: grid; gap: 14px; color: var(--eq-text);
}
.eqp [data-type="mao"], .eqp .eqp-filter [data-bag="mao"] { --eq-t: #ff5468; --eq-t-soft: rgba(255, 84, 104, 0.16); }
.eqp [data-type="cabeca"], .eqp .eqp-filter [data-bag="cabeca"] { --eq-t: #5aa7ff; --eq-t-soft: rgba(90, 167, 255, 0.16); }
.eqp [data-type="roupa"], .eqp .eqp-filter [data-bag="roupa"] { --eq-t: #ffb24a; --eq-t-soft: rgba(255, 178, 74, 0.16); }
.eqp [data-type="consumivel"], .eqp .eqp-filter [data-bag="consumivel"] { --eq-t: #5fe08a; --eq-t-soft: rgba(95, 224, 138, 0.16); }

/* ---------- painéis ---------- */
.eqp-rig, .eqp-bag { position: relative; min-width: 0; padding: 16px 16px 18px; border: 1px solid var(--eq-line); border-radius: var(--eq-radius); background: var(--eq-bg); box-shadow: var(--eq-shadow); }
.eqp-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; margin-bottom: 14px; }
.eqp-title { margin: 0; font: 800 17px var(--font-card); letter-spacing: 0.16em; text-transform: uppercase; color: #fff; }
.eqp-title span { display: inline-grid; place-items: center; min-width: 24px; height: 22px; margin-left: 6px; padding: 0 6px; border-radius: 99px; background: var(--eq-accent); color: #fff; font: 700 12px/1 var(--font-type); letter-spacing: 0; vertical-align: 2px; }
.eqp-sub { margin: 3px 0 0; font: 12.5px/1.4 var(--font-type); color: var(--eq-muted); }
.eqp-perk { flex: 0 1 auto; max-width: 100%; align-self: center; padding: 5px 11px; border: 1px dashed var(--eq-dim); border-radius: 99px; color: var(--eq-muted); font: 700 11.5px var(--font-type); letter-spacing: 0.02em; }
.eqp-perk.is-on { border: 1px solid #ffb24a; background: rgba(255, 178, 74, 0.14); color: #ffd79c; box-shadow: 0 0 16px rgba(255, 178, 74, 0.2); }

/* ---------- o quadro: 4 espaços em volta da soma ---------- */
.eqp-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr); grid-template-areas: "cabeca core roupa" "mao core consumivel"; gap: 12px; }
.eqp-slot[data-type="mao"] { grid-area: mao; }
.eqp-slot[data-type="cabeca"] { grid-area: cabeca; }
.eqp-slot[data-type="roupa"] { grid-area: roupa; }
.eqp-slot[data-type="consumivel"] { grid-area: consumivel; }
.eqp-core { grid-area: core; }

.eqp-slot {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; min-height: 212px; margin: 0; padding: 34px 12px 12px;
  border: 1.5px solid color-mix(in srgb, var(--eq-t) 55%, #000); border-radius: var(--eq-radius);
  background: radial-gradient(ellipse 80% 55% at 50% 42%, var(--eq-t-soft), transparent 72%), var(--eq-card);
  color: var(--eq-text); font: inherit; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.4), var(--eq-shadow);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
/* os cantos do encaixe (colchetes na cor do tipo) */
.eqp-slot::before { content: ""; position: absolute; inset: 7px; border-radius: 3px; pointer-events: none;
  background: linear-gradient(var(--eq-t), var(--eq-t)) top left / 14px 2px, linear-gradient(var(--eq-t), var(--eq-t)) top left / 2px 14px,
    linear-gradient(var(--eq-t), var(--eq-t)) top right / 14px 2px, linear-gradient(var(--eq-t), var(--eq-t)) top right / 2px 14px,
    linear-gradient(var(--eq-t), var(--eq-t)) bottom left / 14px 2px, linear-gradient(var(--eq-t), var(--eq-t)) bottom left / 2px 14px,
    linear-gradient(var(--eq-t), var(--eq-t)) bottom right / 14px 2px, linear-gradient(var(--eq-t), var(--eq-t)) bottom right / 2px 14px;
  background-repeat: no-repeat; opacity: 0.85; }
.eqp-slot-lab { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 99px; background: var(--eq-t); color: #120d1c; font: 800 10.5px var(--font-type); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 0 14px var(--eq-t-soft); }
.eqp-glyph { width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.eqp-slot-art { display: grid; place-items: center; width: 100%; flex: 1; min-height: 76px; }
.eqp-slot-art img { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.55)); }
.eqp-slot-name { align-self: stretch; padding: 0 6px; font: 800 14px/1.15 var(--font-card); letter-spacing: 0.04em; text-transform: uppercase; overflow-wrap: anywhere; }
.eqp-slot .bonus-chips { justify-content: center; }
.eqp-slot .tile-timer { align-self: stretch; }
.eqp-slot.is-filled { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.is-ro .eqp-slot.is-filled { cursor: default; }
.eqp-slot.is-filled:hover { transform: translateY(-3px); border-color: var(--eq-t); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px var(--eq-t), 0 0 24px var(--eq-t-soft), var(--eq-shadow); }
.is-ro .eqp-slot.is-filled:hover { transform: none; }
/* vazio: o encaixe esperando, com o desenho do tipo apagado */
.eqp-slot.is-empty { justify-content: center; border-style: dashed; border-color: color-mix(in srgb, var(--eq-t) 40%, #3a3352); background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.018) 0 8px, transparent 8px 16px), var(--eq-card); box-shadow: none; }
button.eqp-slot.is-empty { cursor: pointer; }
button.eqp-slot.is-empty:hover { border-color: var(--eq-t); background: radial-gradient(ellipse 80% 55% at 50% 45%, var(--eq-t-soft), transparent 72%), var(--eq-card); }
button.eqp-slot:focus-visible { outline: 3px solid var(--eq-t); outline-offset: 2px; }
.eqp-slot-ghost { display: grid; place-items: center; }
.eqp-ghost { width: 54px; height: 54px; fill: none; stroke: var(--eq-t); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.45; }
.eqp-slot-empty { font: 800 15px var(--font-card); letter-spacing: 0.18em; text-transform: uppercase; color: var(--eq-text); }
.eqp-slot-hint { max-width: 18ch; font: 11.5px/1.35 var(--font-type); color: var(--eq-muted); }
.eqp-x { position: absolute; top: 7px; right: 7px; z-index: 2; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid var(--eq-card-line); border-radius: 50%; background: #0c0a18; color: var(--eq-muted); font-size: 11px; line-height: 1; cursor: pointer; }
.eqp-x:hover { border-color: var(--eq-t); background: var(--eq-t); color: #120d1c; }
.eqp-x:focus-visible { outline: 3px solid var(--eq-t); outline-offset: 1px; }
.eqp-slot.is-just { animation: eqpJust 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes eqpJust {
  0% { transform: translateY(10px) scale(0.95); box-shadow: 0 0 0 0 var(--eq-t); }
  45% { transform: translateY(-4px) scale(1.03); box-shadow: 0 0 0 3px var(--eq-t), 0 0 30px var(--eq-t-soft); }
  100% { transform: none; }
}

/* o centro: a soma do equipamento */
.eqp-core { display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; padding: 14px 12px; border: 1px solid var(--eq-card-line); border-radius: var(--eq-radius); background: radial-gradient(circle at 50% 0, rgba(255, 46, 107, 0.14), transparent 60%), #0b0918; }
.eqp-core-cap { margin: 0; font: 800 11px var(--font-type); letter-spacing: 0.2em; text-transform: uppercase; text-align: center; color: var(--eq-muted); }
.eqp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.eqp-stats li { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 9px; border: 1px solid var(--eq-card-line); border-radius: 4px; background: rgba(255, 255, 255, 0.03); cursor: help; }
.eqp-stats abbr { font: 700 11px var(--font-card); letter-spacing: 0.12em; text-decoration: none; color: var(--eq-muted); }
.eqp-stats b { font: 800 17px/1 var(--font-card); color: var(--eq-dim); }
.eqp-stats li.up { border-color: #2f8a56; background: var(--eq-up-bg); }
.eqp-stats li.up b { color: var(--eq-up); }
.eqp-stats li.down { border-color: #8a2f3a; background: var(--eq-down-bg); }
.eqp-stats li.down b { color: var(--eq-down); }
.eqp-core-foot { margin: 0; font: 11.5px/1.4 var(--font-type); text-align: center; color: var(--eq-muted); }
.eqp-core-foot b { color: var(--eq-text); }

/* ---------- guardados ---------- */
.eqp-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
.eqp-filter button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--eq-card-line); border-radius: 99px; background: #0e0b1d; color: var(--eq-muted); font: 700 12px var(--font-type); letter-spacing: 0.04em; cursor: pointer; transition: border-color 0.15s, background-color 0.15s, color 0.15s; }
.eqp-filter button small { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); font: 700 11px var(--font-type); }
.eqp-filter button .eqp-glyph { color: var(--eq-t, var(--eq-muted)); }
.eqp-filter button:hover { border-color: var(--eq-t, var(--eq-accent)); color: var(--eq-text); }
.eqp-filter button.on { border-color: var(--eq-t, var(--eq-accent)); background: var(--eq-t, var(--eq-accent)); color: #120d1c; }
.eqp-filter button.on .eqp-glyph { color: inherit; }
.eqp-filter button.on small { background: rgba(0, 0, 0, 0.2); }
.eqp-filter button.is-empty:not(.on) { opacity: 0.6; }
.eqp-filter button:focus-visible { outline: 3px solid var(--eq-t, var(--eq-accent)); outline-offset: 2px; }

.eqp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; max-height: 640px; margin: 0; padding: 3px; overflow-y: auto; list-style: none; scrollbar-color: #5a2f4c #0b0a18; }
.is-ro .eqp-list { max-height: none; overflow: visible; }
.eqp-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding: 30px 10px 10px; border: 1px solid var(--eq-card-line); border-top: 3px solid var(--eq-t); border-radius: var(--eq-radius); background: radial-gradient(ellipse 90% 50% at 50% 30%, var(--eq-t-soft), transparent 70%), var(--eq-card); text-align: center; box-shadow: var(--eq-shadow); transition: transform 0.15s, box-shadow 0.15s; }
.eqp-item[data-drag] { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.eqp-item[data-drag]:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--eq-t), var(--eq-shadow); }
.eqp-item-qty { position: absolute; top: 7px; left: 8px; padding: 1px 7px; border-radius: 3px; background: #fff; color: #120d1c; font: 800 11.5px var(--font-type); }
.eqp-item-type { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px; color: var(--eq-t); font: 800 10px var(--font-type); letter-spacing: 0.12em; text-transform: uppercase; }
.eqp-item-type .eqp-glyph { width: 13px; height: 13px; flex-basis: 13px; }
.eqp-item-art { display: grid; place-items: center; height: 70px; }
.eqp-item-art img { width: 70px; height: 70px; object-fit: contain; filter: drop-shadow(0 7px 9px rgba(0, 0, 0, 0.5)); }
.eqp-item-name { font: 800 13.5px/1.15 var(--font-card); letter-spacing: 0.03em; text-transform: uppercase; overflow-wrap: anywhere; }
.eqp-item .bonus-chips { justify-content: center; }
.eqp-item-meta, .eqp-item-open { font: 11px/1.3 var(--font-type); color: var(--eq-muted); }
.eqp-item-open { font-weight: 700; color: #ffb3bd; }
.eqp-item .tile-timer { align-self: stretch; }
.eqp-item-acts { display: flex; flex-direction: column; align-items: stretch; gap: 5px; width: 100%; margin-top: auto; padding-top: 4px; }
.eqp-add { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border: 0; border-radius: 4px; background: var(--eq-t); color: #120d1c; font: 800 11.5px/1.2 var(--font-type); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; box-shadow: 0 3px 0 color-mix(in srgb, var(--eq-t) 55%, #000); transition: filter 0.15s, transform 0.15s; }
.eqp-add:hover { filter: brightness(1.1); transform: translateY(-1px); }
.eqp-add:active { transform: translateY(1px); box-shadow: 0 1px 0 color-mix(in srgb, var(--eq-t) 55%, #000); }
.eqp-add:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.eqp-add-g { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.eqp-sell { all: unset; padding: 2px; font: 700 11px var(--font-type); color: #ffb3bd; text-decoration: underline; text-align: center; cursor: pointer; }
.eqp-sell:hover { color: #fff; }
.eqp-sell:focus-visible { outline: 3px solid var(--eq-accent); outline-offset: 2px; }
.eqp-empty { margin: 0; padding: 26px 12px; border: 1px dashed var(--eq-card-line); border-radius: var(--eq-radius); color: var(--eq-muted); font: 13px/1.55 var(--font-type); text-align: center; }
.eqp-empty b { color: var(--eq-text); }
.eqp-empty a { color: #ff8fa3; }
.eqp-info { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; padding: 9px 11px; border: 1px solid var(--eq-line); border-radius: 4px; font: 11.5px/1.5 var(--font-type); color: var(--eq-muted); }
.eqp-info-i { flex: 0 0 auto; display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid #6da9e7; border-radius: 50%; color: #8ac3ff; font: italic 700 11px Georgia, serif; }
/* bônus que a Mochila do Dustin aumentou */
.eqp .bonus-chips .boost::after { content: "★"; margin-left: 2px; font-size: 0.85em; }

/* arrastar: só o encaixe do mesmo tipo acende */
.eqp .drop-ok { outline: 2px solid var(--eq-t, var(--eq-accent)); outline-offset: 2px; }
.eqp .drop-no { opacity: 0.4; }
.eqp .drop-ok.drop-over { transform: scale(1.03); box-shadow: 0 0 0 2px var(--eq-t, var(--eq-accent)), 0 0 30px var(--eq-t-soft, rgba(255, 46, 107, 0.3)); }
.eqp-bag.drop-ok.drop-over { transform: none; }

/* ---------- janela do morador (só para ler) ---------- */
.rec-inv .eqp { margin-top: 2px; }
.rec-inv-wait { margin: 0; padding: 22px 8px; font: 13px/1.5 var(--font-type); text-align: center; opacity: 0.8; }

/* ---------- perks do inventário (2026-09-30): Presenteador (dar 1 item fechado) e Sucateiro (item vencido vira dinheiro) ---------- */
.eqp { --eq-gift: #ffd27a; --eq-gift-bg: rgba(255, 210, 122, 0.08); }
.eqp-gift { all: unset; padding: 2px; font: 700 11px var(--font-type); color: var(--eq-gift); text-decoration: underline; text-align: center; cursor: pointer; }
.eqp-gift:hover { color: #fff; }
.eqp-gift:focus-visible { outline: 3px solid var(--eq-accent); outline-offset: 2px; }
.eqp-giftbox { display: grid; gap: 8px; margin: 0 0 14px; padding: 12px; border: 1px solid var(--eq-gift); border-radius: var(--eq-radius); background: var(--eq-gift-bg); }
.eqp-gift-h { margin: 0; font: 700 14px/1.4 var(--font-type); color: var(--eq-text); overflow-wrap: anywhere; }
.eqp-gift-to { display: grid; gap: 4px; max-width: 420px; font: 700 11px var(--font-type); letter-spacing: 0.08em; text-transform: uppercase; color: var(--eq-muted); }
.eqp-gift-to select { min-width: 0; padding: 8px 10px; border: 1px solid var(--eq-card-line); border-radius: 4px; background: #0b0a18; color: var(--eq-text); font: 14px var(--font-ui); letter-spacing: 0; text-transform: none; }
.eqp-gift-to select:focus-visible { outline: 3px solid var(--eq-gift); outline-offset: 1px; }
.eqp-gift-note { margin: 0; font: 11.5px/1.5 var(--font-type); color: var(--eq-muted); }
.eqp-gift-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.eqp-giftbox .eqp-add { --eq-t: var(--eq-gift); }
.eqp-giftbox .eqp-add[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
.eqp-scrap { margin-top: 14px; padding: 10px 12px; border: 1px dashed var(--eq-card-line); border-radius: var(--eq-radius); }
.eqp-scrap-h { margin: 0 0 8px; font: 800 13px var(--font-type); letter-spacing: 0.08em; text-transform: uppercase; color: var(--eq-text); }
.eqp-scrap-h small { display: block; margin-top: 2px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--eq-muted); }
.eqp-scrap-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.eqp-scrap-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.eqp-scrap-art { flex: none; display: grid; place-items: center; width: 34px; height: 34px; }
.eqp-scrap-art img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(0.85) sepia(0.35) brightness(0.9); }
.eqp-scrap-list b { flex: 1 1 120px; min-width: 0; font: 700 13px/1.35 var(--font-type); color: var(--eq-text); overflow-wrap: anywhere; }

/* ---------- Hawkins: revista em quadrinhos ---------- */
.theme-hawkins .eqp {
  --eq-bg: #fffdf8; --eq-line: #111; --eq-text: #111; --eq-muted: #4f4a44; --eq-dim: #8c857a;
  --eq-card: #fff; --eq-card-line: #111; --eq-accent: #e8352a;
  --eq-up: #0b6b1f; --eq-up-bg: #dff5df; --eq-down: #b00020; --eq-down-bg: #fde3e3;
  --eq-radius: 0; --eq-shadow: 4px 4px 0 #111;
}
.theme-hawkins .eqp [data-type="mao"], .theme-hawkins .eqp .eqp-filter [data-bag="mao"] { --eq-t: #e8352a; --eq-t-soft: rgba(232, 53, 42, 0.12); }
.theme-hawkins .eqp [data-type="cabeca"], .theme-hawkins .eqp .eqp-filter [data-bag="cabeca"] { --eq-t: #1f63c9; --eq-t-soft: rgba(31, 99, 201, 0.12); }
.theme-hawkins .eqp [data-type="roupa"], .theme-hawkins .eqp .eqp-filter [data-bag="roupa"] { --eq-t: #d9780b; --eq-t-soft: rgba(217, 120, 11, 0.14); }
.theme-hawkins .eqp [data-type="consumivel"], .theme-hawkins .eqp .eqp-filter [data-bag="consumivel"] { --eq-t: #1e8a44; --eq-t-soft: rgba(30, 138, 68, 0.12); }
.theme-hawkins .eqp-rig, .theme-hawkins .eqp-bag { border-width: 2.5px; background: radial-gradient(rgba(17, 17, 17, 0.07) 1px, transparent 1.3px) 0 0 / 6px 6px, #fffdf8; }
.theme-hawkins .eqp-title { color: #111; }
.theme-hawkins .eqp-title span { border-radius: 0; background: #e8352a; box-shadow: 1.5px 1.5px 0 #111; }
.theme-hawkins .eqp-perk { border: 2px dashed #111; border-radius: 0; color: #4f4a44; }
.theme-hawkins .eqp-perk.is-on { border: 2px solid #111; background: #ffe45c; color: #111; box-shadow: 3px 3px 0 #111; }
.theme-hawkins .eqp-slot { border: 2.5px solid #111; background: radial-gradient(ellipse 80% 55% at 50% 42%, var(--eq-t-soft), transparent 72%), #fff; box-shadow: 4px 4px 0 #111; }
.theme-hawkins .eqp-slot::before { inset: 6px; opacity: 1; }
.theme-hawkins .eqp-slot-lab { border-radius: 0; background: #111; color: #fff; box-shadow: 2px 2px 0 var(--eq-t); }
.theme-hawkins .eqp-slot-lab .eqp-glyph { color: var(--eq-t); filter: brightness(1.35); }
.theme-hawkins .eqp-slot.is-filled:hover { border-color: #111; box-shadow: 6px 6px 0 #111, 0 0 0 2px var(--eq-t); }
.theme-hawkins .eqp-slot.is-empty { border: 2.5px dashed #111; background: repeating-linear-gradient(-45deg, rgba(17, 17, 17, 0.04) 0 8px, transparent 8px 16px), rgba(255, 255, 255, 0.7); box-shadow: none; }
.theme-hawkins button.eqp-slot.is-empty:hover { background: radial-gradient(ellipse 80% 55% at 50% 45%, var(--eq-t-soft), transparent 72%), #fff; box-shadow: 3px 3px 0 #111; }
.theme-hawkins .eqp-ghost { opacity: 0.6; }
.theme-hawkins .eqp-x { border: 2px solid #111; background: #fff; color: #111; }
.theme-hawkins .eqp-x:hover { background: var(--eq-t); color: #fff; }
.theme-hawkins .eqp-core { border: 2.5px solid #111; border-radius: 0; background: #111; box-shadow: 4px 4px 0 var(--eq-accent); color: #fff; }
.theme-hawkins .eqp-core-cap { color: #ffe45c; }
.theme-hawkins .eqp-stats li { border: 2px solid #fff; border-radius: 0; background: #1c1c1c; }
.theme-hawkins .eqp-stats abbr { color: #d9d2c4; }
.theme-hawkins .eqp-stats b { color: #8c857a; }
.theme-hawkins .eqp-stats li.up { border-color: #9be15d; background: #10301a; }
.theme-hawkins .eqp-stats li.up b { color: #b8f58d; }
.theme-hawkins .eqp-stats li.down { border-color: #ff8a93; background: #3a1016; }
.theme-hawkins .eqp-stats li.down b { color: #ffb3ba; }
.theme-hawkins .eqp-core-foot { color: #d9d2c4; }
.theme-hawkins .eqp-core-foot b { color: #fff; }
.theme-hawkins .eqp-filter button { border: 2px solid #111; border-radius: 0; background: #fff; color: #111; box-shadow: 2px 2px 0 #111; }
.theme-hawkins .eqp-filter button small { border-radius: 0; background: #f1ead9; }
.theme-hawkins .eqp-filter button:hover { background: #ffe45c; border-color: #111; }
.theme-hawkins .eqp-filter button.on { background: #111; border-color: #111; color: #ffe45c; box-shadow: none; transform: translate(2px, 2px); }
.theme-hawkins .eqp-filter button.on .eqp-glyph { color: var(--eq-t, #ffe45c); }
.theme-hawkins .eqp-filter button.on small { background: #ffe45c; color: #111; }
.theme-hawkins .eqp-item { border: 2px solid #111; border-top: 6px solid var(--eq-t); background: radial-gradient(ellipse 90% 50% at 50% 30%, var(--eq-t-soft), transparent 70%), #fff; box-shadow: 3px 3px 0 #111; }
.theme-hawkins .eqp-item[data-drag]:hover { box-shadow: 5px 5px 0 #111; }
.theme-hawkins .eqp-item-qty { border-radius: 0; background: #111; color: #ffe45c; }
.theme-hawkins .eqp-item-type { color: #111; }
.theme-hawkins .eqp-item-type .eqp-glyph { color: var(--eq-t); }
.theme-hawkins .eqp-item-open { color: #b00020; }
.theme-hawkins .eqp-add { border: 2px solid #111; border-radius: 0; background: var(--eq-t); color: #fff; box-shadow: 3px 3px 0 #111; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.theme-hawkins .eqp-add:active { box-shadow: 1px 1px 0 #111; transform: translate(2px, 2px); }
.theme-hawkins .eqp-add:focus-visible { outline-color: #111; }
.theme-hawkins .eqp-sell { color: #b00020; }
.theme-hawkins .eqp-sell:hover { color: #111; }
.theme-hawkins .eqp-empty { border: 2px dashed #111; border-radius: 0; background: rgba(255, 255, 255, 0.6); color: #4f4a44; }
.theme-hawkins .eqp-empty b { color: #111; }
.theme-hawkins .eqp-empty a { color: #c0231a; }
.theme-hawkins .eqp-info { border: 2px solid #111; border-radius: 0; background: #ffe45c; color: #111; }
.theme-hawkins .eqp-info-i { border-color: #111; color: #111; }
.theme-hawkins .eqp-list { scrollbar-color: #111 #f6efdf; }
.theme-hawkins .eqp .drop-ok { outline-color: #111; }
.theme-hawkins .eqp { --eq-gift: #8a5a00; --eq-gift-bg: #fff4d6; }
.theme-hawkins .eqp-gift:hover { color: #111; }
.theme-hawkins .eqp-giftbox { border: 2px solid #111; background: #fff4d6; box-shadow: 3px 3px 0 #111; }
.theme-hawkins .eqp-giftbox .eqp-add { --eq-t: #e8a30b; color: #111; text-shadow: none; }
.theme-hawkins .eqp-gift-to select { border: 2px solid #111; border-radius: 0; background: #fff; color: #111; }
.theme-hawkins .eqp-scrap { border: 2px dashed #111; background: rgba(255, 255, 255, 0.6); }

/* ---------- o quadro se ajusta à largura que tem (não à da tela) ---------- */
@container eqp (max-width: 560px) {
  .eqp-board { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "cabeca roupa" "mao consumivel" "core core"; gap: 10px; }
  .eqp-slot { min-height: 196px; padding: 40px 8px 10px; }
  /* espaço estreito: o rótulo vira a faixa colorida do topo e o ✕ desce para baixo dela */
  .eqp-slot-lab { top: 0; left: 0; right: 0; transform: none; justify-content: center; padding: 5px 6px; border-radius: 5px 5px 0 0; letter-spacing: 0.1em; }
  .theme-hawkins .eqp-slot-lab { border-radius: 0; box-shadow: none; }
  .eqp-slot::before { inset: 30px 7px 7px; }
  .eqp-x { top: 33px; right: 5px; }
  /* os filtros dos guardados numa fileira que desliza de lado */
  .eqp-filter { flex-wrap: nowrap; overflow-x: auto; margin-inline: -10px; padding: 2px 10px 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .eqp-filter::-webkit-scrollbar { display: none; }
  .eqp-filter button { flex: 0 0 auto; }
  .eqp-slot-art img { width: 80px; height: 80px; }
  .eqp-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .eqp-stats li { flex-direction: column; gap: 2px; padding: 5px 2px; }
  .eqp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: none; }
}
@container eqp (max-width: 340px) {
  .eqp-rig, .eqp-bag { padding: 12px 10px 14px; }
  .eqp-slot { min-height: 184px; }
  .eqp-slot-lab { padding: 3px 8px 3px 6px; letter-spacing: 0.1em; }
  .eqp-slot-name { font-size: 12.5px; }
  .eqp-slot .tile-timer { flex-direction: column; align-items: stretch; gap: 3px; }
  .eqp-slot .tile-bar { flex: none; }
  .eqp-item { padding: 30px 6px 8px; }
  .eqp-item-type span, .eqp-item-type { letter-spacing: 0.06em; }
}

@media (prefers-reduced-motion: reduce) {
  .eqp-slot.is-just { animation: none; }
  .eqp-slot, .eqp-item, .eqp-add, .eqp-filter button { transition: none; }
  .eqp-slot.is-filled:hover, .eqp-item[data-drag]:hover, .eqp-add:hover { transform: none; }
}

/* ---------- admin: aba "Itens" do editor da ficha em Moradores (adminitens.js, prefixo .aitm-) ----------
   Herda as cores de onde está (janela do morador no Hawkins ou no Mundo Invertido). */
.aitm-tabs { display: flex; gap: 6px; min-width: 0; }
.aitm-tab { flex: 1 1 0; min-width: 0; margin: 0; padding: 8px 10px; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 4px; background: transparent; color: inherit; font: 700 13px var(--font-ui); letter-spacing: 0.04em; cursor: pointer; }
.aitm-tab[aria-selected="true"] { background: color-mix(in srgb, currentColor 14%, transparent); border-color: currentColor; }
.aitm-tab:hover, .aitm-tab:focus-visible { background: color-mix(in srgb, currentColor 10%, transparent); }
.aitm { display: grid; gap: 14px; min-width: 0; }
.aitm.is-busy { cursor: progress; }
.aitm-lead, .aitm-hint, .aitm-wait, .aitm-empty { margin: 0; font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.aitm-hint, .aitm-empty, .aitm-wait { opacity: 0.8; }
.aitm-msg { margin: 0; min-height: 1.4em; font: 700 12.5px/1.4 var(--font-ui); overflow-wrap: anywhere; outline: none; }
.aitm-msg.is-err { color: #ff7a82; }
.aitm-msg:empty { display: none; }
.aitm-sec { display: grid; gap: 8px; min-width: 0; }
.aitm-h { margin: 0; font: 700 11px var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; }
.aitm-slots, .aitm-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.aitm-slot { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; }
.aitm-slot-k { font: 700 11px var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }
.aitm-row { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 6px 5px 8px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 4px; }
.aitm-none { flex: 1 1 auto; min-width: 0; padding: 2px 0; font-size: 12.5px; opacity: 0.7; overflow-wrap: anywhere; }
.aitm-icon { flex: 0 0 auto; font-size: 18px; line-height: 1; }
.aitm-txt { display: grid; flex: 1 1 auto; min-width: 0; }
.aitm-txt b { font: 700 13px/1.3 var(--font-ui); overflow-wrap: anywhere; }
.aitm-txt small { font-size: 11.5px; line-height: 1.35; opacity: 0.8; overflow-wrap: anywhere; }
.aitm-acts { display: flex; flex: 0 0 auto; gap: 6px; }
.aitm-btn { flex: 0 0 auto; margin: 0; padding: 5px 10px; border: 1px solid currentColor; border-radius: 3px; background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; font: 700 12px var(--font-ui); cursor: pointer; }
.aitm-btn-alt { background: transparent; border-color: color-mix(in srgb, currentColor 55%, transparent); }
.aitm-btn:hover:not(:disabled), .aitm-btn:focus-visible { background: color-mix(in srgb, currentColor 22%, transparent); }
.aitm-btn:disabled { opacity: 0.45; cursor: default; }
.aitm-tag { flex: 0 0 auto; font: 700 10.5px var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }
.aitm-bsc { margin: 0; }
.aitm-bsc .bsc-row { max-width: none; }
.aitm-qty { display: flex; align-items: center; gap: 8px; font: 700 12px var(--font-ui); }
.aitm-qty label { margin: 0; }
.aitm-qty select { width: auto; margin: 0; }
.aitm-all { max-height: 420px; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
/* o lado do editor é estreito: na pesquisa os botões descem para baixo do nome */
.aitm-all .aitm-row { flex-wrap: wrap; row-gap: 6px; }
.aitm-all .aitm-txt { flex-basis: calc(100% - 34px); }
.aitm-all .aitm-acts { margin-left: auto; }
.aitm-all > [hidden] { display: none; }
.theme-hawkins .aitm-row, .theme-hawkins .aitm-tab, .theme-hawkins .aitm-btn { border-radius: 0; }
.theme-hawkins .aitm-msg.is-err { color: #b0201a; }