:root{
  --bg:#0f1418;
  --panel:#151b20;
  --text:#e6edf3;
  --muted:#9aa6b2;
  --outline:#0d1117;
}

html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  display:grid; place-items:center;
}

.app{
  width:min(1200px, 95vmin);   /* was min(1080px,96vw) */
  aspect-ratio:1/1;
  position:relative;
  background:radial-gradient(1200px 1200px at 50% 55%, #121820 0%, #0f1418 60%, #0b0f14 100%);
  border-radius:24px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.03) inset;
}

header{
  position:absolute; inset:16px 16px auto 16px; display:flex; align-items:center; gap:12px;
  padding:8px 12px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  border-radius:12px;
  user-select:none
}
header .crumbs{font-size:14px; color:var(--muted)}
header .crumbs b{color:var(--text)}
header .hint{margin-left:auto; font-size:12px; color:var(--muted)}

svg{width:100%; height:100%; display:block}

.label{
  font-size:14px;                 /* was 12px */
  font-weight:700;                /* a touch bolder */
  letter-spacing:.2px;
  fill:#0b0f14;                   /* will be overridden per-slice by JS for contrast */
  paint-order: stroke;
  stroke:#000;
  stroke-width:2.2px;             /* stronger halo for readability */
  stroke-opacity:.22;
  pointer-events:none;
  user-select:none;
}

.centerTitle{
  font-size:18px; fill:var(--text); text-anchor:middle; dominant-baseline:middle; opacity:.9;
}

.fade{opacity:.12}
.locked { pointer-events: none; }
.ghost { opacity: .15; }
.ring{transition:opacity .25s ease}
.arc{
  cursor:pointer; transition:filter .15s ease, opacity .2s ease;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.65)) drop-shadow(0 4px 14px rgba(0,0,0,.25));
}
/* Dimmed context for All mode */
.arc.dim-strong { opacity: 0.28; }   /* L1 (roots) */
.arc.dim        { opacity: 0.40; }   /* L2 (mid)   */
text.label.dim  { opacity: 0.88; }

/* Selected path emphasis in All mode */
.arc.highlight {
  stroke: #fff;
  stroke-width: 2px;
  opacity: 1;
}
.arc:hover{filter:brightness(1.06) saturate(1.1)}

.hl{
  stroke:#ffffff; stroke-width:2; vector-effect:non-scaling-stroke; mix-blend-mode:screen;
}
.outline{
  stroke:#e8f0ff; stroke-width:2.2; vector-effect:non-scaling-stroke; opacity:.85;
}

#wheel {
  margin-bottom: 32px;  /* pushes wheel away from legend */
}

.legend{
  position:absolute; inset:auto 16px 16px 16px; display:flex; gap:10px; flex-wrap:wrap;
  background:rgba(255,255,255,.03); padding:8px 10px; border-radius:10px; font-size:12px; color:var(--muted)
}
.chip{display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; background:rgba(0,0,0,.25)}
.dot{width:12px; height:12px; border-radius:50%}
.muted { opacity: .5; }

.btnBack{
  position:absolute; inset:auto auto 16px 16px;
  background:#1b2329; border:1px solid #2a3036; color:#e6edf3; border-radius:10px; padding:8px 12px;
  font-size:13px; cursor:pointer; transition:transform .06s ease, filter .2s ease;
}
.btnBack:hover{filter:brightness(1.05)}
.btnBack:active{transform:scale(.98)}

.btnLang{
  margin-left:12px;
  background:#1b2329;
  border:1px solid #2a3036;
  color:#e6edf3;
  border-radius:10px;
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
}
.btnLang:hover{ filter:brightness(1.05) }

/* Accessible Screen-Reader Only Utility */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Accessible Focus Rings */
button:focus-visible,
.btnBack:focus-visible,
.btnLang:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent, #58a6ff);
  outline-offset: 2px;
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
  .app {
    width: 96vw;
    border-radius: 14px;
  }
  header {
    inset: 8px 8px auto 8px;
    padding: 6px 8px;
    gap: 6px;
  }
  header .crumbs {
    font-size: 11px;
  }
  header .hint {
    display: none;
  }
  .legend {
    inset: auto 8px 8px 8px;
    padding: 4px 6px;
    gap: 4px;
    font-size: 10px;
  }
  .chip {
    padding: 2px 6px;
  }
  .btnBack {
    inset: auto auto 8px 8px;
    padding: 6px 10px;
    font-size: 11px;
  }
  .label {
    font-size: 11px;
  }
}