:root{--bg:#0e0b0c;--panel:#17121a;--panel2:#1f1824;--line:#3a2f2a;--text:#e9e0d2;--muted:#a3968a;--gold:#d8b46a;--gold2:#8a6d36}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
a{color:var(--gold)}
header.top{display:flex;gap:14px;align-items:baseline;padding:8px 16px;border-bottom:1px solid var(--line);background:var(--panel)}
header.top .brand{font-weight:700;color:var(--text);text-decoration:none}
header.top .game{font-family:Cinzel,Georgia,serif;color:var(--gold);font-size:15px;letter-spacing:.04em}
#tabs{display:flex;gap:4px;overflow-x:auto;padding:6px 10px 0;background:var(--panel);border-bottom:1px solid var(--gold2);scrollbar-width:thin}
#tabs button{flex:none;font:600 13px Cinzel,Georgia,serif;letter-spacing:.05em;color:var(--muted);background:#120e14;border:1px solid var(--line);border-bottom:none;border-radius:6px 6px 0 0;padding:6px 12px;cursor:pointer}
#tabs button[aria-selected=true]{color:var(--gold);background:#251c2b;border-color:var(--gold2)}
#tabs button .ct{font:11px system-ui;color:var(--muted);margin-left:6px}
#wrap{flex:1;display:flex;min-height:0}
#view{position:relative;flex:1;overflow:hidden;cursor:grab;touch-action:none;background:radial-gradient(ellipse at center,#1a1418 0%,#0e0b0c 70%);outline:none}
#view.drag{cursor:grabbing}
#world{position:absolute;left:0;top:0;transform-origin:0 0}
#mapimg{display:block;image-rendering:auto;user-select:none;-webkit-user-drag:none}
#hl{position:absolute;border:2px solid #fff3c4;box-shadow:0 0 0 2px rgba(0,0,0,.6),0 0 18px rgba(255,220,140,.45);border-radius:2px;pointer-events:none;display:none}
#pins{position:absolute;inset:0;pointer-events:none}
.pin{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;pointer-events:auto;cursor:pointer;filter:drop-shadow(0 1px 2px #000)}
.pin svg{width:100%;height:100%;display:block}
.pin.got{opacity:.3;filter:grayscale(1)}
.pin.small{width:15px;height:15px;margin:-15px 0 0 -7.5px}
.pin .n{position:absolute;right:-6px;bottom:-5px;font:700 10px system-ui;background:#000;color:#fff;border-radius:7px;padding:0 4px;line-height:14px}
#zoom{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;gap:4px}
#zoom button{width:34px;height:34px;border-radius:6px;border:1px solid var(--gold2);background:rgba(23,18,26,.92);color:var(--gold);font-size:19px;cursor:pointer}
#banner{position:absolute;left:14px;top:12px;font:700 22px Cinzel,Georgia,serif;letter-spacing:.06em;color:var(--gold);text-shadow:0 2px 6px #000;pointer-events:none}
#side{width:330px;flex:none;overflow-y:auto;background:var(--panel);border-left:1px solid var(--line);padding:4px 14px 20px}
#side h2{font:700 14px Cinzel,Georgia,serif;letter-spacing:.06em;color:var(--gold);margin:14px 0 8px}
#side h3{font-size:16px;margin:12px 0 2px}
.lay{display:flex;align-items:center;gap:8px;padding:3px 0;cursor:pointer;user-select:none}
.lay input{accent-color:var(--gold)}
.lay svg{width:18px;height:18px;flex:none}
.lay .c{margin-left:auto;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.lay.unsure .t::after{content:" ?";color:var(--muted)}
.muted{color:var(--muted)}.small{font-size:12.5px}
.tag{display:inline-block;font-size:11.5px;padding:0 6px;border-radius:4px;background:#2a2230;color:var(--muted);margin-left:4px}
.tag.ok{background:rgba(110,200,130,.15);color:#7fd796}.tag.maybe{background:rgba(255,204,77,.12);color:#ffcc66}
ul.got{list-style:none;padding:0;margin:6px 0}
ul.got li{display:flex;gap:8px;align-items:flex-start;padding:5px 0;border-bottom:1px solid #2a2128}
ul.got li svg{width:18px;height:18px;flex:none;margin-top:2px}
ul.got label{display:flex;gap:8px;align-items:flex-start;cursor:pointer;flex:1}
ul.got .note{display:block;color:var(--muted);font-size:12.5px}
code{font-size:12.5px;color:#cbbfae;word-break:break-all}
@media (max-width:760px){
  #wrap{flex-direction:column}
  #side{width:auto;height:42%;border-left:none;border-top:1px solid var(--line)}
  #banner{font-size:17px}
}
