.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.slot {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 10px 10px; min-height: 148px; border-radius: var(--r-md);
  background: linear-gradient(170deg, rgba(45, 41, 37, .85), rgba(19, 17, 15, .85));
  border: 1px solid var(--line-strong);
}
.slot--locked { border-color: var(--gold); box-shadow: var(--glow-gold); }
.slot--empty { justify-content: center; border-style: dashed; color: var(--text-dim); background: rgba(255, 255, 255, .02); }
.slot--empty:hover:not(:disabled) { border-color: var(--radiant); color: var(--text); }
.slot__plus { font-size: 28px; line-height: 1; color: var(--radiant); }
.slot__hint { font-size: 12px; }
.slot__img { width: 74px; height: 54px; object-fit: contain; border-radius: var(--r-xs); }
.slot__name { font-size: 12.5px; text-align: center; line-height: 1.25; min-height: 2.5em; }
.slot__lock { margin-top: auto; padding: 3px 10px; font-size: 11.5px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--text-dim); }
.slot__lock:hover { color: var(--text); border-color: var(--gold); }
.slot--locked .slot__lock { color: var(--gold); border-color: var(--gold); }
.slots--mini { grid-template-columns: repeat(6, 1fr); gap: 6px; }
.slots--mini .slot { min-height: 0; padding: 6px; }
.slots--mini .slot__img { width: 100%; height: 34px; }
.slots--mini .slot__name, .slots--mini .slot__lock { display: none; }

.pips { display: flex; gap: 6px; }
.pip { width: 14px; height: 14px; transform: rotate(45deg); border-radius: 3px; background: var(--dire); box-shadow: var(--glow-dire); }
.pip--off { background: transparent; border: 1px solid var(--line-strong); box-shadow: none; }

.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-top: 12px; max-height: 52vh; overflow: auto; padding-right: 4px; }
.picker-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: var(--r-sm); border: 1px solid var(--line); background: rgba(255, 255, 255, .03); font-size: 11.5px; text-align: center; }
.picker-item:hover:not(:disabled) { border-color: var(--radiant); background: rgba(220, 181, 104, .08); }
.picker-item:disabled { opacity: .3; cursor: not-allowed; }
.picker-item img { width: 56px; height: 42px; object-fit: contain; }

.slot--boots { border-color: var(--gold); box-shadow: var(--glow-gold); }
.slot--pick { cursor: pointer; }
.slot__tag { font-size: 11px; color: var(--text-faint); }
.slot--boots .slot__tag { color: var(--gold); }
.slot__xp { margin-top: auto; font-size: 11.5px; font-weight: 600; color: var(--ok); }
.slots--mini .slot__tag, .slots--mini .slot__xp { display: none; }
.build-timer { padding: 10px 14px; border-radius: var(--r-sm); background: rgba(220, 181, 104, .06); border: 1px solid rgba(220, 181, 104, .3); }
.build-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 12px; border-radius: var(--r-sm); border: 1px dashed var(--line-strong); }
.build-opts .btn { justify-content: flex-start; gap: 10px; }