:root { --ground:#0b1526; --panel:#111f36; --panel2:#0e1a2e; --line:#243752; --line2:#1a2a44; --text:#e6edf6; --muted:#9fb0c6; --soft:#c9d3e0; --amber:#f2b24a; --amber2:#ffd27a; --wood:#a9743f; --bar:#7fa6d9; --bar2:#5d7a9a; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--ground); color:var(--text); font-family:'IBM Plex Sans',system-ui,sans-serif; font-size:16px; line-height:1.5; }
a { color:var(--amber); } a:hover { color:var(--amber2); }
code { font-family:'IBM Plex Mono',monospace; background:var(--line2); padding:2px 6px; border-radius:4px; font-size:14px; }
.wrap { max-width:1180px; margin:0 auto; padding:0 16px; }
header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 16px; padding:18px 0; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); }
.brand img { width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid var(--wood); }
.brand span { font-family:Fraunces,Georgia,serif; font-size:22px; font-weight:700; }
nav { display:flex; flex-wrap:wrap; gap:4px 20px; font-weight:500; }
nav a { color:var(--soft); text-decoration:none; padding-bottom:2px; }
nav a:hover { color:var(--amber2); }
nav a.on { color:var(--amber2); border-bottom:2px solid var(--amber); }
h1 { margin:0; font-family:Fraunces,Georgia,serif; font-size:clamp(28px,4vw,44px); font-weight:700; line-height:1.1; color:#fff; }
h2 { margin:0; font-family:Fraunces,Georgia,serif; font-size:24px; color:#fff; }
h3 { margin:0; font-family:Fraunces,Georgia,serif; font-size:19px; color:#fff; }
.lede { margin:8px 0 0; color:var(--soft); max-width:680px; }
.crumb { font-size:14px; color:var(--muted); text-decoration:none; }
.crumb:hover { color:var(--amber2); }
.hero { position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line); aspect-ratio:2048/868; min-height:240px; background:var(--ground); }
.hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 60%; }
.hero .cap { position:absolute; left:0; right:0; bottom:0; padding:22px 24px; background:linear-gradient(180deg,rgba(11,21,38,0) 0%,rgba(11,21,38,.88) 70%); }
.hero p { margin:8px 0 0; font-size:17px; color:#d7e0ec; max-width:640px; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:28px; }
.grid3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:24px; }
@media (max-width:860px) { .grid3 { grid-template-columns:1fr; } }
@media (max-width:760px) { .grid { grid-template-columns:1fr; } }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.card > img { display:block; width:100%; aspect-ratio:1024/254; object-fit:cover; }
.card .body, .box { padding:18px 22px 22px; }
.box { background:var(--panel2); border:1px solid var(--line); border-radius:12px; }
.card p, .box p { margin:8px 0 0; color:var(--soft); }
.btns { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.btn { display:inline-block; padding:11px 18px; min-height:44px; border-radius:8px; font-weight:600; text-decoration:none; border:1px solid var(--line); color:var(--soft); }
.btn:hover { color:var(--amber2); border-color:var(--amber); }
.btn.primary { background:var(--amber); color:#1b1407; border-color:var(--amber); }
.btn.primary:hover { background:var(--amber2); color:#1b1407; }
.section { margin-top:32px; }
.tablewrap { overflow-x:auto; margin-top:14px; border:1px solid var(--line); border-radius:12px; background:var(--panel2); }
table { border-collapse:collapse; width:100%; font-size:15px; }
th { text-align:left; padding:12px 16px; border-bottom:1px solid var(--line); color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em; font-weight:600; white-space:nowrap; }
td { padding:11px 16px; border-bottom:1px solid var(--line2); vertical-align:top; }
tr:last-child td { border-bottom:0; }
td.n { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.bar { display:flex; align-items:center; gap:10px; min-width:160px; }
.bar i { display:block; flex:1; height:10px; border-radius:5px; background:var(--line2); overflow:hidden; }
.bar i b { display:block; height:100%; background:var(--amber); }
.pill { display:inline-block; padding:3px 10px; border-radius:999px; background:var(--line2); color:var(--soft); font-size:13px; white-space:nowrap; }
.stock { width:62%; }
td.who { white-space:nowrap; }
.stk { display:block; }
.stk b { color:var(--soft); font-weight:600; }
.pill.a { color:#a9cbff; } .pill.h { color:#ffb09a; } .pill.both { color:#a6e3b8; }
.list { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.zonecards { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; margin-top:14px; }
.zonecard { display:block; background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:14px 16px; text-decoration:none; color:var(--text); }
.zonecard:hover { border-color:var(--amber); color:var(--text); }
.zonecard .name { font-family:Fraunces,Georgia,serif; font-size:19px; font-weight:700; color:#fff; }
.zonecard .sub { color:var(--muted); font-size:14px; margin-top:4px; }
.zonecard .top { color:var(--soft); font-size:14px; margin-top:8px; }
.verdict { margin-top:16px; padding-top:12px; border-top:1px solid var(--line2); color:var(--soft); font-size:15px; }
.verdict b { color:var(--amber2); }
.empty { margin-top:24px; background:var(--panel); border:1px dashed var(--line); border-radius:12px; padding:22px 24px; color:var(--soft); }
.empty h2 { font-size:22px; }
.muted { color:var(--muted); font-size:14px; }
.feature { display:grid; grid-template-columns:160px minmax(0,1fr); gap:6px 18px; padding:12px 0; border-bottom:1px solid var(--line2); }
.feature b { color:#fff; }
.feature span { color:var(--soft); }
@media (max-width:560px) { .feature { grid-template-columns:1fr; } }
.fbar { margin-top:18px; display:flex; flex-direction:column; gap:10px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { font:inherit; font-size:14px; font-weight:500; padding:7px 13px; min-height:38px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--soft); cursor:pointer; }
.chip:hover { border-color:var(--amber); color:var(--amber2); }
.chip.on { background:#2a2314; border-color:var(--amber); color:var(--amber2); }
.fsel { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; font-size:14px; color:var(--muted); }
.fsel select, .fsel input { font:inherit; font-size:14px; min-height:38px; padding:0 10px; border-radius:8px; border:1px solid var(--line); background:var(--panel2); color:var(--text); }
.fgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; margin-top:12px; }
.fcard { display:flex; gap:12px; background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:12px; }
.fcard.hide { display:none; }
.ficon img { display:block; width:56px; height:56px; border-radius:8px; border:1px solid var(--wood); background:#000; }
.fbody { min-width:0; }
.fname { font-family:Fraunces,Georgia,serif; font-size:18px; font-weight:700; color:#fff; text-decoration:none; }
.fname:hover { color:var(--amber2); }
.ftop { font-size:14px; color:var(--soft); margin-top:2px; }
.fnote { font-size:13px; color:var(--muted); margin-top:2px; }
.ftags { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
.ftags .pill { font-size:12px; padding:2px 8px; }
.pill.u-alchemy { color:#c9b3ff; } .pill.u-campsite { color:#ffc8a0; }
.pill.k-quest { color:#a9cbff; } .pill.k-derby { color:#ffd27a; } .pill.k-treasure { color:#d9c3ff; } .pill.k-new { color:#a6e3b8; } .pill.k-junk { color:#8f9bad; }
.zgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:12px; margin-top:12px; }
.zcard { background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
.zcard.hide { display:none; }
.zhead { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px; font-size:13px; }
.zname { font-family:Fraunces,Georgia,serif; font-size:20px; font-weight:700; color:#fff; text-decoration:none; }
.zname:hover { color:var(--amber2); }
.zicons { display:flex; gap:6px; min-height:40px; }
.zic img { display:block; width:40px; height:40px; border-radius:6px; border:1px solid var(--wood); background:#000; }
.zbar { display:flex; height:8px; border-radius:4px; overflow:hidden; background:var(--line2); }
.zbar b { display:block; height:100%; } .zbar .s0 { background:var(--amber); } .zbar .s1 { background:var(--bar); } .zbar .s2 { background:var(--bar2); }
.ztop { font-size:13px; color:var(--soft); }
.pill.t-trainer { color:#a6e3b8; } .pill.t-vendor { color:#ffc8a0; }
.zshot { display:block; aspect-ratio:16/9; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:#0a1322; text-decoration:none; }
.zshot img { display:block; width:100%; height:100%; object-fit:cover; }
.zshot-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; background:linear-gradient(160deg,#101d33 0%,#0a1322 60%,#0c1a2c 100%); color:var(--muted); }
.zshot-empty span { font-family:Fraunces,Georgia,serif; font-size:18px; color:#3f5577; }
.zshot-empty small { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#3f5577; }
.zsum { font-size:14px; color:var(--soft); }
.zmeta { font-size:13px; color:var(--amber2); }
.zmeta.big { font-size:16px; margin:4px 0 0; }
.zhero { margin-top:18px; aspect-ratio:21/9; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#0a1322; }
.zhero img { display:block; width:100%; height:100%; object-fit:cover; }
.zhero-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; background:linear-gradient(160deg,#101d33 0%,#0a1322 60%,#0c1a2c 100%); }
.zhero-empty span { font-family:Fraunces,Georgia,serif; font-size:30px; color:#3f5577; }
.zhero-empty small { font-size:13px; color:#3f5577; }
.zmap { position:relative; margin-top:12px; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:#0a1322; max-width:1002px; }
.zmap img { display:block; width:100%; height:auto; }
.pin { position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; border:2px solid #0b1526; box-shadow:0 0 0 2px rgba(255,255,255,.75); }
.pin span { display:none; position:absolute; left:16px; top:-6px; white-space:nowrap; background:#0b1526; color:#fff; font-size:12px; padding:2px 6px; border-radius:4px; border:1px solid var(--line); }
.pin:hover span, .pin:focus span { display:block; }
.r-trainer { background:#6fd18c; } .r-vendor { background:#f2b24a; } .r-quest, .r-event { background:#a9cbff; }
.key { display:inline-block; width:10px; height:10px; border-radius:50%; margin:0 4px 0 10px; vertical-align:-1px; }
.tt { position:fixed; z-index:50; display:none; gap:8px; align-items:flex-start; pointer-events:none; max-width:340px; }
.tt-icon { width:40px; height:40px; border-radius:6px; border:1px solid #6b5a3a; background:#000; flex:none; }
.tt-body { background:rgba(8,14,28,.96); border:1px solid #5c6f8f; border-radius:6px; padding:8px 10px; font-size:13px; line-height:1.4; color:#fff; box-shadow:0 6px 20px rgba(0,0,0,.5); }
.tt-body table { border-collapse:collapse; } .tt-body td { padding:0; border:0; }
.tt-body b { font-size:14px; }
.tt-body .q0 { color:#9d9d9d; } .tt-body .q1 { color:#fff; } .tt-body .q2 { color:#1eff00; } .tt-body .q3 { color:#0070dd; } .tt-body .q4 { color:#a335ee; } .tt-body .q5 { color:#ff8000; }
.tt-body .q, .tt-body .whtt-ilvl { color:#ffd100; } .tt-body .toycolor { color:#68ccef; } .tt-body .q2 span, .tt-body .indent { color:inherit; }
.tt-body .whtt-sellprice, .tt-body .whtt-maxstack { color:#fff; }
.mg, .ms, .mc { padding-right:12px; background-repeat:no-repeat; background-position:right center; background-size:10px; }
.mg::after { content:"g"; color:#ffd100; } .ms::after { content:"s"; color:#c7c7cf; } .mc::after { content:"c"; color:#c8602c; }
footer { margin-top:48px; padding:24px 0 40px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; color:var(--muted); font-size:14px; }
footer .links { display:flex; gap:18px; } footer .links a { color:var(--soft); text-decoration:none; }