/* Last One — the map surface. */

.map {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: min(92vw, 78dvh);
  margin-inline: auto;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #0b0f07;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
  /* The map pans and pinches; the browser must not also scroll the page. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
/* Inside the game the map is the screen, so it drops the frame entirely and
   fills whatever the panel is not using. */
.play-map .map svg { width: 100%; height: 100%; }
.map svg { display: block; width: 100%; height: 100%; }
.map-pan { transform-origin: 50% 50%; transition: transform 0.18s ease-out; }
.map.is-dragging .map-pan { transition: none; }

.map-zoom {
  /* Physical left, deliberately not inset-inline-start: the house accessibility
     widget pins itself to the bottom-RIGHT in both directions, so a logical
     property put these straight underneath it in Hebrew. */
  position: absolute; left: 10px; bottom: 10px;
  display: flex; flex-direction: column; gap: 6px; z-index: 3;
}
.map-zoom .btn { background: rgba(14, 18, 10, 0.82); backdrop-filter: blur(6px); }

/* Markers walk for as long as the server holds the movement beat. The duration
   is set from the state's own pace so a fast table animates fast. */
.lm-tribute { transition: transform var(--walk, 4.2s) cubic-bezier(.34,.62,.28,1); cursor: pointer; }
.lm-landmark, .lm-drop, .lm-grave { cursor: pointer; }
.lm-drop { animation: bob 3.4s ease-in-out infinite; }
.lm-tribute.is-active { filter: drop-shadow(0 0 1.5px rgba(240, 185, 60, 0.9)); }
.lm-tribute.is-dying .lm-death { animation: stamp 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both; transform-origin: center; }
.lm-tribute.is-dying > circle:first-of-type { animation: bleed 0.6s ease both; }

/* Anything not involved in the event being told steps back, so the room's eye
   goes to the two people the story is about. */
.map.is-narrating .lm-tribute:not(.is-active) { opacity: 0.28; }
.map.is-narrating .lm-tribute { transition: transform var(--walk, 4.2s) ease, opacity .4s ease; }

.lm-night { transition: opacity 1.2s ease; }
.lm-hazard { animation: pulse 2.4s ease-in-out infinite; }
.lm-fog { transition: opacity 0.5s ease; }

@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.7px); } }
@keyframes pulse { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
@keyframes stamp { 0% { transform: scale(3.2); opacity: 0; } 55% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes bleed { from { fill: #e0523c; } to { fill: #141a0e; } }

/* The projection banner: a phone showing the host's view must say so, or a
   player will think the fog broke. */
.projection-banner {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(240, 185, 60, 0.14);
  border: 1px solid rgba(240, 185, 60, 0.4);
  color: var(--gold-soft);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: var(--step--1); font-weight: 700;
}

.legend-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.legend-item {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px; text-align: start;
  width: 100%; font: inherit; color: inherit; cursor: pointer;
}
.legend-item:hover { border-color: var(--gold); }
.legend-swatch {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: grid; place-items: center; border: 1px solid rgba(0, 0, 0, 0.35);
}
.legend-name { font-weight: 700; }
.legend-blurb { font-size: var(--step--1); color: var(--ink-soft); }

.danger-meter { display: inline-flex; gap: 3px; align-items: center; }
.danger-pip { width: 7px; height: 7px; border-radius: 2px; background: var(--line-strong); }
.danger-pip.on { background: var(--danger); }