/* ---------- Radial menu ---------- */
#dim { position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: 0; transition: opacity .16s ease;
  background: radial-gradient(circle at var(--wx, 50%) var(--wy, 50%), transparent 0, var(--dim) 340px); }
.wheel-open #dim { opacity: 1; }
#wheel { position: fixed; left: 50%; top: 50%; z-index: 21; width: calc(var(--wr, 170px) * 2 + 60px); aspect-ratio: 1; max-width: none;
  transform: translate(-50%, -50%) scale(.82); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .16s cubic-bezier(.2,.9,.3,1.2), opacity .12s ease, visibility 0s .16s; }
#wheel.show { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; transition: transform .18s cubic-bezier(.2,.9,.3,1.25), opacity .1s ease, visibility 0s; }
#wheel.sticky { pointer-events: auto; }
#wheel svg { width: 100%; height: 100%; overflow: visible; display: block; }
.seg { transition: transform .14s cubic-bezier(.2,.9,.3,1.3); cursor: inherit; }
.seg path.fill { fill: var(--card); stroke: none; transition: fill .1s; }
.seg .lbl { fill: var(--card-ink); font: 800 15px var(--f-display); font-stretch: 112%; letter-spacing: .04em; text-transform: uppercase; }
.seg .num { fill: var(--card-dim); font: 700 10px var(--f-mono); letter-spacing: .1em; }
.seg .ico { fill: none; stroke: var(--card-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.seg.on path.fill { fill: var(--accent); }
.seg.on .lbl, .seg.on .num { fill: var(--accent-ink); }
.seg.on .ico { stroke: var(--accent-ink); }
.w-div { stroke: var(--card-ink); stroke-width: 5; stroke-linecap: square; }
.w-inner { fill: color-mix(in srgb, var(--bg) 82%, transparent); stroke: var(--accent); stroke-width: 3; }
.w-arc { fill: none; stroke: var(--accent-ink); stroke-width: 5; stroke-linecap: round; opacity: 0; transition: opacity .1s; }
.w-arc.on { opacity: 1; }
.w-ptr { fill: var(--hot); stroke: var(--bg); stroke-width: 1.5; stroke-linejoin: round; }
.w-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(var(--wr, 170px) * .8); text-align: center; pointer-events: none; display: grid; gap: 4px; justify-items: center; }
.w-center strong { font-family: var(--f-display); font-weight: 900; font-stretch: 118%; font-size: 17px; line-height: 1; text-transform: uppercase; color: var(--ink); }
.w-center span { font-size: 11.5px; line-height: 1.25; color: var(--ink-dim); }
.w-center em { font: 600 9.5px/1 var(--f-mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--hot); }