/* Stick direction labels (stick-labels.mjs): the ring breaks at each direction that does something,
   a chevron sits in the break, a word says what it does. Pushing lights that direction and names the
   move above the ring. data-stick-labels=false restores the plain ring. */
.stick-dirs{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;color:#efffffc4;transition:opacity .15s}
#game:not([data-stick-labels=true]) .stick-dirs{display:none}
#game[data-stick-labels=true] #controls .stick-ring{border-color:transparent!important}
#game[data-stick-labels=true] #controls .stick-ring::before{display:none}
.stick-arc{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round}
.stick-chev{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.stick-word{fill:#fff;font:650 9.5px/1 var(--hud-font,system-ui);letter-spacing:.9px;text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:#0329384d;stroke-width:2.2px;transition:fill .12s,opacity .12s}
.stick-word.long{font-size:8px;letter-spacing:.5px}.stick-word.longer{font-size:7px;letter-spacing:.2px}
.stick-dir{transition:opacity .12s}
.stick-dir.off{display:none}
/* Pushed: the lit direction goes lime, the rest step back. */
.stick-zone[data-pushed=true] .stick-dir:not(.lit){opacity:.32}
.stick-dir.lit .stick-chev{stroke:var(--hud-lime,#d6ff32);filter:drop-shadow(0 0 4px #d6ff3299)}
.stick-dir.lit .stick-word{fill:var(--hud-lime,#d6ff32)}
.stick-zone.active .stick-knob{border-color:var(--hud-lime,#d6ff32)!important;box-shadow:0 0 12px #d6ff3266!important}
/* The loaded trick (trick-intent.mjs) under R, in place of the pill between the sticks. */
#game[data-stick-labels=true] #controls #trickIntent{display:none!important}
.stick-loaded{position:absolute;left:50%;top:calc(100% + 12px);transform:translate(-50%,-4px);white-space:nowrap;font:700 13px/1 var(--hud-font,system-ui);letter-spacing:1.6px;text-transform:uppercase;color:var(--hud-lime,#d6ff32);text-shadow:var(--hud-shadow,0 1px 5px #0009);opacity:0;transition:opacity .12s,transform .12s;pointer-events:none}
.stick-loaded.on{opacity:1;transform:translate(-50%,0)}
.stick-loaded::after{content:'';display:block;width:60%;height:1.5px;margin:5px auto 0;background:currentColor;opacity:.7;border-radius:1px}
#game:not([data-stick-labels=true]) .stick-loaded{display:none}
/* Ring states carry over to the arcs: armed tip/off-hand blue, landing-ready green, pop-trainer lime. */
.stick-zone.tip-flip .stick-dirs{color:var(--hud-blue,#25b8ff)}
#trickZone[data-landing=ready] .stick-dirs{color:#7df0a4}
#game[data-pop-trainer="true"][data-pop-phase="release"] #rideZone .stick-dirs{color:#e5ff62}
@media(prefers-reduced-motion:reduce){.stick-dirs,.stick-word,.stick-dir,.stick-loaded{transition:none}}
/* The lit word sits under the thumb and the knob; the lit chevron says it instead. */
.stick-dir.lit .stick-word{opacity:0}
/* The captions under the sticks (Turn/Grab, Roll/Spin, grab names) are implied by the labels. */
#game[data-stick-labels=true] #controls .stick-zone>strong{visibility:hidden}
/* Wrapped (stick-labels.mjs blockedSpin): the spin R can't start fades under a shade, and WRAPPED FS/BS
   sits above R, styled like the loaded trick under it; it replaces the small label between the sticks. */
.stick-blocked{fill:#021c27;opacity:0;transition:opacity .15s}
.stick-zone[data-wrapped=true] .stick-blocked{opacity:.42}
.stick-dir.blocked{opacity:.2}
#game[data-stick-labels=true] #controls #wrapIntent{display:none!important}
.stick-wrapped{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,4px);white-space:nowrap;font:700 13px/1 var(--hud-font,system-ui);letter-spacing:1.6px;text-transform:uppercase;color:var(--hud-blue,#25b8ff);text-shadow:var(--hud-shadow,0 1px 5px #0009);opacity:0;transition:opacity .12s,transform .12s;pointer-events:none}
.stick-wrapped.on{opacity:1;transform:translate(-50%,0)}
.stick-wrapped::after{content:'';display:block;width:60%;height:1.5px;margin:5px auto 0;background:currentColor;opacity:.7;border-radius:1px}
#game:not([data-stick-labels=true]) .stick-wrapped{display:none}
@media(prefers-reduced-motion:reduce){.stick-blocked,.stick-wrapped{transition:none}}