/* =====================================================================
   Spirila - Descent :: God Mode node legend sidebar
   Extracted verbatim from index.html lines 558-726
   ===================================================================== */
/* ---------- God Mode: Node Legend sidebar ---------- */
.node-legend{
  position:fixed;
  left:10px;
  top:104px;
  bottom:18px;
  width:236px;
  display:none;
  flex-direction:column;
  border-radius:14px;
  border:1px solid rgba(104,255,179,.35);
  background:rgba(5,9,18,.92);
  backdrop-filter:blur(10px);
  box-shadow:var(--shadow);
  z-index:30;
  pointer-events:auto;
  overflow:hidden;
}
.node-legend.visible{display:flex;}

.legend-head{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:9px 10px 10px;
  border-bottom:1px solid rgba(104,255,179,.22);
  background:rgba(104,255,179,.08);
  flex:0 0 auto;
}
.legend-head-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.legend-title{
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#68ffb3;
  white-space:nowrap;
}
.legend-count{
  font-size:11px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.legend-collapse{
  width:24px;
  height:24px;
  flex:0 0 auto;
  border-radius:6px;
  border:1px solid rgba(104,255,179,.35);
  background:transparent;
  color:#68ffb3;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  display:grid;
  place-items:center;
}
.legend-collapse:hover{background:rgba(104,255,179,.18);}

.legend-list{
  flex:1 1 auto;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:6px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.legend-list::-webkit-scrollbar{width:8px;}
.legend-list::-webkit-scrollbar-thumb{
  background:rgba(104,255,179,.25);
  border-radius:8px;
}

.legend-row{
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  padding:7px 8px;
  border-radius:9px;
  border:1px solid transparent;
  background:rgba(255,255,255,.03);
  color:var(--ink);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease;
}
.legend-row:hover{background:rgba(104,255,179,.14);border-color:rgba(104,255,179,.35);}
.legend-row:focus-visible{outline:2px solid #68ffb3;outline-offset:1px;}

.legend-num{
  flex:0 0 auto;
  width:26px;
  height:26px;
  border-radius:7px;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.06);
  border:1px solid var(--ring);
  color:var(--muted);
}
.legend-meta{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}
.legend-state{
  font-size:11.5px;
  font-weight:600;
  line-height:1.25;
  color:var(--muted);
}
.legend-stats{
  font-size:10.5px;
  line-height:1.3;
  color:var(--muted);
  opacity:.72;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Per-state accents */
.legend-row.is-cleared .legend-num{
  background:rgba(104,255,179,.16);
  border-color:rgba(104,255,179,.5);
  color:#68ffb3;
}
.legend-row.is-cleared .legend-state{color:#68ffb3;}

.legend-row.is-current .legend-num{
  background:rgba(0,255,255,.16);
  border-color:rgba(0,255,255,.6);
  color:#7df7ff;
}
.legend-row.is-current .legend-state{color:#7df7ff;}

.legend-row.is-locked .legend-num{opacity:.6;}
.legend-row.is-locked .legend-state{opacity:.75;}

/* The node the God Mode camera is currently sitting on */
.legend-row.is-focused{
  background:rgba(104,255,179,.2);
  border-color:#68ffb3;
  box-shadow:0 0 0 1px rgba(104,255,179,.3) inset;
}

/* Collapsed state (and small screens) */
.node-legend.collapsed{bottom:auto;width:auto;}
.node-legend.collapsed .legend-list,
.node-legend.collapsed .legend-count{display:none;}

@media (max-width:820px){
  .node-legend{top:96px;width:196px;}
  .legend-stats{display:none;}
}

/* ---------- Read-only progress panel (outside God Mode) ---------- */
.node-legend.readonly .legend-row{ cursor:default; }
.node-legend.readonly .legend-row:hover{
  background:rgba(255,255,255,.05);
  border-color:var(--ring);
}