/* Item database (items.html, item.html), on top of quests.css */
:root { --tip-bg: #070a1a; --tip-border: #5d6177; --green: #1eff00; }
.q0 { color: #9d9d9d } .q1 { color: #fff } .q2 { color: #1eff00 } .q3 { color: #0070dd } .q4 { color: #a335ee } .q5 { color: #ff8000 }
.q6 { color: #e6cc80 } .q7 { color: #00ccff }
.it-filters select:disabled { opacity: .45; }

/* icons */
.it-ic { flex: none; width: 40px; height: 40px; border-radius: 7px; border: 2px solid #3a3a3a; background: #111; display: grid; place-items: center;
  overflow: hidden; box-shadow: 0 0 0 1px #000; }
.it-ic img { width: 100%; height: 100%; display: block; }
.it-ic.q2 { border-color: #1eff00; } .it-ic.q3 { border-color: #0070dd; } .it-ic.q4 { border-color: #a335ee; } .it-ic.q5 { border-color: #ff8000; }
.it-ic.q0 { border-color: #555; }
.it-ic.sm { width: 26px; height: 26px; border-width: 1px; border-radius: 5px; }
.it-ic.big { width: 64px; height: 64px; border-radius: 10px; }
.it-ic-l { color: #888; font-weight: 800; }

/* the list */
.it-list { display: flex; flex-direction: column; gap: 6px; }
.it-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 12px;
  border-radius: 11px; text-decoration: none; background: #121726; border: 1px solid #222941; transition: border-color .15s, transform .15s; }
.it-row:hover, .it-row:focus-visible { border-color: var(--gold-dim); transform: translateY(-1px); outline: none; }
.it-t { min-width: 0; }
.it-t b { display: block; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it-t span { color: var(--muted); font-size: 13px; }
.it-src { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tag.s-quest { color: #ffe9a8; background: #3a2f12; border-color: #6b5520; }
.tag.s-craft { color: #d9c8ff; background: #2a1f45; border-color: #5a3f99; }
.tag.s-drop, .tag.s-world { color: #ffd0c8; background: #3a1714; border-color: #7a3228; }
.tag.s-vendor { color: #c8f0d0; background: #12301b; border-color: #2c7a42; }
.tag.s-object, .tag.s-skin, .tag.s-fish, .tag.s-pick, .tag.s-container { color: #cfe6ff; background: #13294a; border-color: #2c5a99; }
.it-sugrow { display: grid !important; grid-template-columns: 26px minmax(0, 1fr) !important; }
.it-sugrow .t b { font-weight: 700; }

/* one item */
.itd-head { display: flex; align-items: center; gap: 16px; }
.itd-head h1 { margin: 0 0 6px; font-family: var(--display); font-weight: 800; letter-spacing: .5px; font-size: clamp(24px, 3.4vw, 36px); line-height: 1.15; }
.itd .qd-grid { grid-template-columns: minmax(0, 1fr) 400px; }
.it-h { margin: 0 0 12px !important; }
.it-way { margin-bottom: 16px; }
.it-way + .it-way { margin-top: 0; }
.it-way header { margin-bottom: 12px; }
.it-way header .tag { margin-bottom: 6px; display: inline-block; }
.it-way h2 { margin: 0 !important; font-size: 19px !important; }
.it-way h2 a { color: #f3ead0; text-decoration: none; } .it-way h2 a:hover { color: var(--gold); text-decoration: underline; }
.it-way-sub { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }
.it-way-sub a { color: #ffe08a; }
.it-way .qd-steps .sub a { color: #ffe08a; }
.sk { font-weight: 800; } .sk.o { color: #ff8040; } .sk.y { color: #ffff00; } .sk.g { color: #40bf40; } .sk.gr { color: #808080; }
.it-mats { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.qd-steps .it-mats li { padding: 6px 8px; line-height: 1.35; }
.qd-steps .it-mats li::before { content: none; counter-increment: none; }
.it-mats li { padding: 6px 8px; border-radius: 9px; background: #0f1320; border: 1px solid #222941; }
.it-mats a { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: 14px; }
.it-mats a:hover span:last-child { text-decoration: underline; }
.it-mats .n { color: #fff; }
.it-mats small { display: block; color: var(--muted); font-size: 12px; margin: 2px 0 0 34px; }
.it-all { margin-top: 12px; }
.it-all summary { cursor: pointer; color: #ffe08a; font-size: 13.5px; font-weight: 700; width: fit-content; }
.it-all table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 13.5px; }
.it-all th { text-align: left; color: var(--muted); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
  padding: 6px 8px; border-bottom: 1px solid #262d45; }
.it-all td { padding: 6px 8px; border-bottom: 1px dashed #232a40; color: #d9d6cc; vertical-align: middle; }
.it-all td small { color: var(--muted); }
.it-none p { color: #c9cfdf; line-height: 1.6; margin: 0; } .it-none a { color: #ffe08a; }
.it-used { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.it-used li { padding: 6px 10px; border-radius: 9px; background: #0f1320; border: 1px solid #222941; }
.it-used a { text-decoration: none; font-weight: 700; } .it-used a:hover { text-decoration: underline; }
.it-used li > a:not([class]) { color: #ffe08a; }
.it-used small { color: var(--muted); }

/* tooltip, as in game */
.tip { background: var(--tip-bg); border: 2px solid var(--tip-border); border-radius: 6px; padding: 9px 12px;
  font-family: Verdana, "Segoe UI", sans-serif; font-size: 13px; line-height: 1.4; color: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .45); }
.tip .nm { font-size: 15px; font-weight: 700; } .tip .il { color: #ffd100; } .tip .row { display: flex; justify-content: space-between; gap: 10px; }
.tip .eq { color: var(--green); } .tip .desc { color: #ffd100; } .tip .muted { color: #bbb; } .tip .sell { color: #fff; }

@media (max-width: 1100px) { .itd .qd-grid { grid-template-columns: minmax(0, 1fr) 340px; } }
@media (max-width: 900px) { .itd .qd-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .it-row { grid-template-columns: 36px minmax(0, 1fr); }
  .it-src { grid-column: 2; justify-content: flex-start; }
  .it-ic.big { width: 52px; height: 52px; }
  .it-all td:nth-child(2), .it-all th:nth-child(2) { display: none; }
}