/* Songbound: the corner control, the music toggle (the page's one control: owner, 2026-10-09, no scenery
   pause; reduced motion still holds the scenery).
   Shared by the teaser and the lore page (tools/web/lore_build.py copies this file there); each page's
   layout places the corner. */
.corner {
  position: absolute;
  right: var(--edge-r);
  bottom: var(--edge-b);
  z-index: 2;
  display: flex;
  gap: 8px;
}

.ctl {
  position: relative;
  width: 56px;                                /* the 16 px icon at twice, inside the plate's frame */
  height: 56px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-image: url("/assets/kit/corner.png") 10 fill / 20px stretch;
  image-rendering: pixelated;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

.ctl[hidden] { display: none; }

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

/* The icons (tools/pixel/ui_corner_icons.py), at twice. */
.ctl img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}

/* The tip: what a tap does, on a small night plate under the button. */
.ctl::after {
  position: absolute;
  top: var(--tip-top, calc(100% + 6px));      /* a page with its corner low sets the tip above */
  bottom: var(--tip-bottom, auto);
  right: var(--tip-right, 0);                 /* a button at a left edge sets the tip to start there */
  left: var(--tip-left, auto);
  padding: 3px 8px 5px;
  white-space: nowrap;
  font: 20px/1 "Jersey 10", ui-monospace, monospace;
  color: var(--parchment-light);
  background: var(--night-dark);
  border: 2px solid var(--outline);
  box-shadow: inset 0 0 0 2px var(--night-light);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
}

.ctl:focus-visible::after,
.ctl.is-told::after { opacity: 1; }

@media (hover: hover) {
  .ctl:hover { filter: brightness(1.2); }
  .ctl:hover::after { opacity: 1; }
}

/* Music: the gold notes, or grey and struck through while off; they pulse while loading. */
.music::after { content: attr(data-tip); }
.music[data-state="off"] .when-on, .music:not([data-state="off"]) .when-off { display: none; }
.music[data-state="loading"] .when-on { animation: hum 0.9s steps(2) infinite alternate; }
/* A returning visitor who had the music on: the grey notes glow, waiting for a tap. */
.music.is-wanted .when-off { filter: drop-shadow(0 0 3px rgb(250 222 140 / 0.8)); }

@keyframes hum { from { opacity: 0.4; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .music[data-state="loading"] .when-on { animation: none; opacity: 0.8; }
  .ctl::after { transition: none; }
}