/* ===== Stonetop living map — parchment & ink ===== */
:root{
  color-scheme: light;
  --paper:#efe4c8; --paper2:#f6eed6; --ink:#3f3a30; --ink2:#6f695c; --line:#b8ac8c;
  --gold:#b8863b; --household:#5c7a4f; --village:#a9772e; --ally:#3f7b78; --outsider:#5f6b7a;
  --threat:#9c3b2e; --deceased:#8a8478; --player:#7a5cae;
  --shadow: 0 6px 24px rgba(60,48,28,.22);
  --serif: Georgia, 'Times New Roman', serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:var(--serif);color:var(--ink);background:var(--paper)}
#app{position:fixed;inset:0;display:flex;flex-direction:column;overflow:hidden}

/* topbar */
#topbar{display:flex;align-items:center;gap:14px;padding:10px 16px;background:linear-gradient(#f6eed6,#ece0c0);
  border-bottom:1px solid var(--line);box-shadow:0 2px 8px rgba(60,48,28,.12);z-index:40;flex-wrap:wrap}
#brand{font-size:22px;font-weight:700;letter-spacing:.5px;display:flex;align-items:center;gap:10px;white-space:nowrap}
#brand small{font-weight:400;font-style:italic;color:var(--ink2);font-size:13px}
.spacer{flex:1}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#f6eed6}
.seg button{border:0;background:transparent;padding:7px 12px;font-family:var(--serif);font-size:13px;color:var(--ink2);cursor:pointer}
.seg button.active{background:var(--gold);color:#fff}
.btn{border:1px solid var(--line);background:#f6eed6;border-radius:8px;padding:7px 12px;font-family:var(--serif);
  font-size:13px;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.btn:hover{background:#efe2c1}
.btn.on{background:var(--gold);color:#fff;border-color:var(--gold)}

/* search */
#searchwrap{position:relative}
#search{width:230px;max-width:44vw;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:#fbf6e7;
  font-family:var(--serif);font-size:14px;color:var(--ink)}
#search:focus{outline:2px solid var(--gold);outline-offset:0}
#results{position:absolute;top:110%;left:0;right:0;background:#fbf6e7;border:1px solid var(--line);border-radius:8px;
  box-shadow:var(--shadow);max-height:60vh;overflow:auto;display:none;z-index:50;min-width:260px}
#results.show{display:block}
.res{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;border-bottom:1px solid #e6d9b8}
.res:last-child{border-bottom:0}
.res:hover,.res.sel{background:#efe2c1}
.res .dot{width:22px;height:22px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;color:#fff;font-size:10px;font-weight:700}
.res .meta{font-size:12px;color:var(--ink2)}
.res b{font-weight:600}
.res .kind{margin-left:auto;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2);opacity:.8}

/* map area */
#stage{position:relative;flex:1;overflow:hidden;background:
  radial-gradient(120% 120% at 50% 30%, #f3ebd4, #e4d6b3);cursor:grab}
#stage.grabbing{cursor:grabbing}
#world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
#basemap{display:block;user-select:none;-webkit-user-drag:none;pointer-events:none;filter:saturate(1.02)}
#overlay{position:absolute;left:0;top:0;width:100%;height:100%}

/* hotspots + tokens live in overlay, positioned by % of world */
.marker{position:absolute;transform:translate(-50%,-50%) scale(var(--inv,1));transform-origin:center;
  will-change:transform}
.hotspot{width:30px;height:30px;border-radius:50%;border:1.5px dashed rgba(120,100,60,.55);
  background:rgba(180,140,60,.10);cursor:pointer;display:grid;place-items:center;transition:background .15s,border-color .15s}
.hotspot:hover,.hotspot.active{background:rgba(184,134,59,.30);border-color:var(--gold)}
.hotspot .pip{width:7px;height:7px;border-radius:50%;background:var(--gold);opacity:.8}
.hotspot .tag{position:absolute;top:-6px;left:50%;transform:translate(-50%,-100%);white-space:nowrap;
  background:#3f3a30;color:#f6eed6;font-size:11px;padding:2px 7px;border-radius:5px;opacity:0;pointer-events:none;transition:opacity .12s}
.hotspot:hover .tag,.hotspot.active .tag{opacity:1}
.hotspot.building{border-style:solid}
.hotspot.hasint::after{content:"";position:absolute;right:-3px;bottom:-3px;width:9px;height:9px;border-radius:50%;
  background:var(--gold);border:1.5px solid var(--paper2)}

.token{cursor:pointer}
.token .disk{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;
  font-size:12px;box-shadow:0 2px 5px rgba(50,40,20,.45);border:2px solid rgba(255,255,255,.7);position:relative}
.token .tag{position:absolute;top:-6px;left:50%;transform:translate(-50%,-100%);white-space:nowrap;
  background:#3f3a30;color:#f6eed6;font-size:11px;padding:2px 7px;border-radius:5px;opacity:0;pointer-events:none;transition:opacity .12s}
.token:hover .tag{opacity:1}
.token.gm .disk{cursor:grab}
.token.dragging{z-index:60}
.token.dragging .disk{cursor:grabbing;transform:scale(1.12)}
.token .ring{position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--gold);opacity:0;transition:opacity .2s}
.token.flash .ring{opacity:1;animation:pulse 1.4s ease-out 2}
@keyframes pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.5);opacity:0}}

/* faction colors */
.f-player{background:var(--player)} .f-household{background:var(--household)} .f-village{background:var(--village)}
.f-ally{background:var(--ally)} .f-outsider{background:var(--outsider)} .f-threat{background:var(--threat)}
.f-deceased{background:var(--deceased)}
.dot.f-player{background:var(--player)} .dot.f-household{background:var(--household)} .dot.f-village{background:var(--village)}
.dot.f-ally{background:var(--ally)} .dot.f-outsider{background:var(--outsider)} .dot.f-threat{background:var(--threat)}
.dot.f-deceased{background:var(--deceased)} .dot.f-loc{background:var(--gold)} .dot.f-item{background:#7c6a48}

/* info panel */
#panel{position:absolute;top:0;right:0;height:100%;width:360px;max-width:92vw;background:#f7efd8;
  border-left:1px solid var(--line);box-shadow:-8px 0 24px rgba(60,48,28,.15);transform:translateX(102%);
  transition:transform .25s ease;z-index:45;display:flex;flex-direction:column}
#panel.open{transform:none}
#panel header{padding:16px 18px;border-bottom:1px solid #e2d5b4;display:flex;align-items:flex-start;gap:12px}
#panel .ph-disk{width:40px;height:40px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;color:#fff;font-weight:700}
#panel h2{margin:0;font-size:20px}
#panel .role{font-size:13px;color:var(--ink2);font-style:italic}
#panel .body{padding:16px 18px;overflow:auto;font-size:14px;line-height:1.55}
#panel .body h4{margin:16px 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink2)}
#panel .chip{display:inline-block;background:#ece0be;border:1px solid var(--line);border-radius:20px;padding:3px 10px;
  font-size:12px;margin:3px 4px 0 0;cursor:pointer}
#panel .chip:hover{background:var(--gold);color:#fff}
#panel .close{margin-left:auto;border:0;background:transparent;font-size:22px;cursor:pointer;color:var(--ink2);line-height:1}
#panel .enterbtn{display:block;width:100%;margin-top:14px;padding:10px;border:1px solid var(--gold);background:var(--gold);
  color:#fff;border-radius:8px;font-family:var(--serif);font-size:14px;cursor:pointer}
#panel .statebox{background:#efe2c1;border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-size:13px;font-style:italic}

/* interior modal */
#interior{position:absolute;inset:0;background:rgba(40,32,18,.55);display:none;z-index:55;align-items:center;justify-content:center;padding:24px}
#interior.open{display:flex}
#intCard{background:var(--paper2);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  width:min(1000px,94vw);height:min(760px,90vh);display:flex;flex-direction:column;overflow:hidden}
#intHead{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #e2d5b4}
#intHead h3{margin:0;font-size:18px}
#intHead .crumb{font-size:12px;color:var(--ink2)}
#intBody{position:relative;flex:1;overflow:hidden;background:#efe6cd}
#intWorld{position:absolute;left:0;top:0;transform-origin:0 0}
#intWorld svg,#intWorld img{display:block}
#intOverlay{position:absolute;left:0;top:0;width:100%;height:100%}
.int-actions{padding:10px 16px;border-top:1px solid #e2d5b4;display:flex;gap:10px;align-items:center}
.int-actions .hint{font-size:12px;color:var(--ink2);margin-left:auto}

/* GM bar */
#gmbar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:none;gap:8px;align-items:center;
  background:#3f3a30;color:#f6eed6;padding:8px 12px;border-radius:10px;box-shadow:var(--shadow);z-index:44;flex-wrap:wrap;max-width:94vw}
#gmbar.show{display:flex}
#gmbar select,#gmbar input{font-family:var(--serif);font-size:13px;padding:5px 8px;border-radius:6px;border:1px solid #6f695c;background:#f6eed6;color:var(--ink)}
#gmbar .gmlabel{font-size:12px;opacity:.85}
#gmbar button{border:0;background:var(--gold);color:#fff;border-radius:6px;padding:6px 10px;cursor:pointer;font-family:var(--serif);font-size:13px}

/* zoom controls + legend */
#zoomctl{position:absolute;left:14px;bottom:14px;display:flex;flex-direction:column;gap:6px;z-index:42}
#zoomctl button{width:36px;height:36px;border-radius:8px;border:1px solid var(--line);background:#f6eed6;font-size:18px;cursor:pointer;color:var(--ink)}
#legend{position:absolute;right:14px;bottom:14px;background:rgba(247,239,216,.92);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;font-size:12px;z-index:42;box-shadow:var(--shadow);max-width:210px}
#legend.hidden{display:none}
#legend .row{display:flex;align-items:center;gap:7px;margin:3px 0}
#legend .sw{width:13px;height:13px;border-radius:50%}
#toast{position:absolute;left:50%;top:16px;transform:translateX(-50%);background:#3f3a30;color:#f6eed6;padding:8px 14px;
  border-radius:8px;font-size:13px;opacity:0;transition:opacity .3s;z-index:70;pointer-events:none}
#toast.show{opacity:1}
#offmap{position:absolute;left:14px;top:14px;background:rgba(247,239,216,.92);border:1px solid var(--line);border-radius:10px;
  padding:8px 10px;font-size:12px;z-index:41;box-shadow:var(--shadow);max-width:220px;display:none}
#offmap.show{display:block}
#offmap b{font-size:12px}
#offmap .oc{display:inline-flex;align-items:center;gap:5px;margin:3px 6px 0 0;cursor:pointer}
#offmap .oc .d{width:14px;height:14px;border-radius:50%}
@media (max-width:640px){ #brand small{display:none} #legend{display:none} }