/* In-game wiki (ui/wiki.js): categories and search on the left, banner + page on the right, upgrade tables +0..+9 */
#wiki .win-body { padding: 4px; }
.wk-wrap { display: flex; gap: 4px; height: 232px; }

/* ---------- side: search, categories, back / forward ---------- */
.wk-side { flex: none; width: 86px; display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.wk-search { display: flex; gap: 2px; height: 12px; }
#ui .wk-search input { flex: 1; min-width: 0; width: 0; height: 12px; font-size: 7px; }
.wk-sbtn { flex: none; width: 12px; height: 12px; cursor: pointer; background: #2a2018 var(--ic-search) center / 12px 12px no-repeat;
  box-shadow: inset 0 0 0 1px var(--bronze); }
.wk-sbtn:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.wk-exact { display: flex; align-items: center; gap: 3px; height: 10px; font-size: 7px; line-height: 9px; color: var(--dim); cursor: pointer; }
.wk-exact input { flex: none; }
.wk-cats-t { height: 9px; font-size: 7px; line-height: 9px; color: var(--gold); }
.wk-cats { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 1px; background: #120e0b; box-shadow: inset 0 0 0 1px #2e251c; }
/* group header like the original's: bronze bar, arrow up = open, down = folded */
.wk-gh { display: flex; align-items: center; justify-content: space-between; height: 11px; padding: 0 3px; margin-top: 1px; cursor: pointer;
  font-size: 7px; line-height: 11px; color: var(--gold); background: linear-gradient(#3b2f23, #2a2119); box-shadow: inset 0 1px 0 #5e4a33, inset 0 0 0 1px #4a3b2b; }
.wk-gh:first-child { margin-top: 0; }
.wk-gh:hover { color: #fff; }
.wk-fold { position: relative; flex: none; width: 6px; height: 6px; }
.wk-fold::after { content: ''; position: absolute; left: 0; top: 1px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 3px solid var(--bronze-l); }
.wk-gh.closed .wk-fold::after { border-bottom: 0; border-top: 3px solid var(--bronze-l); }
.wk-ci { height: 10px; padding: 0 4px 0 6px; font-size: 7px; line-height: 10px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  background: #120e0b; }
.wk-ci:hover { background: #241c15; color: #fff; }
.wk-ci.picked { color: var(--gold); background: #33281b; box-shadow: inset 1px 0 0 var(--gold); }
.wk-nav { width: 100%; }
.wk-arr { display: block; width: 0; height: 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent; }
.wk-arr.l { border-right: 4px solid currentColor; }
.wk-arr.r { border-left: 4px solid currentColor; }

/* ---------- main: banner, class filter, page ---------- */
.wk-main { flex: none; width: 256px; display: flex; flex-direction: column; min-height: 0; }
.wk-banner { position: relative; flex: none; height: 36px; overflow: hidden; background: #0f0c0a no-repeat; background-size: 400px 258px;
  box-shadow: inset 0 0 0 1px var(--bronze), 0 0 0 1px var(--edge); }
.wk-bshade { position: absolute; inset: 1px; background: linear-gradient(90deg, rgba(10, 7, 6, .85), rgba(10, 7, 6, .5) 45%, rgba(10, 7, 6, 0) 75%); }
.wk-btitle { position: absolute; left: 6px; top: 5px; height: 15px; padding: 0 6px; font-size: 12px; line-height: 15px; letter-spacing: 1px; color: #fff;
  white-space: nowrap; background: linear-gradient(#d83c2c, #95180f); box-shadow: 0 0 0 1px var(--edge), inset 0 1px 0 #ff8c6c, inset 0 -1px 0 #5a0c06;
  text-shadow: 1px 1px 0 #3a0603; }
.wk-bsub { position: absolute; left: 7px; top: 24px; max-width: 240px; font-size: 7px; line-height: 8px; color: #f3e6c4; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; text-shadow: 1px 1px 0 #000; }
.wk-tools { flex: none; display: flex; gap: 2px; height: 13px; margin-top: 3px; }
.wk-job { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 2px; padding: 0 2px; cursor: pointer;
  font-size: 7px; line-height: 9px; color: var(--dim); background: #15100d; box-shadow: inset 0 0 0 1px #33281d; white-space: nowrap; }
.wk-job:first-child { flex: none; width: 30px; }
.wk-job img { flex: none; width: 11px; height: 11px; }
.wk-job:hover { color: var(--text); }
.wk-job.picked { color: var(--gold); background: #2a2018; box-shadow: inset 0 0 0 1px var(--bronze), inset 0 -1px 0 1px var(--gold-d); }
.wk-body { flex: 1; min-height: 0; margin-top: 3px; overflow-y: auto; overflow-x: hidden; }
.wk-empty { padding: 24px 6px; font-size: 7px; line-height: 9px; text-align: center; }
.wk-intro { margin-bottom: 2px; padding: 3px 5px; font-size: 7px; line-height: 9px; background: #1d1712; box-shadow: inset 0 0 0 1px var(--bronze-d); }
.wk-note { margin: 3px 2px; font-size: 6px; line-height: 7px; }

/* ---------- equipment: name bar and the upgrade table +0..+9 ---------- */
.wk-ser { margin-bottom: 4px; padding: 1px; background: #120e0b; box-shadow: inset 0 0 0 1px #2e251c; }
.wk-sh { display: flex; align-items: center; gap: 4px; height: 11px; padding: 0 3px; margin-bottom: 1px; font-size: 7px; line-height: 11px;
  background: linear-gradient(#33281d, #241c15); box-shadow: inset 0 0 0 1px #4a3b2b; }
.wk-sn { flex: 1; min-width: 0; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.wk-sn:hover { color: #fff; }
.wk-sk { flex: none; font-size: 6px; color: var(--dim); }
.wk-sl { flex: none; color: var(--text); }
.wk-sl.red { color: #ff7a6a; }
.wk-grid { display: grid; grid-template-columns: 18px 32px repeat(10, 20px); }
.wk-icol { grid-column: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; background: #0f0c0a;
  box-shadow: inset 0 0 0 1px #2e261d; }
.wk-icol img { width: 16px; object-fit: contain; pointer-events: none; }
.wk-icol:hover { box-shadow: inset 0 0 0 1px var(--bronze-l); }
.wk-c { display: flex; align-items: center; justify-content: center; min-width: 0; font-size: 7px; line-height: 9px; color: var(--text);
  white-space: nowrap; box-shadow: inset -1px -1px 0 #221a14; }
.wk-c.h { color: var(--gold); background: #1d1712; }
.wk-c.h.go { cursor: pointer; }
.wk-c.h.go:hover { color: #fff; }
.wk-c.lab { justify-content: flex-start; padding-left: 3px; color: var(--dim); font-size: 6px; background: #17120e; }
.wk-c.lab.h { color: var(--gold-d); font-size: 6px; }
.wk-c.y { font-size: 6px; color: #efd9a0; }
.wk-c.p { font-size: 6px; }
.wk-c.p.good { color: var(--green); }
.wk-c.p.mid { color: var(--gold); }
.wk-c.p.low { color: #ff7a6a; }
.wk-c.cur { background: rgba(242, 196, 90, .1); }
.wk-c.h.cur { color: #fff; background: #3a2c1c; }
.wk-c.m .slot { width: 18px; height: 18px; }
/* +9 into the next tier */
.wk-next { display: flex; align-items: center; gap: 3px; min-height: 20px; margin-top: 1px; padding: 1px 3px; font-size: 7px; line-height: 8px;
  background: #1d1712; box-shadow: inset 0 0 0 1px #3a2d20; }
.wk-nt { flex: none; }
.wk-nn { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-nm { flex: none; display: flex; gap: 1px; }
.wk-ny { flex: none; font-size: 6px; color: #efd9a0; }

/* ---------- pages: header, values, sections and lines ---------- */
.wk-head { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; padding: 3px 4px; background: #1d1712; box-shadow: inset 0 0 0 1px var(--bronze-d); }
.wk-head > .wk-ric { width: 18px; height: 18px; background-color: #0f0c0a; box-shadow: inset 0 0 0 1px #2e261d; }
.wk-head > .wk-ric img { left: 1px; top: 1px; }
.wk-hb { flex: 1; min-width: 0; }
.wk-hn { font-size: 9px; line-height: 10px; color: #f2e7c1; overflow-wrap: anywhere; }
.wk-hn.boss { color: #ff9b3a; }
.wk-hn.stone { color: #d0a8ff; }
.wk-hn.map { color: #9fd6ff; }
.wk-hm { margin-top: 1px; font-size: 7px; line-height: 8px; color: var(--dim); }
.wk-plus { display: flex; gap: 1px; margin-bottom: 3px; }
.wk-pt { flex: 1; height: 11px; font-size: 7px; line-height: 11px; text-align: center; cursor: pointer; color: var(--dim); background: #15100d;
  box-shadow: inset 0 0 0 1px #33281d; }
.wk-pt:hover { color: var(--text); }
.wk-pt.picked { color: var(--gold); background: #2a2018; box-shadow: inset 0 0 0 1px var(--bronze), inset 0 -1px 0 1px var(--gold-d); }
/* the item's values as its tooltip, standing in the page */
#wiki .wk-tt.tooltip { position: static; max-width: none; z-index: auto; pointer-events: auto; margin: 0 0 2px; box-shadow: inset 0 0 0 1px var(--bronze-d); }
.wk-kv { display: flex; flex-direction: column; margin-bottom: 2px; padding: 2px 4px; background: #120e0b; box-shadow: inset 0 0 0 1px #2e251c; }
.wk-kvr { display: flex; justify-content: space-between; gap: 6px; font-size: 7px; line-height: 9px; }
.wk-kvr span:last-child { text-align: right; }
.wk-sec { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; margin: 5px 0 1px; padding: 0 1px 1px;
  border-bottom: 1px solid #3a2e22; font-size: 8px; line-height: 9px; color: var(--gold); }
.wk-sec .dim { font-size: 6px; }
.wk-grp { display: flex; justify-content: space-between; margin: 3px 1px 1px; font-size: 6px; line-height: 7px; color: var(--gold-d); }
.wk-grc { color: var(--gold); }
.wk-row { display: flex; align-items: center; gap: 3px; min-height: 18px; padding: 1px 2px; border-bottom: 1px solid #221a14; }
.wk-row.go { cursor: pointer; }
.wk-row.go:hover { background: #241c15; }
.wk-ric { position: relative; flex: none; width: 16px; height: 16px; background: center / 16px 16px no-repeat; }
.wk-ric img { position: absolute; left: 0; top: 0; width: 16px; height: 16px; object-fit: contain; pointer-events: none; }
.wk-ric.px.mob { background-image: var(--ic-skull); background-size: 12px 12px; }
.wk-ric.px.boss { background-image: var(--ic-crown); background-size: 12px 12px; }
.wk-ric.px.stone { background-image: url(../assets/icon/item/71080.png); }
.wk-ric.px.yang { background-image: url(../assets/icon/item/money.png); }
.wk-ric.px.quest { background-image: url(../assets/icon/item/50307.png); }
.wk-ric.px.map { background-image: var(--ic-map); }
.wk-ric.px.exp { background-image: var(--ic-hero); }
.wk-ric.px.gear { background-image: var(--ic-sword); }
.wk-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wk-r1 { font-size: 7px; line-height: 8px; overflow-wrap: anywhere; }
.wk-r2 { font-size: 6px; line-height: 7px; color: var(--dim); overflow-wrap: anywhere; }
.wk-rr { flex: none; max-width: 72px; padding-left: 2px; font-size: 7px; line-height: 8px; color: var(--gold); text-align: right; }
.wk-ritems { display: flex; flex-wrap: wrap; gap: 1px; margin-top: 1px; }
.wk-more { padding: 2px; font-size: 7px; line-height: 8px; text-align: center; color: var(--gold); cursor: pointer; }
.wk-more:hover { color: #fff; }
.wk-items { display: flex; flex-wrap: wrap; gap: 1px; margin: 1px 0 2px; }
.wk-stone { display: flex; align-items: center; gap: 4px; padding: 1px 2px; border-bottom: 1px solid #221a14; }
.wk-sgr { flex: none; display: flex; gap: 1px; }
/* links in the text: items, monsters (bosses orange, metin stones violet), maps */
.wk-a { color: #f2e7c1; cursor: pointer; }
.wk-a:hover { color: #fff; text-decoration: underline; }
.wk-a.mob { color: #f4efe2; }
.wk-a.boss { color: #ff9b3a; }
.wk-a.stone { color: #d0a8ff; }
.wk-a.map { color: #9fd6ff; }
.wk-a.npc { color: #c8f0b8; cursor: default; }
.wk-a.npc:hover { text-decoration: none; }