/* treemap.css — the whole story at once (js/treemap.js): every slice of the
   tree a tile on one dark map, the way from the root to the slice on screen
   lit green, the slice itself pulsing amber, a bridge a dashed amber arc.
   Same 8-bit skin as the drift: game.css vars (with fallbacks), square rims
   of box-shadow, stepped moves, pixel fonts kept large. */

#tree-map {
  --tm-ink: var(--px-ink, #04070b);
  --tm-green: var(--px-green, #3cffa0);
  --tm-green-dim: var(--px-green-dim, #62d88f);
  --tm-amber: var(--px-amber, #ffb257);
  --tm-red: var(--px-red, #ff4b3a);
  --tm-title: var(--px-title, 'Press Start 2P', 'Pixelify Sans', 'VT323', monospace);
  --tm-ui: var(--px-ui, 'Pixelify Sans', 'VT323', 'JetBrains Mono', monospace);
  --tm-body: var(--px-body, 'VT323', 'Pixelify Sans', 'JetBrains Mono', monospace);
  --tm-panel: rgba(3, 8, 6, 0.9);
  --tm-dim: #33463e;
  position: fixed;
  inset: 0;
  z-index: 8550;
  display: none;
  background: #020406;
  color: var(--tm-green-dim);
  font-family: var(--tm-ui);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  overscroll-behavior: none;
}
#tree-map.on { display: block; }
#tree-map, #tree-map * { box-sizing: border-box; }
/* nothing behind the map scrolls or pulls to refresh while it is up */
html.tm-lock, html.tm-lock body { overflow: hidden; overscroll-behavior: none; }

/* ---------- the surface: drag, wheel, fingers ---------- */
#tree-map .tm-surface {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  outline: none;
  background: radial-gradient(ellipse at 50% 42%, rgba(24, 70, 48, 0.3), transparent 72%), #020406;
}
#tree-map .tm-surface.grabbing, #tree-map .tm-surface.grabbing .tm-card { cursor: grabbing; }
/* static scanlines over the tiles: the CRT, without the roll */
#tree-map .tm-surface::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0 2px, transparent 2px 4px);
}
#tree-map .tm-world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
/* its own texture only while it pans at one zoom; a zoom repaints at its own
   scale (a texture made at 1 and shrunk to 0.02 is painted fifty times over) */
#tree-map.moving:not(.zooming) .tm-world { will-change: transform; }

/* ---------- the paths between slices: one svg under the tiles ---------- */
#tree-map .tm-edges { position: absolute; overflow: visible; pointer-events: none; shape-rendering: crispEdges; }
#tree-map .tm-edges path { fill: none; stroke-width: calc(2px / var(--tm-s, 1)); stroke-linecap: square; }
#tree-map .tm-edges .tm-e-tree { stroke: #2d5242; }
#tree-map .tm-edges .tm-e-ghost { stroke: #253a31; stroke-dasharray: calc(5px / var(--tm-s, 1)) calc(5px / var(--tm-s, 1)); stroke-linecap: butt; }
#tree-map .tm-edges .tm-e-line { stroke: var(--tm-green); }
#tree-map .tm-edges .tm-e-bridge {
  stroke: var(--tm-amber);
  stroke-dasharray: calc(9px / var(--tm-s, 1)) calc(6px / var(--tm-s, 1));
  stroke-linecap: butt;
  shape-rendering: geometricPrecision;
}
#tree-map .tm-edges .tm-arrow { fill: var(--tm-amber); stroke: none; }

/* ---------- a tile: the reel's last frame, the year, the place ---------- */
#tree-map .tm-card {
  --rim: var(--tm-dim);
  position: absolute;
  width: 112px;
  height: 122px;
  background: #06100b;
  box-shadow: 0 0 0 3px var(--rim), 0 0 0 6px var(--tm-ink);
  cursor: pointer;
}
#tree-map .tm-th {
  position: relative;
  height: 84px;
  overflow: hidden;
  background: #0a1611 repeating-linear-gradient(45deg, rgba(98, 216, 143, 0.08) 0 4px, transparent 4px 8px);
}
#tree-map .st-norec .tm-th { background: #070c0a repeating-linear-gradient(45deg, rgba(98, 216, 143, 0.04) 0 4px, transparent 4px 8px); }
#tree-map .tm-th img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  pointer-events: none;
}
#tree-map .tm-tx { padding: 4px 5px 0; line-height: 1; }
#tree-map .tm-tx b {
  display: block;
  font-family: var(--tm-title);
  font-size: 10px;
  font-weight: 400;
  color: #eafff5;
  text-shadow: 1px 1px 0 #000;
  white-space: nowrap;
  overflow: hidden;
}
#tree-map .tm-tx span {
  display: block;
  margin-top: 3px;
  font-family: var(--tm-body);
  font-size: 19px;
  color: var(--tm-green-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ● on tape / ○ not yet: one pixel square in the frame's corner */
#tree-map .tm-mk {
  position: absolute;
  left: 5px; top: 5px;
  z-index: 1;
  width: 10px; height: 10px;
  background: var(--tm-green);
  box-shadow: 0 0 0 2px var(--tm-ink);
}
#tree-map .st-norec .tm-mk { background: transparent; box-shadow: inset 0 0 0 2px #7d8f88, 0 0 0 2px var(--tm-ink); }

