/* Projects: a console-menu page with its own palette. Only this page loads it. */
.wii-page {
  --wii-blue: #37bef4;
  --wii-title: #47bbe3;
  --wii-blue-text: #1386b8;
  --wii-bg-a: #f2f2f2;
  --wii-bg-b: #e9e9ea;
  --wii-tile-a: #f6f6f6;
  --wii-tile-b: #ececed;
  --wii-tile-edge: #bdbec1;
  --wii-mark: #dadbde;
  --wii-bar-top: #eeeef0;
  --wii-bar-bottom: #d3d4d7;
  --wii-socket-a: #c9cacd;
  --wii-socket-b: #e4e5e7;
  --wii-text: #84868a;
  --wii-strong: #55585f;
  --wii-pill: #ffffff;
  --wii-shadow: rgba(60, 64, 72, .22);
  --wii-strip-a: #d9d9d1;
  --wii-strip-b: #e1e1da;
  --wii-veil: #fff;
  color-scheme: light;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--wii-text);
  background: var(--wii-bg-a) repeating-linear-gradient(0deg, var(--wii-bg-a) 0 2px, var(--wii-bg-b) 2px 4px);
  min-height: 100dvh;
  display: block;
}

:root[data-theme="dark"] .wii-page {
  --wii-blue: #4cc8f7;
  --wii-title: #5fcdf6;
  --wii-blue-text: #6fd3fa;
  --wii-bg-a: #1e2127;
  --wii-bg-b: #191b20;
  --wii-tile-a: #2a2e36;
  --wii-tile-b: #24272e;
  --wii-tile-edge: #4c525e;
  --wii-mark: #3a3f49;
  --wii-bar-top: #2c3038;
  --wii-bar-bottom: #16181c;
  --wii-socket-a: #121418;
  --wii-socket-b: #24272e;
  --wii-text: #a9aeb7;
  --wii-strong: #d3d6dc;
  --wii-pill: #2f333c;
  --wii-shadow: rgba(0, 0, 0, .5);
  --wii-strip-a: #262930;
  --wii-strip-b: #2b2e35;
  --wii-veil: #000;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wii-page {
    --wii-blue: #4cc8f7;
    --wii-title: #5fcdf6;
    --wii-blue-text: #6fd3fa;
    --wii-bg-a: #1e2127;
    --wii-bg-b: #191b20;
    --wii-tile-a: #2a2e36;
    --wii-tile-b: #24272e;
    --wii-tile-edge: #4c525e;
    --wii-mark: #3a3f49;
    --wii-bar-top: #2c3038;
    --wii-bar-bottom: #16181c;
    --wii-socket-a: #121418;
    --wii-socket-b: #24272e;
    --wii-text: #a9aeb7;
    --wii-strong: #d3d6dc;
    --wii-pill: #2f333c;
    --wii-shadow: rgba(0, 0, 0, .5);
    --wii-strip-a: #262930;
    --wii-strip-b: #2b2e35;
    --wii-veil: #000;
    color-scheme: dark;
  }
}

.wii-page :focus-visible { outline: 3px solid var(--wii-blue); outline-offset: 3px; }

/*
 * Sizing follows the console: 4 x 3 channels, each 18vw wide with 15px gaps,
 * 16:9 on wide screens and 4:3 on squarer ones. Tiles shrink when the height
 * above the bar cannot fit the rows. Phones get 2 columns, tablets 3.
 */
.wii-menu {
  --bar-h: 20dvh;
  --top: 7dvh;
  --cols: 4;
  --rows: 3;
  --gap: 15px;
  --ratio: 1.778;
  --max-tile: 18vw;
  --avail: calc(100dvh - var(--bar-h) - var(--top) - 4dvh);
  --tile: min(var(--max-tile), calc((var(--avail) - (var(--rows) - 1) * var(--gap)) / var(--rows) * var(--ratio)));
  --page: calc(var(--cols) * var(--tile) + (var(--cols) - 1) * var(--gap));
  position: relative;
  min-height: 100dvh;
  padding-bottom: var(--bar-h);
}
@media (max-aspect-ratio: 4/3) {
  .wii-menu { --bar-h: 25dvh; --ratio: 1.333; }
}
@media (max-width: 959px) {
  .wii-menu { --cols: 3; --max-tile: 26vw; }
}
@media (max-width: 599px) {
  .wii-menu { --cols: 2; --rows: 4; --gap: 12px; --max-tile: 41vw; --ratio: 1.333; --bar-h: clamp(128px, 19dvh, 180px); --top: 5dvh; }
}
@media (max-width: 599px) and (min-height: 760px) {
  .wii-menu { --rows: 5; }
}
@media (max-width: 599px) and (max-height: 600px) {
  .wii-menu { --rows: 3; }
}
@media (min-width: 600px) and (max-height: 480px) {
  .wii-menu { --rows: 2; }
}

