/* The complete canonical map, with fixed coordinates for every player. */
.panel:has(.shared-tree) { width:min(1180px,100%); }
#overlay:has(.shared-tree) { padding-top:66px; background:#020407f8; }
.panel:has(.shared-tree) > h2 { margin:12px auto 14px; font-size:clamp(28px,3.5vw,43px); }
.panel:has(.shared-tree) > .eyebrow { font-size:10px; letter-spacing:.33em; }
.panel:has(.shared-tree) > .small { max-width:690px; }
.tree-scroll:has(.shared-tree) { width:100%; margin:28px 0 16px; overflow:visible; background:none; }
.shared-tree { text-align:left; color:#eeefed; }
.shared-tree-tools { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; border-top:1px solid #ffffff24; }
.shared-tree-view-tools, .shared-tree-zoom { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.tree-control { font:11px/1.4 system-ui,sans-serif; padding:9px 13px; color:#d9dedf; background:#ffffff03; border:1px solid #ffffff29; border-radius:2px; letter-spacing:.02em; cursor:pointer; }
.tree-control:hover { background:#ffffff0d; border-color:#ffffff73; }
.tree-control:focus-visible { outline:1px solid white; outline-offset:3px; }
select.tree-control { max-width:240px; min-height:34px; color-scheme:dark; }
.shared-tree-zoom button:nth-child(-n+2) { font:18px/1 Georgia,serif; width:35px; height:35px; padding:7px; }
.shared-tree-legend { display:flex; flex-wrap:wrap; gap:12px 25px; align-items:center; min-height:39px; margin:0 0 14px; font-size:10px; color:#aeb6b9; }
.tree-key { white-space:nowrap; }
.tree-key::before { content:""; display:inline-block; width:21px; margin-right:9px; vertical-align:middle; border-top:1px solid white; }
.tree-key.dormant::before { opacity:.25; }
.tree-key.collective::before { opacity:.7; box-shadow:0 0 5px #ffffff80; }
.tree-key.personal::before { border-width:2px; box-shadow:0 0 7px white; }
.tree-friend-select { margin-left:auto; }
.shared-tree-viewport { position:relative; height:clamp(520px,70svh,820px); overflow:hidden; cursor:grab; touch-action:none; outline:none; border:1px solid #ffffff13; background:radial-gradient(ellipse at 50% 45%,#11161b50,#020407 72%); }
.shared-tree-viewport:active { cursor:grabbing; }
.shared-tree-viewport:focus-visible { border-color:#ffffff70; box-shadow:0 0 0 1px #ffffff45; }
.world-tree-svg { display:block; width:100%; height:100%; user-select:none; }
.world-tree-svg text { fill:#e5e5df; font:11px Georgia,serif; letter-spacing:2px; }
.world-tree-svg .tree-chapter-labels { opacity:.5; }
.world-tree-svg .tree-origin-label { font-size:10px; letter-spacing:4px; }
.world-tree-svg .tree-person-label { font:12px system-ui,sans-serif; letter-spacing:1.3px; paint-order:stroke; stroke:#030608; stroke-width:5px; stroke-linejoin:round; }
.world-tree-svg .tree-event { cursor:pointer; }
.world-tree-svg .tree-hit, .world-tree-svg .tree-event:hover .tree-hit { fill:transparent; }
.world-tree-svg .tree-focus-ring { opacity:0; }
.world-tree-svg .tree-event:hover .tree-focus-ring, .world-tree-svg .tree-event:focus-visible .tree-focus-ring { opacity:1; }
.world-tree-svg .tree-event:focus-visible { outline:none; }
.shared-tree-caption { display:flex; justify-content:space-between; gap:12px; margin:12px 0 0; font-size:10px; line-height:1.6; color:#879398; }
.shared-tree-status { color:#bec6c8; }
@media(max-width:600px) {
  #overlay:has(.shared-tree) {padding:42px 15px 38px;}
  .shared-tree-tools {align-items:flex-start;gap:8px;}
  .shared-tree-view-tools {flex:1;gap:5px;}
  .shared-tree-zoom {justify-content:flex-end;max-width:100px;gap:5px;}
  .tree-control {font-size:10px;padding:8px 9px;}
  .shared-tree-legend {gap:10px 16px;}
  .tree-friend-select {margin-left:0;max-width:100%;}
  .shared-tree-viewport {height:70svh;min-height:470px;}
  .shared-tree-caption {display:block;}
  .shared-tree-caption span {display:block;margin:5px 0;}
}

/* Route strokes cannot intercept the memory buttons at their endpoints. */
.tree-personal-light > path, .tree-personal-light > text { pointer-events:none; }