/* pickable: the amber rim of a key; not: a grey rim over a dimmed frame */
#tree-map .tm-card.pick { --rim: var(--tm-amber); }
#tree-map .tm-card.pick:hover { --rim: #ffd39a; background: #1a1206; }
#tree-map .tm-card.nopick .tm-th::after { content: ''; position: absolute; inset: 0; background: rgba(2, 5, 4, 0.6); }
#tree-map .tm-card.nopick .tm-tx { opacity: 0.55; }
/* the way from the root to the slice on screen */
#tree-map .tm-card.line { --rim: var(--tm-green); }
/* the slice on screen: an amber rim that pulses, and its tag */
#tree-map .tm-card.here { --rim: var(--tm-amber); z-index: 2; animation: tm-pulse 1s steps(2) infinite; }
#tree-map .tm-card.here .tm-th::after { display: none; }          /* where you stand is never dimmed */
#tree-map .tm-card.here .tm-tx { opacity: 1; }
@keyframes tm-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--tm-amber), 0 0 0 6px var(--tm-ink); }
  50%      { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--tm-amber), 0 0 0 9px var(--tm-ink); }
}
#tree-map .tm-here {
  position: absolute;
  left: 50%; bottom: 100%;
  transform: translate(-50%, -12px);
  padding: 4px 6px 3px;
  background: var(--tm-amber);
  color: #140800;
  font-family: var(--tm-title);
  font-size: 9px;
  font-style: normal;
  white-space: nowrap;
  box-shadow: 0 0 0 3px var(--tm-ink);
  pointer-events: none;
}
/* the tile picked: white rim, amber ring */
#tree-map .tm-card.sel { z-index: 3; animation: none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--tm-amber), 0 0 0 9px var(--tm-ink); }

/* a path nobody took yet: a ghost leaf, never picked */
#tree-map .tm-card.st-ghost {
  width: 56px; height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 12, 10, 0.7);
  border: 3px dashed #2f4a3e;
  box-shadow: none;
  font-family: var(--tm-title);
  font-size: 18px;
  color: #3f6352;
}
#tree-map .tm-card.st-ghost:hover { border-color: #4d7563; color: #5f8d77; }
#tree-map .tm-card.st-ghost.sel { border-color: #fff; color: #fff; box-shadow: 0 0 0 3px var(--tm-amber), 0 0 0 6px var(--tm-ink); }
/* a marked slice: a locked tile, no words; what grew from it stays */
#tree-map .tm-card.st-lock { --rim: #4a3b2a; background: #0b0806; }
#tree-map .tm-card.st-lock .tm-th {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d0906 repeating-linear-gradient(45deg, rgba(255, 75, 58, 0.1) 0 6px, transparent 6px 12px);
  color: #b07a3a;
  font-size: 30px;
  line-height: 1;
}
#tree-map .tm-card.st-lock .tm-th::after { display: none; }

/* ---------- level of detail: far out the words rest, then the frames ---------- */
#tree-map.lod-mid .tm-tx, #tree-map.lod-far .tm-tx { visibility: hidden; }
#tree-map.lod-far .tm-card .tm-th img, #tree-map.lod-far .tm-card .tm-mk, #tree-map.lod-far .tm-here, #tree-map.lod-far .tm-card .tm-th::after { visibility: hidden; }
#tree-map.lod-far .tm-card .tm-th { background: none; }
/* far out a tile is a block of its colour: no rim, no pulse, no dashes (thousands paint at once) */
#tree-map.lod-far .tm-card { background: #1c2a24; box-shadow: none; animation: none; }
#tree-map.lod-far .tm-card.st-rec { background: #1f7a52; }
#tree-map.lod-far .tm-card.pick { background: #a86a1c; }
#tree-map.lod-far .tm-card.line { background: var(--tm-green); }
#tree-map.lod-far .tm-card.here, #tree-map.lod-far .tm-card.sel { background: #fff; }
#tree-map.lod-far .tm-card.st-lock { background: #3a2412; }
#tree-map.lod-far .tm-card.st-ghost { border: 0; background: #13201a; color: transparent; }
/* far out the slice on screen keeps a beacon of constant size (--k = 1 / zoom) */
#tree-map.lod-far .tm-card.here::before, #tree-map.lod-mid .tm-card.here::before {
  content: '';
  position: absolute;
  inset: calc(-14px * var(--k, 1));
  border: calc(3px * var(--k, 1)) solid var(--tm-amber);
  pointer-events: none;
}

/* ---------- keys (the drift's own look: .gb / .gbs) ---------- */
#tree-map .tm-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: rgba(14, 9, 3, 0.9);
  color: #ffd39a;
  font-family: var(--tm-title);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-shadow: 2px 2px 0 #000;
  box-shadow: 0 0 0 3px var(--tm-amber), 0 0 0 6px var(--tm-ink), 6px 6px 0 6px rgba(0, 0, 0, 0.55);
  transition: transform 0.05s steps(1);
}
#tree-map .tm-btn svg { display: block; width: 16px; height: 16px; fill: currentColor; shape-rendering: crispEdges; }
#tree-map .tm-btn:hover { background: rgba(52, 34, 8, 0.92); }
#tree-map .tm-btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 0 0 0 3px var(--tm-amber), 0 0 0 6px var(--tm-ink), 3px 3px 0 6px rgba(0, 0, 0, 0.55); }
#tree-map .tm-btn:focus { outline: none; }
#tree-map .tm-btn:focus-visible { background: rgba(52, 34, 8, 0.92); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--tm-ink), 6px 6px 0 6px rgba(0, 0, 0, 0.55); }
#tree-map .tm-btn:disabled { opacity: 0.32; cursor: not-allowed; }
#tree-map .tm-btn.tm-x { color: var(--tm-green); background: rgba(4, 14, 9, 0.92); box-shadow: 0 0 0 3px var(--tm-green-dim), 0 0 0 6px var(--tm-ink); }
#tree-map .tm-btn.tm-x:hover { background: rgba(10, 52, 30, 0.95); color: #eafff5; }
#tree-map .tm-btn.tm-go {
  background: #ff8800;
  color: #140800;
  text-shadow: none;
  box-shadow: 0 0 0 3px #ffd39a, 0 0 0 6px var(--tm-ink), 6px 6px 0 6px rgba(0, 0, 0, 0.55);
}
#tree-map .tm-btn.tm-go:hover:not(:disabled) { background: #ffa033; }
#tree-map .tm-btn.tm-go:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--tm-ink), 6px 6px 0 6px rgba(0, 0, 0, 0.55); }
#tree-map .tm-btn.tm-go:disabled { background: #3a3228; color: #8a7f70; box-shadow: 0 0 0 3px #6a5f50, 0 0 0 6px var(--tm-ink); opacity: 0.6; }

