/* Songbound teaser: the corner controls, the music toggle and the pause control for the
   moving background (WCAG 2.2.2). Each works alone: pausing the picture never stops the
   music, and the other way round. layouts.css moves the corner per screen shape. */
.corner {
  position: absolute;
  right: var(--edge-r);
  bottom: var(--edge-b);
  z-index: 2;
  display: flex;
  gap: 8px;
}

.ctl {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-image: url("/assets/kit/panel_night.png") 10 fill / 20px stretch;
  image-rendering: pixelated;
}

.ctl[hidden] { display: none; }

.ctl:hover { filter: brightness(1.2); }

.ctl:focus-visible { outline: var(--px) solid var(--parchment-light); outline-offset: var(--px); }

/* Pause: two bars, or a play triangle while paused. */
.pause-bg .glyph {
  display: block;
  width: 12px;
  height: 14px;
  border-inline: 4px solid var(--gold-light);
}

.pause-bg[aria-pressed="true"] .glyph {
  width: 0;
  height: 0;
  border-inline: 0;
  border-left: 12px solid var(--gold-light);
  border-block: 7px solid transparent;
  margin-left: 3px;
}

/* Music: a pixel note, drawn on a 12 px grid at twice size. Off, it is dimmed and struck
   through; on, it is lit. */
.music svg {
  width: 24px;
  height: 24px;
  shape-rendering: crispEdges;
}

.music .note { fill: var(--gold-light); }

.music .strike { fill: #de5448; } /* palette.json hp_low */

.music[data-on="false"] .note { opacity: 0.55; }

.music[data-on="true"] .strike { display: none; }