/* audio.css: the SOUND tab (audio.js builds it).
   A KCC felt patch hanging from the top RIGHT of the page on a bit of twine, the mirror of the visitor tab
   (#visits, top left, board.css); the felt, satin rim, running stitch and press bounce come from depth.css.
   Click it (or press M) to switch the sound off and on: on = laurel felt, ON in Kick-green thread; off = cream felt,
   OFF in brick-red thread, a red X stitched over the waves. */
#sndTab{position:fixed;top:0;right:16px;z-index:9;font:12px/1 'Barlow Condensed','Roboto Slab',sans-serif}
#sndTab::before{content:'';position:absolute;right:19px;top:0;width:2px;height:14px;background:#b88e55;box-shadow:1px 0 0 rgba(40,16,4,.35),-.5px 0 0 rgba(255,214,150,.4)}
#sndBtn{margin-top:11px;display:flex;align-items:center;gap:.5em;cursor:pointer;color:var(--thread);
  padding:.55em 1.6em .48em .75em;border-radius:6px;rotate:2deg;transform-origin:calc(100% - 20px) 0;
  box-shadow:var(--dp-shadow-hang),var(--dp-pillow);transition:rotate .25s}
/* the brass brad the twine is tied through */
#sndBtn::before{content:'';position:absolute;right:9px;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;
  background:radial-gradient(circle at 62% 36%,#fff4cc,#e3b85a 30%,#8a6220 70%,#4b3210);box-shadow:-1.5px 2px 1.5px rgba(20,8,1,.55),inset 0 0 0 .5px rgba(60,36,8,.6)}
#sndBtn:hover{rotate:0deg}
#sndBtn:focus-visible{outline:2px solid var(--cb-kick);outline-offset:3px}
#sndBtn .snd-k{font:12px/1 'Homecoming Parade','NOC Varsity',sans-serif;letter-spacing:.1em;padding-top:.15em}
#sndBtn .snd-v{font:700 15.5px/1 'Barlow Condensed',sans-serif;letter-spacing:.06em;min-width:2.1em;text-align:left;color:var(--cb-kick)}
#sndBtn svg{width:21px;height:18px;flex:none;overflow:visible;filter:drop-shadow(.4px -.4px 0 rgba(255,255,255,.25)) drop-shadow(-.7px .9px 0 rgba(0,0,0,.45))}
#sndBtn svg>path{fill:var(--thread)}
#sndBtn .snd-w{stroke:var(--thread);transition:opacity .2s}
#sndBtn .snd-x{opacity:0;transition:opacity .2s}
/* off: cream felt, the waves go, a red X goes on, the label goes brick red */
#sndTab.off #sndBtn{--felt:#f2e3c0;--thread:#3a2412;
  text-shadow:.45px -.45px 0 rgba(255,255,255,.6),-.6px .8px 0 rgba(60,30,8,.35),-1px 1.5px 1px rgba(60,30,8,.2);
  box-shadow:var(--dp-shadow-hang),inset 2px -3px 5px rgba(90,50,10,.2),inset -1px 1.5px 2px rgba(255,250,235,.5)}
#sndTab.off .snd-w{opacity:0}
#sndTab.off .snd-x{opacity:1}
#sndTab.off .snd-v{color:#b02a15}
/* a cheer jiggles the tag on its twine (only while sound is on) */
#sndTab.jig #sndBtn{animation:snd-jig .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes snd-jig{0%{rotate:2deg}30%{rotate:-4deg}60%{rotate:3deg}100%{rotate:2deg}}
@media (max-width:520px){#sndTab{right:12px}}
@media (prefers-reduced-motion:reduce){#sndBtn{transition:none}#sndTab.jig #sndBtn{animation:none}}