/* ---------- the top bar: title, hint, close ---------- */
#tree-map .tm-bar {
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) 10px calc(18px + env(safe-area-inset-left, 0px));
  background: var(--tm-panel);
  box-shadow: 0 3px 0 0 var(--tm-green-dim), 0 6px 0 0 var(--tm-ink);
}
#tree-map .tm-title {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--tm-title);
  font-size: 13px;
  color: var(--tm-green);
  text-shadow: 2px 2px 0 #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#tree-map .tm-hint {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--tm-body);
  font-size: 22px;
  line-height: 1.05;
  color: var(--tm-green-dim);
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#tree-map .tm-bar .tm-x { margin-left: auto; flex: 0 0 auto; }

/* ---------- the toolbar: + − ⌖ ---------- */
#tree-map .tm-tools {
  position: absolute;
  left: calc(22px + env(safe-area-inset-left, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#tree-map .tm-tools .tm-btn { width: 48px; height: 48px; padding: 0; }
#tree-map .tm-legend {
  position: absolute;
  left: calc(96px + env(safe-area-inset-left, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  max-width: calc(100% - 520px);
  padding: 8px 12px;
  background: var(--tm-panel);
  box-shadow: 0 0 0 3px #1d3a2c, 0 0 0 6px var(--tm-ink);
  font-family: var(--tm-body);
  font-size: 20px;
  line-height: 1;
  color: var(--tm-green-dim);
  pointer-events: none;
}
#tree-map .tm-legend:empty { display: none; }
#tree-map .tm-legend span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
#tree-map .tm-legend .tm-mk { position: static; flex: 0 0 auto; }
#tree-map .tm-legend .tm-mk.no { background: transparent; box-shadow: inset 0 0 0 2px #7d8f88, 0 0 0 2px var(--tm-ink); }
#tree-map .tm-legend .tm-lg-pick { width: 14px; height: 14px; box-shadow: 0 0 0 3px var(--tm-amber); background: #1a1206; }
#tree-map .tm-legend .tm-lg-q { width: 14px; height: 14px; border: 2px dashed #4d7563; }
#tree-map .tm-legend .tm-lg-l { font-size: 18px; color: #b07a3a; }

/* ---------- the details of the tile picked ---------- */
#tree-map .tm-det {
  position: absolute;
  right: calc(20px + env(safe-area-inset-right, 0px));
  top: calc(var(--tm-bar-h, 70px) + 22px);
  z-index: 5;
  display: none;
  width: 340px;
  max-height: calc(100% - var(--tm-bar-h, 70px) - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 14px;
  background: var(--tm-panel);
  box-shadow: 0 0 0 3px var(--tm-green-dim), 0 0 0 6px var(--tm-ink), 10px 10px 0 6px rgba(0, 0, 0, 0.5);
  color: #cfe9dc;
  user-select: text;
  -webkit-user-select: text;
}
#tree-map .tm-det.on { display: block; animation: tm-in 180ms steps(3) backwards; }
@keyframes tm-in { from { transform: translateX(18px); opacity: 0; } to { transform: none; opacity: 1; } }
#tree-map .tm-d-kick {
  margin: -14px -14px 12px;
  padding: 9px 12px 8px;
  background: #0f2a1d;
  font-family: var(--tm-title);
  font-size: 11px;
  line-height: 1.3;
  color: var(--tm-green);
  text-shadow: 2px 2px 0 #000;
}
#tree-map .tm-d-kick.pick { background: #3a2308; color: #ffd39a; }
#tree-map .tm-d-kick.here { background: var(--tm-amber); color: #140800; text-shadow: none; }
#tree-map .tm-d-kick.lock { background: #2a1a0c; color: #d49a52; }
#tree-map .tm-d-kick.ghost { background: #0d1a14; color: #6f9a86; }
#tree-map .tm-d-th {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0a1611 repeating-linear-gradient(45deg, rgba(98, 216, 143, 0.08) 0 6px, transparent 6px 12px);
  box-shadow: 0 0 0 3px var(--tm-dim), 0 0 0 6px var(--tm-ink);
  margin: 6px 6px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tm-title);
  font-size: 26px;
  color: #3f6352;
}
#tree-map .tm-d-th.lock { color: #b07a3a; background: #0d0906 repeating-linear-gradient(45deg, rgba(255, 75, 58, 0.1) 0 8px, transparent 8px 16px); }
#tree-map .tm-d-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
#tree-map .tm-d-date { font-family: var(--tm-title); font-size: 13px; line-height: 1.4; color: #eafff5; text-shadow: 2px 2px 0 #000; }
#tree-map .tm-d-place { margin-top: 4px; font-family: var(--tm-body); font-size: 25px; line-height: 1.05; color: var(--tm-green-dim); }
#tree-map .tm-d-teaser {
  margin-top: 10px;
  padding-left: 10px;
  border-left: 3px solid #6a4a1c;
  font-family: var(--tm-body);
  font-size: 22px;
  line-height: 1.1;
  color: #ffe4c2;
}
#tree-map .tm-d-st { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-family: var(--tm-ui); font-size: 16px; color: var(--tm-green); }
#tree-map .tm-d-st .tm-mk { position: static; }
#tree-map .tm-d-st.no { color: #8fa39b; }
#tree-map .tm-d-st.no .tm-mk { background: transparent; box-shadow: inset 0 0 0 2px #7d8f88, 0 0 0 2px var(--tm-ink); }
#tree-map .tm-d-row { display: flex; flex-wrap: wrap; gap: 16px; margin: 20px 8px 8px 6px; }
#tree-map .tm-d-row .tm-go { flex: 1 1 auto; min-height: 48px; }
#tree-map .tm-d-row .tm-no { flex: 0 0 auto; min-height: 48px; }

