/* Local proof only; preserves the standing figure, frame scale and rotation. */
button.ability-note{appearance:none;border:0;background:transparent;text-align:left;font:inherit;cursor:pointer}
.ability-note[aria-pressed="true"]::before{background:var(--amber)}
.ability-note[aria-pressed="true"]::after{outline:1px solid var(--amber);outline-offset:4px}
.explore-modes{display:flex;flex-wrap:wrap;gap:8px 18px;padding:0;margin:24px 0 0;list-style:none;color:#d1c5b6;font:400 13px/1.6 var(--f-sans)}
.explore-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:24px;font:400 13px/1.5 var(--f-sans)}
.explore-chapter{color:var(--amber);text-decoration:underline;text-underline-offset:5px;padding-block:12px}
.explore-back{appearance:none;background:transparent;border:0;color:#d1c5b6;font:inherit;text-decoration:underline;text-underline-offset:5px;padding:12px 0;cursor:pointer}
.explore-actions a:focus-visible,.explore-actions button:focus-visible{outline:1px solid var(--amber);outline-offset:5px}
@media(max-width:760px){.explore-actions{gap:8px 20px}.explore-modes{margin-top:16px}}

/* Labels stay available while turned; only their front-view pointers hide. */
.spin-portrait.is-turned button.ability-note{opacity:1;visibility:visible;pointer-events:auto}
.spin-portrait.is-turned .ability-note::before,.spin-portrait.is-turned .ability-note::after{opacity:0}
button.ability-note{min-height:44px}
/* KIN is sized by screen height, his column by width: on tall narrow screens (iPad portrait) his hand reached the labels.
   He moves left only as far as it takes to keep --kin-label-gap between hand and label; otherwise he stays centred. */
@media(min-width:761px){
  .spin-portrait{--kin-label-gap:calc(2.5cqh + 14px);--kin-x:min(50cqw,calc(75cqw - 14cqh - var(--kin-label-gap)))}
  .spin-portrait .spin-stage{left:calc(var(--kin-x) - 50cqw);right:calc(50cqw - var(--kin-x))}
  .spin-portrait .ability-note{--point-x:var(--kin-x)}
  .spin-portrait .ability-note-hands{--point-x:calc(var(--kin-x) + 14cqh)}
  .spin-portrait .ability-note-body{--point-x:calc(var(--kin-x) + 7.7cqh)}
}
@media(max-width:760px){
  .spin-portrait{margin-top:56px}
  .spin-portrait .spin-stage{inset:0 12% 0 -12%}
  .spin-portrait .ability-note{left:64%;width:calc(24% - 12px);max-width:none;--point-x:38cqw;--reach:calc(64cqw - var(--point-x))}
  .spin-portrait .ability-note-hands{--point-x:calc(38cqw + 14cqh)}
  .spin-portrait .ability-note-body{--point-x:calc(38cqw + 7.7cqh)}
  .spin-portrait .ability-note-title{font-size:12px}
  .spin-portrait .ability-note-detail{font-size:11px;overflow-wrap:normal}
  .spin-controls{margin-inline:0 auto;margin-top:56px}   /* left, with the text column: the copy above reads from the left (Jesse, 2026-11-02) */
}
@media(hover:hover) and (pointer:fine){
  button.ability-note:hover .ability-note-title{color:var(--ink)}
}