/* Sound toggle: a small taped paper tag in the bottom-left corner, with a hand-drawn speaker.
   sound.js adds it to the page and sets .snd-on on <html> while sound is on. */
.snd{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:45;
  display:flex;align-items:center;gap:6px;padding:7px 12px 7px 9px;background:#fff;color:var(--ink,#161616);
  border:2px solid var(--ink,#161616);border-radius:8px;box-shadow:3px 3px 0 var(--ink,#161616);
  font:700 19px/1 var(--hand,cursive);cursor:pointer;rotate:-2deg;transition:rotate .25s,box-shadow .15s,translate .15s,background .25s}
.snd::before{content:"";position:absolute;top:-9px;left:50%;width:34px;height:14px;margin-left:-17px;background:rgba(217,246,107,.75);rotate:3deg;border-radius:1px}
.snd:hover{rotate:0deg;translate:-1px -1px;box-shadow:4px 4px 0 var(--ink,#161616)}
.snd:active{translate:2px 2px;box-shadow:1px 1px 0 var(--ink,#161616)}
.snd svg{width:30px;height:24px;overflow:visible}
.snd path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.snd .spk{fill:var(--paper-2,#F1F0EA)}
.snd .w{opacity:0;transition:opacity .3s}
.snd .x{stroke:var(--tangerine,#FF6B35)}
.snd-on .snd{background:var(--lime,#D9F66B)}
.snd-on .snd .spk{fill:#fff}
.snd-on .snd .w{opacity:1}
.snd-on .snd .x{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .snd-on .snd .w{animation:snd-w 1.8s ease-in-out infinite}
  .snd-on .snd .w2{animation-delay:.25s}
  .snd-on .snd .w3{animation-delay:.5s}
}
@keyframes snd-w{0%,100%{opacity:1}50%{opacity:.25}}

.snd-hint{position:fixed;left:max(24px,env(safe-area-inset-left,0px));bottom:calc(max(16px,env(safe-area-inset-bottom,0px)) + 54px);z-index:45;
  margin:0;font:700 22px/1.1 var(--hand,cursive);color:var(--blue,#2B3BFF);pointer-events:none;rotate:-3deg;transition:opacity .8s}
.snd-hint svg{display:block;width:34px;height:26px;margin:4px 0 0 2px;overflow:visible}
.snd-hint path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.snd-hint.out{opacity:0}
@media (prefers-reduced-motion:no-preference){.snd-hint{animation:snd-in .6s cubic-bezier(.3,1.5,.5,1)}}
@keyframes snd-in{from{opacity:0;translate:0 10px}}
@media print{.snd,.snd-hint{display:none}}