/* Item-Übersicht (/items) – ergänzt creature.css + apocalypse.css */
.tools { display: flex; gap: 8px; align-items: center; }
.tools input { flex: 1; min-width: 0; }
.tools select { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 10px; padding: 7px 8px; font: inherit; font-size: 14px; }
.seg.view { flex: none; }
.seg.view button { padding: 5px 10px; font-size: 16px; }
#cats button img { width: 18px; height: 18px; image-rendering: pixelated; vertical-align: -4px; margin-right: 4px; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips button b { font-weight: 500; opacity: .65; margin-left: 3px; }
#dist { display: flex; height: 10px; border-radius: 5px; overflow: hidden; border: 1px solid var(--line); max-width: 900px; }
#dist i { display: block; height: 100%; }
.it.blk { grid-template-columns: 44px 1fr; }
.it .n small { display: block; font-weight: 600; font-size: 12px; }
.it .d:empty { display: none; }
.igrid { display: flex; flex-wrap: wrap; gap: 4px; }
.cell { width: 48px; height: 48px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); border-bottom: 3px solid; border-radius: 6px; cursor: default; }
.cell img { width: 36px; height: 36px; image-rendering: pixelated; }
#tip { position: fixed; z-index: 20; pointer-events: none; max-width: 300px; background: #16171c; color: #eee; border: 1px solid #444; border-radius: 8px; padding: 7px 9px; font-size: 13px; box-shadow: 0 4px 16px rgba(0,0,0,.35); }
#tip small { display: block; color: #bbc; }
@media (max-width: 520px) { #cats button span { display: none; } #cats button img { margin-right: 0; } .cell { width: 42px; height: 42px; } .cell img { width: 32px; height: 32px; } }
.it { align-content: start; }
@media (min-width: 900px) { #cats, .chips { flex-wrap: wrap; overflow: visible; } #cats button { flex: 0 1 auto; } }
@media (max-width: 600px) { .tools { flex-wrap: wrap; } .tools #q { flex: 1 0 100%; } .tools select { flex: 1; height: 40px; } }