/* Living map: a thin layer over the supplied map image. The image itself is never altered. */
.mapx{position:relative;margin-top:18px;border:1px solid var(--line);background:#f7f3eb;overflow:hidden;user-select:none;-webkit-user-select:none}
.mapx-view{position:relative;overflow:hidden;touch-action:pan-y;cursor:default}
.mapx.zoomed .mapx-view{touch-action:none;cursor:grab}
.mapx.dragging .mapx-view{cursor:grabbing}
.mapx-stage{position:relative;transform-origin:0 0;will-change:transform;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.mapx.dragging .mapx-stage,.mapx.pinching .mapx-stage{transition:none}
.mapx-stage img{display:block;width:100%;height:auto;pointer-events:none}

/* rooms */
.hot{position:absolute;border:0;padding:0;margin:0;background:transparent;cursor:pointer;border-radius:6px;-webkit-tap-highlight-color:transparent}
.hot::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px rgba(166,79,53,0);transition:box-shadow .35s ease,background-color .35s ease}
.hot:hover::after,.hot:focus-visible::after{box-shadow:inset 0 0 0 2px rgba(166,79,53,.55);background:rgba(166,79,53,.06)}
.hot.sel::after{box-shadow:inset 0 0 0 2px var(--rust),0 0 0 4px rgba(166,79,53,.18);background:rgba(166,79,53,.1)}
.hot.ping::before{content:"";position:absolute;inset:-6px;border-radius:10px;border:2px solid var(--rust);animation:ping 1.1s ease-out 3}
@keyframes ping{from{opacity:.9;transform:scale(.96)}to{opacity:0;transform:scale(1.12)}}
.hot:focus-visible{outline:none}

/* happening now */
.now-dot{position:absolute;right:6%;top:6%;width:10px;height:10px;border-radius:50%;background:#2f7d5b;box-shadow:0 0 0 0 rgba(47,125,91,.5);animation:live 1.8s ease-out infinite;pointer-events:none}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(47,125,91,.55)}100%{box-shadow:0 0 0 12px rgba(47,125,91,0)}}

/* tools */
.mapx-tools{position:absolute;left:10px;bottom:10px;z-index:3;display:flex;gap:6px;flex-wrap:wrap}
.mapx-tools button{font:inherit;font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink);background:rgba(248,244,237,.94);border:1px solid var(--line);padding:9px 11px;cursor:pointer;box-shadow:0 4px 14px rgba(37,37,34,.08)}
.mapx-tools button.on{background:var(--teal);border-color:var(--teal);color:#fff}
.mapx-zoom{position:absolute;right:10px;bottom:10px;z-index:3;display:flex;flex-direction:column;gap:6px}
.mapx-zoom button{width:38px;height:38px;font:inherit;font-size:18px;line-height:1;background:rgba(248,244,237,.94);border:1px solid var(--line);cursor:pointer;color:var(--ink)}
.mapx-close{display:none}

/* room card */
.mapx-card{position:absolute;left:10px;right:10px;top:10px;z-index:4;background:var(--paper);border:1px solid var(--line);box-shadow:0 18px 40px -18px rgba(37,37,34,.35);padding:14px 40px 14px 16px;display:flex;gap:12px;align-items:flex-start;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .3s ease,transform .35s cubic-bezier(.2,.7,.2,1)}
.mapx-card.show{opacity:1;transform:none;pointer-events:auto}
.mapx-card .number{flex-shrink:0}
.mapx-card .room{display:block}
.mapx-card strong{display:block;font:normal 20px/1.1 'DM Serif Display',Georgia,serif;margin:3px 0 4px}
.mapx-card .meta{font-size:12px;color:var(--muted);line-height:1.5}
.mapx-card .live{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;font-weight:700;letter-spacing:.04em;color:#2f7d5b}
.mapx-card .live i{width:7px;height:7px;border-radius:50%;background:#2f7d5b}
.mapx-card a.more{display:inline-block;margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rust);text-decoration:none}
.mapx-card .x{position:absolute;right:6px;top:6px;width:30px;height:30px;border:0;background:none;font-size:18px;color:var(--muted);cursor:pointer}

.map-hint{font-size:11px;color:var(--muted);line-height:1.6;margin:12px 0 0}
.onmap{display:inline-flex;align-items:center;gap:6px;margin:0 0 4px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);text-decoration:none;border-bottom:1px solid rgba(32,62,63,.35);padding-bottom:2px}
.exp-live{display:inline-flex;align-items:center;gap:6px;margin-left:10px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#2f7d5b}
.exp-live i{width:7px;height:7px;border-radius:50%;background:#2f7d5b;animation:live 1.8s ease-out infinite}

/* full screen */
.mapx.full{position:fixed;inset:0;z-index:9999;margin:0;border:0;background:#1d1f1c;display:flex;align-items:center}
.mapx.full .mapx-view{width:100%;max-height:100%}
.mapx.full .mapx-close{display:block;position:absolute;right:10px;top:10px;z-index:5;font:inherit;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--paper);border:1px solid var(--line);padding:10px 14px;cursor:pointer;color:var(--ink)}
.mapx.full .mapx-card{top:56px}
html.map-open{overflow:hidden}

@media (min-width:900px){
  .mapx-tools button{font-size:11px;padding:10px 14px}
  .mapx-card{left:auto;right:16px;top:16px;width:360px}
}
@media (prefers-reduced-motion:reduce){.mapx-stage{transition:none}.now-dot,.exp-live i{animation:none}.hot.ping::before{animation:none}}

/* phones: the map stays fully visible; buttons and the room card sit underneath it */
@media (max-width:899px){
  .mapx{overflow:visible;border:0;background:none}
  .mapx-view{border:1px solid var(--line);background:#f7f3eb}
  .mapx-tools{position:static;margin-top:10px}
  .mapx-tools button{flex:1;box-shadow:none}
  .mapx-zoom{bottom:auto;top:8px;right:8px}
  .mapx-zoom button{width:34px;height:34px}
  .mapx-card{position:relative;left:auto;right:auto;top:auto;margin-top:10px;display:none;opacity:1;transform:none;box-shadow:none}
  .mapx-card.show{display:flex;animation:cardin .35s cubic-bezier(.2,.7,.2,1)}
  @keyframes cardin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  .mapx.full{flex-direction:column;justify-content:center;padding:56px 8px 12px;overflow:auto}
  .mapx.full .mapx-tools button{background:var(--paper)}
  .mapx.full .mapx-card{top:auto}
}

/* live dots keep their size when the map is zoomed */
.now-dot{width:8px;height:8px;right:8%;top:8%;transform:scale(var(--inv,1));transform-origin:top right;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.mapx-card a.more{display:block;width:max-content}.mapx-card .live{display:flex}

/* rooms as traced shapes (SVG) */
.mapx-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mapx-svg .hot{fill:rgba(166,79,53,0);stroke:rgba(166,79,53,0);stroke-width:3;stroke-linejoin:round;cursor:pointer;vector-effect:non-scaling-stroke;transition:fill .35s ease,stroke .35s ease;outline:none;pointer-events:all}
.mapx-svg .hot:hover,.mapx-svg .hot:focus-visible{fill:rgba(166,79,53,.08);stroke:rgba(166,79,53,.55)}
.mapx-svg .hot.sel{fill:rgba(166,79,53,.14);stroke:var(--rust);stroke-width:3.5}
.mapx-svg .hot.ping{animation:roomping 1.1s ease-out 3}
@keyframes roomping{0%{stroke:var(--rust);stroke-width:7;fill:rgba(166,79,53,.22)}100%{stroke:rgba(166,79,53,.4);stroke-width:3;fill:rgba(166,79,53,.1)}}
.mapx-dots{position:absolute;inset:0;pointer-events:none}
.mapx-dots .now-dot{position:absolute;right:auto;margin:-4px 0 0 -4px}

/* every screen size: the map stays clear; buttons and the room card sit underneath it */
.mapx{overflow:visible;border:0;background:none}
.mapx-view{border:1px solid var(--line);background:#f7f3eb}
.mapx-tools{position:static;margin-top:10px}
.mapx-zoom{bottom:auto;top:10px;right:10px}
.mapx-card{position:relative;left:auto;right:auto;top:auto;width:auto;margin-top:10px;display:none;opacity:1;transform:none;box-shadow:none;pointer-events:auto}
.mapx-card.show{display:flex;animation:cardin .35s cubic-bezier(.2,.7,.2,1)}
@keyframes cardin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (min-width:900px){
  .mapx-tools button{flex:0 0 auto}
  .mapx-card{max-width:760px}
}
.mapx.full{flex-direction:column;justify-content:center;padding:56px 12px 12px;overflow:auto}
.mapx.full .mapx-view{max-height:calc(100svh - 220px);overflow:hidden}
.mapx.full .mapx-tools button{background:var(--paper)}
.mapx.full .mapx-card{top:auto;width:100%;max-width:760px;align-self:center}

/* side panel: the room card and a room list, always beside the map on larger screens */
.mapx-side{margin-top:10px}
.mapx-prompt{display:none;font-size:12px;color:var(--muted);margin:0 0 10px}
.mapx-legend{display:none;list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.mapx-legend button{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line);cursor:pointer}
.mapx-legend button:hover .t,.mapx-legend button.sel .t{color:var(--rust)}
.mapx-legend .n{font:normal 14px/1 'DM Serif Display',Georgia,serif;color:var(--rust);width:26px;height:26px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;flex-shrink:0}
.mapx-legend .t{font:normal 16px/1.15 'DM Serif Display',Georgia,serif;flex:1;transition:color .25s}
.mapx-legend small{display:block;font:700 9px/1.4 'DM Sans',Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.mapx-legend .ld{width:7px;height:7px;border-radius:50%;background:transparent;flex-shrink:0}
.mapx-legend .ld.on{background:#2f7d5b;animation:live 1.8s ease-out infinite}
.mapx-legend button:focus-visible{outline:2px solid var(--rust);outline-offset:2px}
@media (min-width:900px){
  .mapx{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:28px;align-items:start}
  .mapx-view{grid-column:1;grid-row:1}
  .mapx-tools{grid-column:1;grid-row:2}
  .mapx-zoom{grid-column:1;grid-row:1}
  .mapx-side{grid-column:2;grid-row:1 / span 2;margin-top:0;position:sticky;top:76px}
  .mapx-card{margin:0 0 14px;max-width:none;padding:16px 36px 16px 14px}
  .mapx-card strong{font-size:21px}
  .mapx-prompt{display:block}
  .mapx.has-card .mapx-prompt{display:none}
  .mapx-legend{display:block}
  .mapx-zoom{position:absolute;justify-self:end;align-self:start;margin:10px}
  .mapx.full{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-content:center;padding:56px 20px 20px}
  .mapx.full .mapx-side{position:static;background:var(--paper);padding:16px;align-self:start}
}

/* layout v3: map + buttons in one column, the side panel beside it */
.mapx-view{position:relative}
.mapx-zoom{position:absolute;top:10px;right:10px;bottom:auto;margin:0}
@media (min-width:900px){
  .mapx{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:28px;align-items:start}
  .mapx-main{grid-column:1;grid-row:1}
  .mapx-side{grid-column:2;grid-row:1}
  .mapx-view,.mapx-tools,.mapx-zoom{grid-column:auto;grid-row:auto}
  .mapx-zoom{position:absolute;justify-self:auto;align-self:auto}
}
.mapx-card button.more{all:unset;display:block;margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rust);cursor:pointer}
.mapx-card button.more:focus-visible{outline:2px solid var(--rust);outline-offset:2px}
.mapx-card .more-body{margin-top:10px;border-top:1px solid var(--line);padding-top:10px;animation:cardin .35s ease}
.mapx-card .more-body p{margin:0 0 8px;font-size:13px;line-height:1.65;color:var(--ink)}
.mapx-card .more-body .who{font-size:12px;color:var(--muted)}
/* phones: quieter live dots on the small whole-map view */
@media (max-width:899px){.mapx-dots .now-dot{width:6px;height:6px;margin:-3px 0 0 -3px;animation-name:live-sm}}
@keyframes live-sm{0%{box-shadow:0 0 0 0 rgba(47,125,91,.5)}100%{box-shadow:0 0 0 6px rgba(47,125,91,0)}}