body:has(#portal-explorer[open]) { overflow:hidden }
#open-portals { width:100%; margin:0 0 8px; justify-content:center }
#portal-explorer {
  color:var(--text); background:var(--bg); border:1px solid var(--line-hover);
  border-radius:12px; padding:0; width:min(1440px,96vw); max-width:none;
  max-height:94dvh; overflow:auto; box-shadow:var(--shadow)
}
#portal-explorer::backdrop { background:rgb(0 0 0 / .75) }
.room-header,.room-toolbar { display:flex; align-items:center; gap:20px; padding:22px 28px; border-bottom:1px solid var(--line) }
.room-header { justify-content:space-between }
.room-header h2 { font:28px Georgia,serif; margin:0 }
#close-portals { font-size:30px; color:var(--muted); padding:6px 12px }
.room-toolbar { flex-wrap:wrap; padding-block:14px; gap:14px }
.room-toolbar label { display:flex; align-items:center; gap:9px; font-size:12px; color:var(--muted) }
.room-toolbar select { padding:8px; border:1px solid var(--line); border-radius:5px; background:var(--panel); color:var(--text); max-width:100% }
.portal-trail { margin:0; padding:16px 28px; font-size:12px; color:var(--accent); border-bottom:1px solid var(--line); overflow-wrap:anywhere }
.room-columns { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) }
.room-source,.room-destination { padding:24px 28px; min-width:0 }
.room-destination { border-left:1px solid var(--line); background:var(--inset); position:sticky; top:0; align-self:start }
.room-columns h3 { font:25px Georgia,serif; margin:4px 0 8px }
.room-columns h4 { font-size:13px; margin-top:24px }
.room-muted { color:var(--muted); font-size:12px; line-height:1.7 }
.room-layout { overflow:auto; min-height:160px; max-height:390px; border:1px solid var(--line); background:var(--raised); border-radius:8px; padding:24px; margin:18px 0 }
.room-surface { position:relative; margin:18px auto; min-width:0 }
.room-surface>svg { display:block; width:100%; height:100%; overflow:visible }
.room-surface .floor-portal { display:none }
.portal-pin { position:absolute; transform:translate(-50%,-50%); width:26px; height:26px; display:grid; place-items:center; border:2px solid var(--accent); background:var(--bg); color:var(--text); border-radius:50%; font:600 11px system-ui; z-index:1 }
.portal-pin[aria-pressed="true"] { background:var(--accent); color:var(--bg); box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 25%,transparent); z-index:3 }
.portal-pin.is-trap { border-color:var(--mob); border-style:dashed }
.portal-pin.is-landing { opacity:.65; border-style:dotted }
.portal-pin.arrival { border-color:var(--npc); box-shadow:0 0 0 5px color-mix(in srgb,var(--npc) 30%,transparent) }
.portal-pin:focus-visible,.portal-row:focus-visible { outline:3px solid var(--heading); outline-offset:4px; z-index:4 }
.portal-key { display:flex; gap:12px; flex-wrap:wrap; font-size:11px; color:var(--muted); margin:16px 0 }
.landing-toggle { display:flex; gap:9px; align-items:center; font-size:12px; cursor:pointer }
.landing-toggle input { accent-color:var(--accent) }
.room-portal-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px }
.portal-row { display:grid; grid-template-columns:1fr auto; gap:7px; padding:13px; background:var(--panel); border:1px solid var(--line); border-radius:6px; text-align:left; color:var(--text) }
.portal-row strong { font-size:12px }
.portal-row-kind { font-size:10px; color:var(--accent) }
.portal-row small { grid-column:1/-1; font-size:11px; line-height:1.5; color:var(--muted); overflow-wrap:anywhere }
.portal-row[aria-pressed="true"] { border-color:var(--accent); background:var(--selected) }
.portal-facts { display:grid; grid-template-columns:auto 1fr; gap:10px 18px; font-size:12px; line-height:1.6 }
.portal-facts dt { color:var(--muted) }
.portal-facts dd { margin:0; overflow-wrap:anywhere }
#follow-portal { width:100%; justify-content:center; margin:12px 0 }
#room-special-routes { border-top:1px solid var(--line); margin-top:18px }
@media(max-width:900px) {
  .room-columns { grid-template-columns:1fr }
  .room-destination { border-left:0; border-top:1px solid var(--line); position:static }
  .room-header,.room-source,.room-destination,.room-toolbar,.portal-trail { padding:18px }
}
@media(max-width:540px) {
  #portal-explorer { width:100vw; max-height:100dvh; height:100dvh; border-radius:0 }
  .room-header h2 { font-size:23px }
  .room-toolbar label { width:100%; flex-wrap:wrap }
  .room-toolbar select { min-width:0; flex:1 }
  .room-portal-list { grid-template-columns:1fr }
  .room-layout { padding:20px; max-height:300px }
}