/* THE MOTION SWITCH (js/motion.js): a header button beside Narration / Sound. It inherits the header button look (site.css, play-stage.css);
   this only adds the little wave and its two states. Still = a flat line, dimmed; Moving = the wave, gold (aria-pressed=true). */
#motionBtn{gap:6px}
#motionBtn .mo-ic{width:18px;height:11px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
#motionBtn .mo-flat,#motionBtn[data-mode=still] .mo-wave{display:none}
#motionBtn[data-mode=still] .mo-flat{display:inline}
#motionBtn[data-mode=still] .mo-ic{opacity:.8}
#motionBtn .mo-l{display:inline}
/* narrow header: icon-only like Narration / Sound (play-stage.css sets font-size:0 on those buttons) */
@media (max-width:999px){
  .ps-on #motionBtn .mo-ic{width:20px;height:12px}
  .ps-on #motionBtn[data-mode=still]{opacity:.7}
}

/* twin: in-game motion switch. The ENGINE's own @media (prefers-reduced-motion: reduce) blocks (/game/style.css, read-only), repeated here
   under body.ps-still so the switch stills them too. Same rules, same !important where the engine has it. */
html body.ps-still #card #choices:not(:empty)::before,html body.ps-still #card #choices > button{animation:none}
html body.ps-still #panel img,html body.ps-still #panel .ph,html body.ps-still #text,html body.ps-still #aside,html body.ps-still #choices > button,html body.ps-still #choices .menu,html body.ps-still #tapHint{animation:none!important}
html body.ps-still #panel img.panel-out,html body.ps-still .arc-card,html body.ps-still .arc-card.out{animation:none!important}
html body.ps-still #moreHint{animation:none}
html body.ps-still #setPanel,html body.ps-still #setScrim,html body.ps-still #setPanel > *{animation:none}
html body.ps-still .tray.verbs-auto .tr-verbs.rail{animation:none}
html body.ps-still #panel .hz{transition:none}
html body.ps-still .tray .tr-read.in{animation:none}
html body.ps-still #panel > #choices button{transition:none}
html body.ps-still .sc-btrack > i,html body.ps-still .sg-track > i{transition:none}
html body.ps-still .st-cards.dealt .stagecard,html body.ps-still .st-qte,html body.ps-still .stagecard.hurt,html body.ps-still .stagecard.won,html body.ps-still .st-cards.strike .st-clash{animation:none}

/* Surface Duo spanned (1114 px wide, hinge at 540-574): the extra button would push Narration under the hinge, so the header's three
   toggles go icon-only there, exactly as play-stage.css already draws them under 1000 px. */
@media (horizontal-viewport-segments: 2) and (min-width:1000px){
  .ps-on .pl-head .pl-nav button{font-size:0!important;letter-spacing:0;width:36px;min-width:36px;height:36px;min-height:36px;padding:0;position:relative}
  .ps-on #narrBtn::before{content:'🎙';font-size:16px}
  .ps-on #sndBtn::before{content:'🔊';font-size:16px}
  .ps-on #sndBtn[aria-pressed=false]::before{content:'🔇'}
  .ps-on #narrBtn[aria-pressed=false]{opacity:.55}
  .ps-on #narrBtn[aria-pressed=false]::after{content:'';position:absolute;left:8px;right:8px;top:50%;border-top:2px solid var(--red);transform:rotate(-40deg)}
  .ps-on #motionBtn .mo-ic{width:20px;height:12px}
  .ps-on #motionBtn[data-mode=still]{opacity:.7}
}