:root { --bg:#14161c; --panel:#1d2029; --line:#2c3040; --text:#e8e6df; --muted:#9a9fb0; --accent:#d9a441; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.5 system-ui, sans-serif; }
header { position:sticky; top:0; z-index:5; background:var(--bg); padding:12px 24px 10px; border-bottom:1px solid var(--line); }
h1 { margin:0; font-size:20px; white-space:nowrap; } h1 span { color:var(--accent); }
.controls { display:flex; gap:8px; flex-wrap:wrap; }
#search, #sSearch, #item, #near, #sItem, select, #browse { background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:8px 10px; font:inherit; }
#item, #near, #sItem { flex:1 1 150px; min-width:0; }
#browse { cursor:pointer; }
#browse:hover { border-color:var(--accent); }
#count, #sCount { color:var(--muted); margin:0 0 0 auto; font-size:13px; }
main { max-width:1500px; margin:0 auto; padding:16px 24px 48px; display:grid; grid-template-columns:repeat(auto-fill,minmax(480px,1fr)); gap:8px; align-items:start; }
.region-head { grid-column:1/-1; }
.item { display:flex; gap:8px; align-items:stretch; }
.item .row { flex:1; }
.item.done .row { opacity:.55; }
.done-box { display:flex; align-items:center; padding:0 8px; cursor:pointer; }
.done-box input { width:20px; height:20px; accent-color:var(--accent); cursor:pointer; }
.flyout-done { display:flex; gap:8px; align-items:center; margin-top:10px; cursor:pointer; }
.row { display:grid; grid-template-columns:64px 1fr auto; gap:14px; align-items:center; width:100%; text-align:left; background:var(--panel); color:inherit; border:1px solid var(--line); border-radius:8px; padding:10px 14px; cursor:pointer; font:inherit; }
.row:hover, .row:focus-visible { border-color:var(--accent); outline:none; }
.lv { text-align:center; } .lv b { display:block; font-size:22px; color:var(--accent); line-height:1; } .lv small { color:var(--muted); font-size:11px; }
.name { font-weight:600; } .meta { color:var(--muted); font-size:13px; }
.tags { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.tag { background:#272b38; border-radius:999px; padding:2px 10px; font-size:12px; color:var(--muted); white-space:nowrap; }
.tag.boss { color:#e58a8a; }
#backdrop { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9; }
#flyout { position:fixed; top:0; right:0; bottom:0; width:min(520px,100vw); background:var(--panel); border-left:1px solid var(--line); z-index:10; overflow-y:auto; transform:translateX(100%); transition:transform .2s; padding-bottom:32px; }
#flyout.open { transform:none; }
#flyout img { width:100%; height:220px; object-fit:cover; display:block; background:#10121a; }
.fbody { padding:16px 24px; }
.fbody h2 { margin:0; } .fbody h3 { margin:22px 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); }
.fbody p { margin:0 0 10px; white-space:pre-line; }
.close { top:10px; background:rgba(0,0,0,.6); color:#fff; border:0; border-radius:50%; width:34px; height:34px; font-size:18px; cursor:pointer; }
dl { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:0; } dt { color:var(--muted); }
dd { margin:0; } ul { margin:0; padding-left:18px; }
.chip { display:inline-block; margin:0 6px 6px 0; padding:2px 10px; border-radius:999px; background:#272b38; font-size:13px; }
.chest { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:6px; background:var(--muted); }
.chest.red { background:#d95b5b; } .chest.gray { background:#8d93a5; } .chest.blue { background:#5b8fd9; } .chest.gold, .chest.yellow { background:#d9a441; }
a { color:var(--accent); }

.check { display:inline-flex; gap:6px; align-items:center; font-size:13px; color:var(--muted); cursor:pointer; }

.loot-search { width:100%; margin:12px 0; }
.loot { flex-wrap:wrap; display:flex; align-items:center; gap:6px; border-bottom:1px solid var(--line); }
.loot.got { opacity:.45; }
.loot-name { flex:1; display:flex; justify-content:space-between; gap:12px; background:none; color:inherit; border:0; padding:7px 2px; font:inherit; text-align:left; cursor:pointer; }
.loot-name:hover { color:var(--accent); } .loot small { color:var(--muted); text-align:right; }
.star { background:none; border:0; color:var(--muted); font-size:18px; cursor:pointer; padding:0 4px; }
.star.on, .star:hover { color:var(--accent); }
.chests { list-style:none; padding:0; }
.chests li { flex-wrap:wrap; display:flex; align-items:center; gap:8px; padding:3px 0; }
.chests li span:last-of-type { flex:1; }
.chests li.got span:last-of-type { text-decoration:line-through; color:var(--muted); }
.chests input { accent-color:var(--accent); }
.tag.match { color:var(--accent); }
.chest-hit { color:var(--accent); font-weight:600; }

.region-head { margin:14px 0 0; font-size:15px; color:var(--accent); } .region-head small { color:var(--muted); font-weight:400; margin-left:8px; }
.links { list-style:none; padding:0; } .links li { display:flex; justify-content:space-between; padding:2px 0; }
.links small { color:var(--muted); } a.got { color:var(--muted); }

.info { background:none; border:0; color:var(--muted); font-size:15px; cursor:pointer; padding:0 4px; }
.info:hover, .info[aria-expanded="true"] { color:var(--accent); }
.info-panel { flex-basis:100%; background:rgba(255,255,255,.05); border-radius:6px; padding:8px 10px; margin:2px 0 6px 26px; font-size:13px; text-decoration:none; }
.info-panel p { margin:4px 0; }
.info-type { color:var(--accent); font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
.stats { display:flex; flex-wrap:wrap; gap:4px 12px; margin:4px 0; }
.stat b { color:var(--muted); font-weight:500; }
.effect { font-style:italic; }
.info-price { color:var(--muted); font-size:12px; }

.top { display:flex; align-items:center; gap:12px 20px; flex-wrap:wrap; margin-bottom:10px; }
.row1 { display:flex; gap:10px; margin-bottom:8px; }
.row1 input { flex:1 1 220px; max-width:520px; }
.controls { display:flex; gap:8px; flex-wrap:wrap; }
.controls select { flex:0 1 auto; }
.subbar { display:flex; align-items:center; gap:6px 18px; flex-wrap:wrap; margin-top:8px; }
.row { grid-template-columns:56px 1fr auto; }
.name, .meta { overflow:hidden; text-overflow:ellipsis; }
.close { position:sticky; display:block; top:10px; margin:0 10px -34px auto; z-index:2; }
#flyout { scrollbar-width:thin; }
#flyout > .close { position:sticky; }
.fbody h2 { font-size:22px; line-height:1.2; padding-right:40px; }
.fbody h3 { border-top:1px solid var(--line); padding-top:14px; }
@media (max-width:700px) {
  header { padding:10px 12px 8px; }
  h1 { font-size:17px; }
  .row1 input { max-width:none; }
  .controls > * { flex:1 1 45%; }
  main { grid-template-columns:1fr; padding:12px; }
  .row { grid-template-columns:44px 1fr; }
  .tags { grid-column:2; justify-content:flex-start; }
  #count { margin-left:0; flex-basis:100%; }
  #flyout { width:100vw; }
}

[hidden] { display:none !important; }
.tabs { display:flex; gap:4px; }
.tabs button { background:none; color:var(--muted); border:0; border-bottom:2px solid transparent; padding:6px 12px; font:inherit; font-weight:600; cursor:pointer; }
.tabs button:hover { color:var(--text); }
.tabs button.active { color:var(--accent); border-bottom-color:var(--accent); }
.top { margin-bottom:8px; }
.lv b.action { font-size:12px; text-transform:uppercase; letter-spacing:.04em; line-height:1.2; }
.step { margin:0 0 12px; padding-left:12px; border-left:2px solid var(--line); }
.step .tag { display:inline-block; margin-bottom:6px; }
.row.story-row { grid-template-columns:96px 1fr auto; }
.lv b.action { font-size:11px; overflow-wrap:anywhere; }
@media (max-width:700px) { .row.story-row { grid-template-columns:72px 1fr; } }
#storyList { grid-template-columns:repeat(auto-fill,minmax(640px,1fr)); }
.story-row .tags { max-width:300px; }
@media (max-width:700px) { #storyList { grid-template-columns:1fr; } }