/* ==========================================================================
   THE OBJECTS INDEX -- objects.css

   Companion to library.css; only the few rules the index needs beyond the
   shared design system. Every colour and face below is a token already defined
   in library.css.

   CSP: style-src 'self' with no 'unsafe-inline', so this must be a linked file
   and nothing may use a style="" attribute.

   ASCII ONLY. Double hyphen "--" stands in for a dash.
   ========================================================================== */

.obj-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 var(--gap);
}

.obj-search {
  flex: 1 1 260px;
  min-width: 0;
  font-family: var(--face-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--parch-light);
  border: 1px solid var(--frame);
  padding: 8px 10px;
}

.obj-count {
  font-family: var(--face-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--stone-lit);
  white-space: nowrap;
}

.obj-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.obj-filter {
  font-family: var(--face-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--parch-light);
  background: var(--slate);
  border: 1px solid var(--stone);
  padding: 4px 8px;
  cursor: pointer;
}

.obj-filter[aria-pressed="true"] {
  background: var(--ornament);
  color: var(--parch-pale);
}

.obj-list {
  display: grid;
  gap: 1px;
  background: rgba(124, 139, 149, 0.25);
  border: 1px solid var(--hairline);
}

.obj-row {
  background: var(--night);
  padding: 9px 12px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.obj-body { min-width: 0; flex: 1 1 auto; }

/* Sprites are 32 or 64 px; the box is fixed so rows do not jitter as they load.
   image-rendering: pixelated keeps the pixel art crisp instead of smeared. */
.obj-icon {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  object-fit: contain;
  image-rendering: pixelated;
  background: rgba(124, 139, 149, 0.08);
  border: 1px solid rgba(124, 139, 149, 0.2);
}

.obj-icon--none { visibility: hidden; }

.obj-row:nth-child(even) { background: var(--slate-lo); }

.obj-name {
  font-family: var(--face-body);
  font-size: 14px;
  color: var(--parch-pale);
}

.obj-id {
  font-family: var(--face-mono);
  font-size: 11px;
  color: var(--stone-lit);
  margin-left: 8px;
}

.obj-look {
  color: var(--parch-light);
  font-size: 13px;
  line-height: 1.5;
  margin: 3px 0 0;
}

.obj-flags {
  margin: 4px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.obj-flag {
  font-family: var(--face-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone-lit);
  border: 1px solid rgba(124, 139, 149, 0.35);
  padding: 1px 5px;
}

.obj-flag--use_with { color: var(--parch-pale); border-color: var(--ornament); }

.obj-more {
  margin: var(--gap) 0 0;
  text-align: center;
}

.obj-empty {
  padding: 20px;
  text-align: center;
  color: var(--stone-lit);
}

@media (max-width: 640px) {
  .obj-tools { flex-direction: column; align-items: stretch; }
}

/* --- bestiary additions --------------------------------------------------- */

.obj-icon--sm {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}

.mon-dead {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  margin: 5px 0 0;
}

.mon-dead__label {
  font-family: var(--face-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--stone-lit);
  margin-right: 4px;
}

.mon-corpse { display: inline-flex; }