/* Separate interaction proof; the approved Abilities page stays intact. */
.spin-portrait::before{content:none}
.spin-stage{position:absolute;inset:0;overflow:visible;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.spin-stage.is-ready{cursor:grab}
.spin-stage.is-dragging{cursor:grabbing}
.spin-canvas,.spin-poster{position:absolute;left:50%;top:-8%;height:117%;width:auto;max-width:none;transform:translateX(-50%);pointer-events:none}
.spin-canvas{visibility:hidden}
.spin-stage.is-ready .spin-canvas{visibility:visible}
.spin-stage.is-ready .spin-poster{visibility:hidden}
.spin-controls{position:relative;z-index:3;width:min(230px,100%);font:400 11px/1.5 var(--f-sans);color:#d1c5b6}
.spin-controls label{display:block;text-align:left;margin-bottom:5px}
.spin-controls input{display:block;width:100%;height:24px;margin:0;accent-color:var(--amber);cursor:ew-resize}
.spin-controls input:disabled{cursor:wait;opacity:.5}
.spin-controls input:focus-visible{outline:none}
.spin-portrait .ability-note{transition:opacity 140ms ease-out}
.spin-portrait.is-turned .ability-note{opacity:0;visibility:hidden;pointer-events:none}
.abilities-hero:has(.spin-portrait){row-gap:56px}
@media(max-width:760px){
  .spin-stage{right:25%;left:-15%}
  .spin-copy-stack{display:contents}
  .spin-portrait{order:1}
  .spin-controls{order:2;width:180px;max-width:100%;margin-left:max(0px,calc(30% - 90px));margin-top:24px}
  .abilities-hero:has(.spin-portrait) .chapter-row{margin-top:24px}
}
@media(prefers-reduced-motion:reduce){.spin-portrait .ability-note{transition:none}}

/* Sliders (hero rotation, Dexterity, Perception): drawn in brand amber so no browser default blue can show.
   The fill is the thumb's long shadow, clipped by the track. */
.spin-controls input[type=range],.dex-range,.per-range{-webkit-appearance:none;appearance:none;background:transparent;accent-color:#ffc46b}
.spin-controls input[type=range]::-webkit-slider-runnable-track,.dex-range::-webkit-slider-runnable-track,.per-range::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:rgb(241 237 230 / 22%);overflow:hidden}
.spin-controls input[type=range]::-webkit-slider-thumb,.dex-range::-webkit-slider-thumb,.per-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;border:0;background:#ffc46b;box-shadow:-600px 0 0 598px #ffc46b,0 0 10px rgb(255 196 107 / 55%)}
.spin-controls input[type=range]::-moz-range-track,.dex-range::-moz-range-track,.per-range::-moz-range-track{height:4px;border-radius:2px;background:rgb(241 237 230 / 22%)}
.spin-controls input[type=range]::-moz-range-progress,.dex-range::-moz-range-progress,.per-range::-moz-range-progress{height:4px;border-radius:2px;background:#ffc46b}
.spin-controls input[type=range]::-moz-range-thumb,.dex-range::-moz-range-thumb,.per-range::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#ffc46b;box-shadow:0 0 10px rgb(255 196 107 / 55%)}
/* Keyboard focus shows on the thumb as a soft ring, never as a box around the whole slider. */
.spin-controls input[type=range]:focus-visible::-webkit-slider-thumb,.dex-range:focus-visible::-webkit-slider-thumb,.per-range:focus-visible::-webkit-slider-thumb{box-shadow:-600px 0 0 598px #ffc46b,0 0 0 5px rgb(255 196 107 / 28%)}
.spin-controls input[type=range]:focus-visible::-moz-range-thumb,.dex-range:focus-visible::-moz-range-thumb,.per-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 5px rgb(255 196 107 / 28%)}