/* ---------- a phone (or any coarse pointer): a bottom sheet, big targets ---------- */
@media (max-width: 760px), (pointer: coarse) {
  #tree-map .tm-bar { flex-wrap: wrap; gap: 6px 12px; padding-bottom: 8px; }
  #tree-map .tm-title { font-size: 11px; flex: 1 1 0; }
  #tree-map .tm-hint {
    order: 3;
    flex: 1 1 100%;
    font-size: 19px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  #tree-map .tm-tools {
    left: auto;
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: auto;
    top: calc(var(--tm-bar-h, 112px) + 18px);                   /* the bar's own height (with its safe area), measured */
  }
  #tree-map .tm-legend { display: none; }
  #tree-map .tm-det {
    left: 0; right: 0; top: auto; bottom: 0;
    width: auto;
    max-height: 62%;
    padding: 14px calc(16px + env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
    box-shadow: 0 -3px 0 0 var(--tm-green-dim), 0 -6px 0 0 var(--tm-ink);
    display: none;
    grid-template-columns: 42% 1fr;
    column-gap: 16px;
    align-items: start;
  }
  #tree-map .tm-det.on { display: grid; animation-name: tm-up; }
  @keyframes tm-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  #tree-map .tm-d-kick { grid-column: 1 / -1; margin: -14px calc(-16px - env(safe-area-inset-right, 0px)) 12px calc(-16px - env(safe-area-inset-left, 0px)); padding-left: calc(16px + env(safe-area-inset-left, 0px)); }
  #tree-map .tm-d-th { grid-row: span 3; margin: 6px 0 8px 6px; font-size: 20px; }
  #tree-map .tm-d-date { font-size: 11px; }
  #tree-map .tm-d-place { font-size: 22px; }
  #tree-map .tm-d-teaser { grid-column: 1 / -1; font-size: 21px; }
  #tree-map .tm-d-st { font-size: 15px; margin-top: 8px; }
  #tree-map .tm-d-row { grid-column: 1 / -1; margin: 18px 6px 6px; }
  #tree-map .tm-d-row .tm-go, #tree-map .tm-d-row .tm-no { min-height: 50px; }
  #tree-map .tm-btn { min-width: 48px; min-height: 48px; }
}

/* the operator asked for less motion: no pulse, no slide */
@media (prefers-reduced-motion: reduce) {
  #tree-map .tm-card.here { animation: none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--tm-amber), 0 0 0 9px var(--tm-ink); }
  #tree-map .tm-det.on { animation: none; }
}