/* BKSWheel — chorDLE's wheel styles, copied from static/interval-bingo/style.css.
   Only change: `#pgWheelHost` is rescoped to `.bksw` (the class mount() puts on the host).
   Source lines (style.css): 3237-3314, 3827-3834, 4111-4112, 4223-4225, 4347-4352, 4673-4690,
   5906-5953, 6624-6625, 7075-7095, 7377-7380. */
.bksw{ --txt-scale:1; position:relative;
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.bksw *{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }

.wh-svg{ display:block; width:100%; height:auto; overflow:visible; touch-action:none;
  -webkit-touch-callout:none; user-select:none; }
.wh-w{ cursor:pointer; }
.wh-nm{ font-weight:700; font-size:calc(11.5px * var(--txt-scale));  text-anchor:middle; dominant-baseline:central; fill:#fff;
  paint-order:stroke; stroke:#000; stroke-width:.7px; pointer-events:none; }
.wh-fn{ font-weight:700; font-size:calc(8.5px * var(--txt-scale));  text-anchor:middle; dominant-baseline:central; fill:#fff;
  opacity:.95; letter-spacing:.3px; paint-order:stroke; stroke:#000; stroke-width:1px;
  pointer-events:none; }
.wh-hub{ fill:#fff; stroke:#e5e7eb; stroke-width:2; cursor:pointer; touch-action:none; }
.wh-hubname{ font-weight:700; font-size:26px;  text-anchor:middle; dominant-baseline:central; fill:#10242a; pointer-events:none; }
.wh-hubname.sm{ font-size:17px; opacity:.55; }
.wh-back{ fill:transparent; }
.wh-ext{ cursor:pointer; }

/* V versus v: lowercase numerals italic + tracked (style.css 3827-3834) */
.wh-fn{font-weight:800;letter-spacing:0}
.wh-fn.lc{font-weight:600;letter-spacing:.08em;font-style:italic}

/* the lit / playing wedge (style.css 4111-4112) */
svg.wh-svg .wh-w:focus{ outline:none !important }
svg.wh-svg .wh-w:focus-visible, svg.wh-svg .wh-w.wh-playing{ outline:none; stroke:#fff !important; stroke-width:3.5 !important;
  paint-order:stroke; filter:drop-shadow(0 0 4px rgba(255,255,255,.9)); }
.wh-w.sounding{ stroke:#fff; stroke-width:3; filter:drop-shadow(0 0 6px rgba(255,255,255,.55));
  transition:stroke-width .12s ease }
@media (prefers-reduced-motion:reduce){ .wh-w.sounding{ filter:none } }

/* major/minor name pills (style.css 4347-4352) */
.bksw .wh-svg .wh-nm, .bksw .wh-svg .wh-nmpill{ pointer-events:none }
.bksw .wh-svg .wh-nmpill{ fill:#0b1215; fill-opacity:.9; stroke-width:1 }
.bksw .wh-svg .wh-nmpill.wh-q-maj{ stroke:rgba(255,215,155,.55) }
.bksw .wh-svg .wh-nmpill.wh-q-min{ stroke:rgba(142,126,240,.6) }
.bksw .wh-svg .wh-nm.wh-q-maj{ fill:#FFD79B !important; stroke:none !important; font-weight:800 }
.bksw .wh-svg .wh-nm.wh-q-min{ fill:#8E7EF0 !important; stroke:none !important; font-weight:800 }
.bksw .wh-svg .wh-off{ display:none }

/* the progression path (style.css 4673-4690, 7377-7380) */
.wh-shape, .wh-shape-back, .wh-shape-ans{ fill:none; stroke-linecap:round; stroke-linejoin:round; pointer-events:none }
.wh-shape-ans{
  stroke:rgba(94,214,143,.98); stroke-width:3.0;
  filter:drop-shadow(0 0 3px rgba(0,0,0,.5));
}
@media (prefers-reduced-motion:reduce){ .wh-shape-ans{ animation:none; stroke-dashoffset:0 } }
.wh-shape-ans[data-leg="0"]{ opacity:.42; stroke-width:2.2 }
.wh-shape-ans[data-leg="1"]{ opacity:.62; stroke-width:2.5 }
.wh-shape-ans[data-leg="2"]{ opacity:.82; stroke-width:2.8 }
.wh-shape-ans[data-leg="3"]{ opacity:1;   stroke-width:3.1 }

/* Theory Chart path: a fading comet tail per leg, and a head where it is now */
.wh-trail{ fill:none; stroke-linecap:round; pointer-events:none; filter:drop-shadow(0 0 2px rgba(0,0,0,.45)) }
.wh-trail-head{ fill:var(--wh-trail,#5ed68f); stroke:#fff; stroke-width:1.5; pointer-events:none; filter:drop-shadow(0 0 4px var(--wh-trail,#5ed68f)) }
.bksw{ position:relative }
.wh-droplight{ pointer-events:none; }
.wh-droplayer{ position:absolute; left:0; top:0; width:100%; aspect-ratio:1; overflow:visible; pointer-events:none; z-index:0; }
.wh-trail-ghost{ fill:var(--wh-trail,#5ed68f); opacity:.35; pointer-events:none }
.bksw [data-new]{ transition:opacity .35s ease }
.bksw.cad-on [data-new]{ opacity:0 }      /* while a cadence comet flies, it is the trail */
.wh-cad-layer{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none }

/* wedges on the path come forward, the rest step back (style.css 7075-7095) */
.wh-svg.wh-lit .wh-w,
.wh-svg.wh-lit .wh-nm,
.wh-svg.wh-lit .wh-sub,
.wh-svg.wh-lit .wh-nmpill,
.wh-svg.wh-lit .wh-fn{ opacity:.85; transition:opacity .28s ease }
.wh-svg.wh-lit .wh-w.wh-dest,
.wh-svg.wh-lit .wh-nm.wh-dest,
.wh-svg.wh-lit .wh-sub.wh-dest,
.wh-svg.wh-lit .wh-nmpill.wh-dest,
.wh-svg.wh-lit .wh-fn.wh-dest{ opacity:1 }
.wh-svg.wh-lit .wh-w.wh-dest{ stroke:rgba(255,255,255,.34); stroke-width:1.4 }
.wh-svg.wh-lit .wh-w.sounding{ opacity:1 }
@media (prefers-reduced-motion:reduce){
  .wh-svg.wh-lit .wh-w, .wh-svg.wh-lit .wh-nm, .wh-svg.wh-lit .wh-sub,
  .wh-svg.wh-lit .wh-nmpill, .wh-svg.wh-lit .wh-fn{ transition:none }
}

/* the pull arrows (style.css 5906-5953, 6624-6625) */
.bksw .wh-svg .wh-hub, .bksw .wh-svg .wh-hubname{ cursor:pointer }
.bksw .wh-svg .wh-hub{ transition:fill .22s ease }
.bksw.pull-on .wh-svg .wh-hub{ fill:#e4f6ea }
@media (prefers-reduced-motion:reduce){ .bksw .wh-svg .wh-hub{ transition:none } }
.wh-pull{ pointer-events:none }
.bksw.pull-hidepath .wh-shape,
.bksw.pull-hidepath .wh-shape-back{ opacity:0; transition:opacity .12s ease }
.wh-pull{ filter:drop-shadow(0 0 2.2px rgba(4,10,11,.95)) drop-shadow(0 0 1px rgba(4,10,11,.9)) }
.wh-pull-p{ fill:none; stroke:#FFD34D; stroke-linecap:round;
            paint-order:stroke fill; }
.wh-pull-p.strong{ stroke:#FFE27A }
.wh-pull-p.faint{ stroke:#C9A63A }
.wh-pull-case{ fill:none; stroke:#1b1405; stroke-linecap:round; stroke-linejoin:round }
.wh-pull-case.h{ fill:#1b1405; stroke-width:2.2 }   /* the arrow's thin outline: under the shaft and the head alike */
.wh-pull-h{ fill:#FFD34D; stroke:none }   /* same colour and strength as its shaft (the dark outline made heads read as separate marks) */
.wh-pull-h.strong{ fill:#FFE27A }
.wh-pull-h.faint{ fill:#C9A63A }
.wh-svg .wh-w.wh-pull-src{ stroke:#FFD34D !important; stroke-width:3 !important;
                           filter:drop-shadow(0 0 5px rgba(255,211,77,.55)) }
.wh-pull-t{
  fill:#8affbe; font:700 9px/1 "IBM Plex Mono",ui-monospace,monospace;
  text-anchor:middle; paint-order:stroke; stroke:#040a0b; stroke-width:3;
  stroke-linejoin:round;
}
.wh-pull-t.strong{ font-size:11.5px; font-weight:800; fill:#a8ffd0 }
.wh-pull-t.faint{ fill:#9ab5aa; font-size:8px; stroke-width:2.4 }
@media (prefers-reduced-motion:reduce){ .wh-pull{ transition:none } }
.wh-pull-cap{ fill:#FFD34D; stroke:#1b1405; stroke-width:2.6; paint-order:stroke fill;
              font:800 11px/1 -apple-system,BlinkMacSystemFont,sans-serif; letter-spacing:.02em }