/* Difficulty and tier colours. Colour is never the only signal: every chip also has a word and pips. */
:root {
  --d-easy: #1f9d5b; --d-easy-bg: #d9f5e5; --d-med: #c78500; --d-med-bg: #fff0c2; --d-hard: #d63c36; --d-hard-bg: #ffdad7;
  --t-b: #2b6fe6; --t-b-bg: #dbe8ff; --t-i: #7a48d6; --t-i-bg: #e9defb; --t-a: #cc2f84; --t-a-bg: #ffd9ec;
  --d-ink: #1c2030;
}
:root[data-theme="dark"] {
  --d-easy: #55d68f; --d-easy-bg: #17382a; --d-med: #ffc43d; --d-med-bg: #3d3010; --d-hard: #ff7a73; --d-hard-bg: #44201f;
  --t-b: #7aa8ff; --t-b-bg: #172a50; --t-i: #b794ff; --t-i-bg: #2c2050; --t-a: #ff8cc4; --t-a-bg: #4a1a35; --d-ink: #f2f3f8;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --d-easy: #55d68f; --d-easy-bg: #17382a; --d-med: #ffc43d; --d-med-bg: #3d3010; --d-hard: #ff7a73; --d-hard-bg: #44201f;
  --t-b: #7aa8ff; --t-b-bg: #172a50; --t-i: #b794ff; --t-i-bg: #2c2050; --t-a: #ff8cc4; --t-a-bg: #4a1a35; --d-ink: #f2f3f8; } }
.dchip, .tchip { display: inline-flex; align-items: center; gap: 6px; font: 700 .72rem/1 var(--f-mono, monospace); letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px 5px 8px; border-radius: 99px; border: 2px solid currentColor; }
.dchip .pips { display: inline-flex; gap: 3px; } .dchip .pips i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; } .dchip .pips i.on { background: currentColor; }
.d-easy { color: var(--d-easy); background: var(--d-easy-bg); } .d-medium { color: var(--d-med); background: var(--d-med-bg); } .d-hard { color: var(--d-hard); background: var(--d-hard-bg); }
.t-b { color: var(--t-b); background: var(--t-b-bg); } .t-i { color: var(--t-i); background: var(--t-i-bg); } .t-a { color: var(--t-a); background: var(--t-a-bg); }
.dchip, .tchip { color-scheme: normal; } .d-easy, .d-medium, .d-hard, .t-b, .t-i, .t-a { filter: none; }
.tchip .sq { width: 10px; height: 10px; background: currentColor; } .t-b .sq { border-radius: 50%; } .t-i .sq { border-radius: 2px; } .t-a .sq { transform: rotate(45deg); }
/* map */
.node-btn.lv-easy { outline: 4px solid var(--d-easy); outline-offset: 3px; } .node-btn.lv-medium { outline: 4px solid var(--d-med); outline-offset: 3px; } .node-btn.lv-hard { outline: 4px solid var(--d-hard); outline-offset: 3px; }
.node-btn.soon { outline-style: dashed; }
.pn .dchip { margin-top: 4px; }
.tier-tab { border-top-width: 6px; } .tier-tab[data-tier="b"] { border-top-color: var(--t-b); } .tier-tab[data-tier="i"] { border-top-color: var(--t-i); } .tier-tab[data-tier="a"] { border-top-color: var(--t-a); }
.tier-tab[data-tier="b"] b { color: var(--t-b); } .tier-tab[data-tier="i"] b { color: var(--t-i); } .tier-tab[data-tier="a"] b { color: var(--t-a); }
.tier-tab[aria-selected="true"][data-tier="b"] { background: var(--t-b-bg); } .tier-tab[aria-selected="true"][data-tier="i"] { background: var(--t-i-bg); } .tier-tab[aria-selected="true"][data-tier="a"] { background: var(--t-a-bg); }
.legend { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin: var(--s3) 0; }
.legend .lab { font-weight: 700; color: var(--ink-2); }
.zone-head .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }