@media (max-width: 768px) {
  #ui-layer {
    position: fixed;
  }

  .ui-screen {
    left: 50svw;
    top: 50svh;
    width: min(76vw, 400px);
    max-height: 80svh;
    font-size: 9.5px;
  }

  .ui-screen-close {
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    font-size: 20px;
  }

  /* Panel placement */
  .slot-upper-left  { margin-left: -90vw; margin-top: -70vh; }
  .slot-lower-left  { margin-left: -90vw; margin-top:  70vh; }
  .slot-above       { margin-left: 0;        margin-top: -100svh; }
  .slot-below       { margin-left: 0;        margin-top:  100svh; }
  .slot-upper-right { margin-left:  90vw; margin-top: -70vh; }
  .slot-lower-right { margin-left:  90vw; margin-top:  70vh; }

  .color-fab-wrap,
  .audio-fab-wrap {
    position: fixed;
    bottom: 14px;
    z-index: 100;
  }

  .color-fab-wrap {
    right: 14px;
  }

  .audio-fab-wrap {
    left: 14px;
  }

  #color-fab,
  #audio-fab {
    width: 42px;
    height: 42px;
  }

  .color-menu,
  .audio-menu {
    bottom: 52px;
  }

  .color-menu {
    min-width: 150px;
  }

  .audio-menu {
    min-width: 180px;
  }

  #cube-instructions {
    top: 16%;
    width: calc(100vw - 32px);
    max-width: 360px;
    box-sizing: border-box;
    padding: 0 8px;
    font-size: clamp(7px, 2.2vw, 10px);
    white-space: normal;
  }

  .desktop-instructions {
    display: none;
  }

  .mobile-instructions {
    display: block;
  }

  .introduction {
    position: absolute;
    left: 50%;
    top: 10%;

    transform: translateX(-50%);
    z-index: 19;
    pointer-events: none;

    color: rgb(207, 200, 200);
    font-family: var(--font-retro);
    font-size: 12px;
    text-align: center;
    text-shadow: 0 0 8px white;

    opacity: 0;
    transition: opacity 1s ease;
  }
}


@media (hover: hover) and (pointer: fine) {
  .ui-panel-link:hover {
    color: #b8acac56;
    background: color-mix(in srgb, currentColor 15%, transparent);
  }

  body.light-mode .ui-panel-link:not(.color-btn):hover {
    color: #111;
    background: rgba(0,0,0,0.08);
  }
}