/* WP-A: pause card #pauseWrap > #pause (PLAN §2.4, §4.7, [LM §2.4]); built by src/pause.js.
   Portrait: one column (title, ▶ 72+ dp, how to play / restart / map 74 dp, music / effects toggles 56+ dp).
   Short landscape screens: two columns so the card fits 360 px of height. Gaps between targets >= 8 dp.
   #stage.hpause: the YouTube pause freezes every CSS animation too. */
#pause{position:relative;box-sizing:border-box;width:min(340px,92vw);max-height:calc(100% - 16px);overflow:auto;
  background:var(--cream);border:4px solid var(--ink);border-radius:30px;box-shadow:0 9px 0 rgba(58,42,34,.45);
  padding:14px 14px 18px;display:flex;flex-direction:column;align-items:center;gap:14px;
  animation:pauseIn .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes pauseIn{from{transform:scale(.5) translateY(30px);opacity:0}}
#pause .ptop{display:flex;align-items:center;gap:10px}
#pause h2{margin:0;font-size:30px;line-height:1.1;font-weight:900;letter-spacing:.5px;color:var(--ink)}
#pause .pico{width:38px;height:38px;border-radius:50%;border:3px solid var(--ink);box-sizing:border-box;
  background:radial-gradient(circle at 35% 30%,#E8B57A,#B07A45 70%);display:flex;align-items:center;justify-content:center;gap:5px;
  box-shadow:0 3px 0 rgba(58,42,34,.35)}
#pause .pico::before,#pause .pico::after{content:"";width:5px;height:14px;border-radius:2px;background:var(--cream);box-shadow:0 0 0 2px var(--ink)}
#pausePlay{width:150px;height:88px}
#pausePlay svg{width:58px;height:58px}
#pause .prow{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}
#pause .ptogs{gap:14px}
#pause .ptog{pointer-events:auto;position:relative;box-sizing:border-box;min-width:84px;min-height:64px;padding:6px 10px 7px;
  border:3px solid var(--ink);border-radius:18px;background:#fff;box-shadow:0 4px 0 rgba(58,42,34,.35);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;font:800 14px/1.1 "Trebuchet MS","Segoe UI",system-ui,sans-serif;color:var(--ink);
  transition:transform .08s}
#pause .ptog:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(58,42,34,.35)}
#pause .ptog svg{width:32px;height:32px}
#pause .ptog .poff{position:absolute;left:50%;top:6px;transform:translateX(-50%);display:none}
#pause .ptog[aria-pressed="false"]{background:#E8D9B9}
#pause .ptog[aria-pressed="false"] svg:first-child{opacity:.45}
#pause .ptog[aria-pressed="false"] .poff{display:block}
#pause button:focus-visible{outline:4px solid #3FB6E8;outline-offset:3px}
/* short landscape stage (hud.js stageLayout: .land = w > h, .short = h < 520): one row of buttons */
#stage.land.short #pause{width:min(600px,calc(var(--sw,100vw) * .86));flex-direction:row;flex-wrap:wrap;justify-content:center;align-content:center;gap:10px 18px;padding:12px 16px 14px}
#stage.land.short #pause .ptop{width:100%;justify-content:center}
#stage.land.short #pause h2{font-size:26px}
#stage.land.short #pausePlay{width:132px;height:80px}
#stage.hpause *,#stage.hpause *::before,#stage.hpause *::after{animation-play-state:paused!important}