/* One directional sweep per reversal; no idle motion or flashing. */
.direction-ring,.pile-zone{--direction-sweep-end:-360;--direction-spin:360deg;--direction-symbol:'↻'}
.direction-ring.is-reverse,.pile-zone.is-reverse{--direction-sweep-end:360;--direction-spin:-360deg;--direction-symbol:'↺'}
.direction-sweep{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;pointer-events:none}
.direction-sweep ellipse{fill:none;stroke:#ffde91;stroke-width:4;stroke-linecap:round;stroke-dasharray:46 74;filter:drop-shadow(0 0 5px #ffbb66)}
.is-reverse .direction-sweep ellipse{stroke:#ffc5e6;filter:drop-shadow(0 0 5px #ff8dc8)}
.direction-changing .direction-sweep{animation:direction-reveal 2.2s ease both}
.direction-changing .direction-sweep ellipse{animation:direction-lap 1.6s cubic-bezier(.2,.55,.35,1) both}
.direction-notice{position:absolute;z-index:10;top:calc(100% + 14px);left:50%;display:flex;align-items:center;gap:9px;width:max-content;max-width:94vw;padding:8px 14px;transform:translateX(-50%);border:1px solid #efd192a3;border-radius:14px;background:#201d3bf2;color:#ffebbd;box-shadow:0 5px 18px #080c3055;opacity:0;visibility:hidden;pointer-events:none;font:700 13px/1.4 'Chakra Petch',sans-serif}
.direction-notice-arrow{display:block;flex:0 0 auto;font-size:30px;line-height:1}
.direction-notice-arrow::before{content:var(--direction-symbol)}
.direction-changing .direction-notice{visibility:visible;animation:direction-reveal 2.2s ease both}
.direction-changing .direction-notice-arrow{animation:direction-spin 1.6s cubic-bezier(.2,.55,.35,1) both}
.direction-changing.is-reverse .direction-notice{border-color:#ffc4e6a3;color:#ffe0f0}
/* Give the reversal cue priority over the routine pass toast below the ring. */
.direction-ring.direction-changing ~ .event-toast{opacity:0;visibility:hidden}
.direction-orbit i{transition:transform .4s ease,background-color .4s ease}
.pile-zone .direction-sweep{inset:-24px -8px;width:calc(100% + 16px);height:calc(100% + 48px)}
.pile-zone .direction-notice{top:calc(100% + 36px)}
@keyframes direction-lap{from{stroke-dashoffset:0}to{stroke-dashoffset:var(--direction-sweep-end)}}
@keyframes direction-spin{from{transform:rotate(0)}to{transform:rotate(var(--direction-spin))}}
@keyframes direction-reveal{0%{opacity:0}12%,78%{opacity:1}100%{opacity:0}}
@media(max-width:700px){.direction-notice{gap:6px;padding:7px 10px;font-size:11px}.direction-notice-arrow{font-size:26px}}
@media(prefers-reduced-motion:reduce){
  .direction-orbit i{transition:none}
  .direction-changing .direction-sweep{display:none}
  .direction-changing .direction-notice,.direction-changing .direction-notice-arrow{animation:none;opacity:1}
}