/* Ocarina of Time 3D item database (items.js): filter chips and search on top, one card per item.
   Band and title styles are shared with songs.css; slots and panels come from theme.css. */
.oot-db { padding: 16px; }
.oot-db-top { display: grid; gap: 12px; }
.oot-db-tools { display: grid; gap: 10px; }
.oot-db-tools[hidden], .oot-db-none[hidden], .oot-db-group[hidden], .oot-db-card[hidden] { display: none; }
.oot-db-q { width: min(360px, 100%); padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--oot-rim-dim); background: #0b1430; color: var(--oot-ink); font: 600 15px/1.2 var(--oot-sans); }
.oot-db-q::placeholder { color: var(--oot-ink-dim); opacity: 1; }
.oot-db-q { box-sizing: border-box; min-width: 0; font-size: 16px; }
.oot-db-q:focus-visible, .oot-db-chips button:focus-visible { outline: 2px solid var(--oot-gold); outline-offset: 2px; }
.oot-db-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.oot-db-chips button { padding: 6px 13px; border-radius: 999px; border: 1.5px solid var(--oot-rim-dim); background: #0b1430; color: var(--oot-ink-dim); font: 700 13.5px/1.2 var(--oot-sans); cursor: pointer; }
.oot-db-chips button[aria-pressed=true] { border-color: var(--oot-gold-deep); background: rgba(243, 207, 95, .1); color: var(--oot-gold-soft); }
.oot-db-gh { margin: 22px 0 10px; font: 700 17px/1.2 var(--oot-serif); color: var(--oot-gold); letter-spacing: .04em; }
.oot-db-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.oot-db-card { display: grid; gap: 10px; align-content: start; padding: 14px; border-radius: 12px; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px var(--oot-line); scroll-margin-top: 90px; }
.oot-db-card:target { box-shadow: inset 0 0 0 2px var(--oot-gold-deep); }
.oot-db-card header { display: flex; align-items: center; gap: 12px; }
.oot-db-card, .oot-db-card header > div { min-width: 0; overflow-wrap: anywhere; }
.oot-db-card h3 { margin: 0; font: 700 17px/1.2 var(--oot-sans); color: var(--oot-ink); }
.oot-db-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 0; }
.oot-db-tags span { padding: 2px 8px; border-radius: 999px; background: rgba(143, 163, 199, .14); color: var(--oot-ink-dim); font: 700 11.5px/1.4 var(--oot-sans); }
.oot-db-tags .is-magic { background: rgba(67, 194, 92, .16); color: #9be8a9; }
.oot-db-desc { margin: 0; padding: 8px 11px; border-left: 3px solid var(--oot-gold-deep); border-radius: 0 8px 8px 0; background: rgba(11, 20, 48, .7); color: var(--oot-navi); font: italic 500 14px/1.45 var(--oot-sans); }
.oot-db-where { margin: 0; color: var(--oot-ink-2, #c9d1e6); font-size: 14px; line-height: 1.5; }
.oot-db-where b { color: var(--oot-gold-soft); }
.oot-db-chests { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 5px; }
.oot-db-chests li { padding: 2px 9px 2px 22px; border-radius: 6px; background: rgba(169, 122, 31, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='1' y='4' width='10' height='7' rx='1' fill='%23a97a1f'/%3E%3Cpath d='M1 5V3.5A2.5 2.5 0 0 1 3.5 1h5A2.5 2.5 0 0 1 11 3.5V5Z' fill='%23f3cf5f'/%3E%3Crect x='5' y='4' width='2' height='3' fill='%23070b18'/%3E%3C/svg%3E") 6px 50% / 11px no-repeat; color: var(--oot-gold-soft); font: 700 12px/1.5 var(--oot-sans); }
.oot-db-none { margin: 16px 0 0; color: var(--oot-ink-dim); }
@media (max-width: 560px) { .oot-db { padding: 12px; } .oot-db-grid { grid-template-columns: minmax(0, 1fr); } .oot-db-chips button { min-height: 44px; } }
.oot-db-note { margin: 0; color: var(--oot-ink-dim); font-size: 14px; line-height: 1.45; }