.wii-stage { position: relative; }
.wii-scroller { padding: var(--top) 16px 24px; }
.wii-scroller:focus { outline: none; }
.wii-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--tile));
  justify-content: center;
  gap: var(--gap);
}
.wii-slot { min-width: 0; }

/* Paged (JS): pages sit side by side; the neighbours peek in at the edges. */
.wii-menu[data-paged] { height: 100dvh; min-height: 0; overflow: hidden; }
.wii-menu[data-paged] .wii-scroller {
  display: flex;
  gap: var(--gap);
  height: calc(100dvh - var(--bar-h));
  padding: var(--top) calc((100vw - var(--page)) / 2) 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: calc((100vw - var(--page)) / 2);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.wii-menu[data-paged] .wii-scroller::-webkit-scrollbar { display: none; }
.wii-menu[data-paged] .wii-grid {
  flex: 0 0 var(--page);
  margin: 0;
  align-content: start;
  scroll-snap-align: start;
}

.wii-channel {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: var(--ratio);
  padding: 0;
  border: 3px solid var(--wii-tile-edge);
  border-radius: 9% / 15%;
  background: var(--wii-tile-a) repeating-linear-gradient(0deg, var(--wii-tile-a) 0 2px, var(--wii-tile-b) 2px 4px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 1px 2px rgba(0, 0, 0, .08);
  color: var(--wii-text);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms cubic-bezier(.16,1,.3,1), box-shadow 160ms cubic-bezier(.16,1,.3,1), border-color 160ms ease-out;
}
.wii-channel--blank { cursor: default; }
.wii-channel__mark {
  font: 900 calc(var(--tile) * .2) 'Arial Black', Arial, sans-serif;
  letter-spacing: -.04em;
  color: var(--wii-mark);
  user-select: none;
}
.wii-channel__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.wii-channel__name {
  padding: 0 10%;
  text-align: center;
  font-weight: 700;
  font-size: calc(var(--tile) * .085);
  line-height: 1.2;
  color: var(--wii-blue-text);
  overflow-wrap: anywhere;
}
a.wii-channel:hover, button.wii-channel:hover,
.wii-channel:focus-visible {
  border-color: var(--wii-blue);
  box-shadow: 0 0 0 2px var(--wii-blue), 0 0 16px rgba(55, 190, 244, .6);
  transform: scale(1.03);
  outline: none;
  z-index: 2;
}

/* Title bubble above a channel, delayed on hover the way the console does. */
.wii-channel__tip,
.wii-round__tip {
  position: absolute;
  z-index: 3;
  width: max-content;
  max-width: min(22rem, 70vw);
  padding: .5em 1.4em;
  border: 1px solid #9a9a9a;
  border-radius: 999px;
  background: var(--wii-pill);
  color: var(--wii-strong);
  box-shadow: 0 4px 10px var(--wii-shadow);
  font-size: clamp(.9rem, 3.2dvh, 1.35rem);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0;
  transition: opacity 250ms ease-out, transform 250ms ease-out;
}
.wii-channel__tip { bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) scale(.95); }
.wii-channel:hover .wii-channel__tip { opacity: 1; transform: translateX(-50%) scale(1); transition-delay: 500ms; }
.wii-channel:focus-visible .wii-channel__tip { opacity: 1; transform: translateX(-50%) scale(1); }

.wii-empty {
  position: absolute;
  top: 1.5dvh;
  left: 0;
  right: 0;
  z-index: 1;
  margin: 0;
  text-align: center;
  font-size: clamp(.85rem, 2.2dvh, 1rem);
  font-weight: 600;
  color: var(--wii-text);
}

/* Page arrows: the console's blue chevrons, only when a page exists that way. */
.wii-arrow {
  position: absolute;
  top: calc((100dvh - var(--bar-h) + var(--top)) / 2);
  z-index: 4;
  width: 48px;
  height: 72px;
  margin-top: -36px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.wii-arrow--prev { left: clamp(0px, 4vw, 60px); }
.wii-arrow--next { right: clamp(0px, 4vw, 60px); }
.wii-arrow span {
  display: block;
  width: 26px;
  height: 46px;
  margin: auto;
  background: var(--wii-blue);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 1px #fff);
  transition: transform 120ms cubic-bezier(.16,1,.3,1);
}
.wii-arrow--prev span { transform: scaleX(-1); }
.wii-arrow--next:hover span { transform: scale(1.25); }
.wii-arrow--prev:hover span { transform: scaleX(-1) scale(1.25); }

/* Bottom bar. */
.wii-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  height: var(--bar-h);
}
.wii-bar__shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wii-bar__fill { fill: url(#wii-bar-gradient); }
.wii-bar__stop-top { stop-color: var(--wii-bar-top); }
.wii-bar__stop-bottom { stop-color: var(--wii-bar-bottom); }
.wii-bar__line { fill: none; stroke: var(--wii-blue); stroke-width: 2.5; vector-effect: non-scaling-stroke; }

.wii-bar__center {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 60vw;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}
.wii-bar__title,
.wii-bar__clock {
  position: absolute;
  left: 0;
  right: 0;
  top: 2%;
  height: 40%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 250ms ease-in-out;
}
.wii-bar__title {
  font-size: clamp(1.3rem, 5dvh, 2.6rem);
  color: var(--wii-title);
  white-space: nowrap;
}
.wii-bar__clock {
  gap: .12em;
  font-size: clamp(1.4rem, 7dvh, 3.6rem);
  color: var(--wii-text);
  opacity: 0;
}
.wii-menu[data-clock] .wii-bar__title { opacity: 0; }
.wii-menu[data-clock] .wii-bar__clock { opacity: 1; }
.wii-lcd__digit { height: 100%; width: auto; fill: currentColor; transform: skewX(-4deg); }
.wii-lcd__colon {
  width: .4em;
  height: 100%;
  background:
    radial-gradient(circle, currentColor 0 .07em, transparent .08em) 50% 32% / 100% .3em no-repeat,
    radial-gradient(circle, currentColor 0 .07em, transparent .08em) 50% 68% / 100% .3em no-repeat;
}
.wii-bar__date {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8%;
  margin: 0;
  font-size: clamp(1.2rem, 5dvh, 2.5rem);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--wii-text);
}

/* Recessed sockets at the screen edges that hold the round buttons. */
.wii-socket {
  position: absolute;
  bottom: calc(var(--bar-h) * .1);
  height: calc(var(--bar-h) * .7);
  width: calc(var(--bar-h) * .6 + clamp(16px, 6dvh, 56px) + var(--bar-h) * .08);
  background: linear-gradient(var(--wii-socket-a), var(--wii-socket-b));
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, .14), 0 1px 0 rgba(255, 255, 255, .7);
}
.wii-socket--left { left: 0; border-radius: 0 999px 999px 0; }
.wii-socket--right { right: 0; border-radius: 999px 0 0 999px; }

/* Round corner buttons: Home on the left, the theme switch (or another action) on the right. */
.wii-round {
  position: absolute;
  bottom: calc(var(--bar-h) * .15);
  display: grid;
  place-items: center;
  width: calc(var(--bar-h) * .6);
  aspect-ratio: 1;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #8fd3f2;
  background: radial-gradient(circle at 50% 28%, #ffffff, #eeeff1 55%, #d9dadd);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .08), 0 0 0 3px rgba(255, 255, 255, .9), 0 2px 6px var(--wii-shadow);
  color: #a3a5a9;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 150ms linear;
}
:root[data-theme="dark"] .wii-page .wii-round { background: radial-gradient(circle at 50% 28%, #4a4f5a, #343841 55%, #282b32); box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .3), 0 0 0 3px rgba(255, 255, 255, .1), 0 2px 6px var(--wii-shadow); color: #c9cdd5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wii-page .wii-round { background: radial-gradient(circle at 50% 28%, #4a4f5a, #343841 55%, #282b32); box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .3), 0 0 0 3px rgba(255, 255, 255, .1), 0 2px 6px var(--wii-shadow); color: #c9cdd5; }
}
.wii-round--left { left: clamp(16px, 6dvh, 56px); }
.wii-round--right { right: clamp(16px, 6dvh, 56px); }
.wii-round > svg { width: 48%; height: 48%; }
.wii-round__img { width: 70%; height: 70%; object-fit: contain; border-radius: 50%; }
.wii-round:hover, .wii-round:focus-visible { transform: scale(1.1); }
.wii-round__tip { bottom: calc(100% + 18px); transform: scale(.94); }
.wii-round--left .wii-round__tip { left: -4px; transform-origin: bottom left; }
.wii-round--right .wii-round__tip { right: -4px; transform-origin: bottom right; }
.wii-round:hover .wii-round__tip { opacity: 1; transform: scale(1); transition-delay: 500ms; }
.wii-round:focus-visible .wii-round__tip { opacity: 1; transform: scale(1); }

/* Theme switch face: show the mode a press switches to. */
.wii-round__theme { display: grid; place-items: center; width: 48%; height: 48%; }
.wii-round__theme svg { width: 100%; height: 100%; }
.wii-page .wii-round__theme--to-light { display: none; }
:root[data-theme="dark"] .wii-page .wii-round__theme--to-light { display: grid; }
:root[data-theme="dark"] .wii-page .wii-round__theme--to-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wii-page .wii-round__theme--to-light { display: grid; }
  :root:not([data-theme="light"]) .wii-page .wii-round__theme--to-dark { display: none; }
}
.wii-round__tip .wii-round__theme--to-dark { display: inline; }
:root[data-theme="dark"] .wii-page .wii-round__tip .wii-round__theme--to-light { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wii-page .wii-round__tip .wii-round__theme--to-light { display: inline; }
}

/*
 * Channel screen: black surround, a rounded screen filled edge to edge by the
 * artwork, and the console's light striped strip with glossy pills. The strip
 * stays light in both themes, as it does on the console.
 */
.wii-preview {
  width: min(70vw, calc(76dvh * 1.5));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 7.5% / 11%;
  overflow: hidden;
  /* Transparent so no light edge shows at the anti-aliased rounded corners. */
  background: transparent;
  color: #f4f6f9;
  transform-origin: 0 0;
}
.wii-preview::backdrop { background: #000; }
/* Covers the screen while it zooms, so it fades to the theme colour instead of squashing. */
.wii-preview__veil {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  background: var(--wii-veil);
  opacity: 0;
  pointer-events: none;
}
.wii-preview[open] { display: flex; flex-direction: column; }
@media (max-aspect-ratio: 4/3) {
  .wii-preview { width: 94vw; border-radius: 8% / 9%; }
}
.wii-preview__screen {
  position: relative;
  aspect-ratio: 1161 / 639;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
}
/* Darkens the whole screen, including any transparent parts of the artwork. */
.wii-preview__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 20, .58);
  opacity: 0;
  transition: opacity 600ms ease;
}
.wii-preview[data-info] .wii-preview__screen::after { opacity: 1; }
.wii-preview__screen:focus-visible { outline: 3px solid #8fd3f2; outline-offset: -6px; }
.wii-preview__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 600ms ease, transform 600ms ease;
}
/* Details: hidden at first, then the art darkens and blurs and the words rise in. */
.wii-preview__text {
  position: relative;
  z-index: 2;
  max-width: 78%;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms ease 120ms, transform 420ms cubic-bezier(.16,1,.3,1) 120ms;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
  pointer-events: none;
}
.wii-preview[data-info] .wii-preview__art { filter: blur(10px) saturate(.9); transform: scale(1.08); }
.wii-preview[data-info] .wii-preview__text { opacity: 1; transform: none; }
.wii-preview__category { margin: 0 0 .3em; font-size: clamp(.75rem, 1.2vw, .95rem); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8fd3f2; }
.wii-preview__title { margin: 0; font-size: clamp(1.5rem, 3.6vw, 3rem); font-weight: 600; line-height: 1.1; color: #fff; }
.wii-preview__summary { margin: .55em auto 0; max-width: 46ch; font-size: clamp(.95rem, 1.5vw, 1.2rem); line-height: 1.5; color: #e7ebf1; }
.wii-preview__strip {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 16px;
  min-height: clamp(84px, 17dvh, 150px);
  padding: 12px 6%;
  background: #d9d9d1 repeating-linear-gradient(0deg, #d9d9d1 0 2px, #e1e1da 2px 4px);
}
.wii-pill {
  flex: 0 1 15em;
  min-height: clamp(48px, 5vw, 76px);
  display: inline-grid;
  place-items: center;
  padding: 0 1.2em;
  border: 3px solid #8fd3f2;
  border-radius: 999px;
  background: linear-gradient(#ffffff 0%, #f1f3f6 42%, #dfe4ea 58%, #e8ebf0 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .95), inset 0 -2px 4px rgba(0, 0, 0, .06), 0 2px 5px rgba(0, 0, 0, .18);
  color: #444;
  font-family: inherit;
  font-size: clamp(1.1rem, 2vw, 1.9rem);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 150ms linear;
}
.wii-pill:hover, .wii-pill:focus-visible { transform: scale(1.05); }
/* No address: Start stays in place but greyed out, like the console's disabled button. */
.wii-pill[aria-disabled="true"] {
  border-color: #c8c8c8;
  background: linear-gradient(#ececec, #d9d9d9);
  color: #a9a9a9;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .6);
  cursor: default;
  pointer-events: none;
}
@media (max-width: 599px) {
  .wii-pill { flex: 1 1 0; }
}

/* Page entrance: the bar rises and the channels pop in, row by row. */
.wii-js .wii-menu:not([data-paged]) .wii-scroller { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .wii-menu[data-entering] .wii-bar { animation: wii-bar-in 560ms cubic-bezier(.16,1,.3,1) both; }
  .wii-menu[data-entering] .wii-slot { animation: wii-slot-in 460ms cubic-bezier(.2,.9,.3,1.15) both; animation-delay: calc(140ms + var(--i, 0) * 32ms); }
  .wii-menu[data-entering] .wii-sound { animation: wii-fade 400ms ease-out 420ms both; }
}
@keyframes wii-bar-in { from { transform: translateY(100%); } }
@keyframes wii-slot-in { from { opacity: 0; transform: scale(.82); } }
@keyframes wii-fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .wii-page *, .wii-page *::before, .wii-page *::after { transition-duration: 0ms !important; transition-delay: 0ms !important; }
}

/* Narrow screens: keep the clock and date clear of the round buttons. */
@media (max-width: 599px) {
  .wii-bar__clock { font-size: min(7dvh, 10vw); }
  .wii-bar__title { font-size: min(5dvh, 7vw); }
  .wii-bar__date { font-size: min(4.4dvh, 5.4vw); bottom: 6%; }
  .wii-round { width: calc(var(--bar-h) * .5); bottom: calc(var(--bar-h) * .12); }
  .wii-round--left { left: 12px; }
  .wii-round--right { right: 12px; }
  .wii-socket { width: calc(var(--bar-h) * .5 + 22px); height: calc(var(--bar-h) * .6); }
}

.wii-lcd__meridiem {
  align-self: flex-end;
  margin-left: .2em;
  margin-bottom: .1em;
  font-size: .36em;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
}

/* Sound toggles: small pills in the top-right corner, only shown with JS. */
.wii-sound {
  position: fixed;
  top: clamp(8px, 1.6dvh, 16px);
  right: clamp(10px, 2vw, 24px);
  z-index: 6;
  display: flex;
  gap: 8px;
}
.wii-sound[hidden] { display: none; }
.wii-sound__btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px 0 10px;
  border: 2px solid var(--wii-tile-edge);
  border-radius: 999px;
  background: var(--wii-pill);
  color: var(--wii-text);
  font: 600 .9rem/1 inherit;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 2px 5px var(--wii-shadow);
  transition: transform 150ms linear, border-color 150ms ease-out, color 150ms ease-out;
}
.wii-sound__btn svg { width: 22px; height: 22px; }
.wii-sound__btn:hover { transform: scale(1.05); }
.wii-sound__btn[aria-pressed="true"] { border-color: #8fd3f2; color: var(--wii-blue-text); }
.wii-sound__btn[aria-pressed="true"] .wii-sound__mute,
.wii-sound__btn[aria-pressed="false"] .wii-sound__wave { display: none; }
@media (max-width: 599px) {
  .wii-sound__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .wii-sound__btn { width: 44px; padding: 0; justify-content: center; }
}