/* Keep all twelve category labels readable and separate from the SPIN control. */
.play-screen {
  overflow-x: hidden;
  overflow-y: auto;
}

.play-screen .wheel-stage {
  flex: 0 0 auto;
  margin: 8px auto 28px;
}

.play-screen .spin-button {
  position: relative;
  z-index: 8;
  flex: 0 0 auto;
  margin-top: 0;
}

.wheel-label {
  z-index: 5;
  width: 88px;
  margin-left: -44px;
  padding: 4px;
  border: 1px solid #ffffffd9;
  border-radius: 9px;
  color: #17121a !important;
  background: #fffffff0;
  font-size: 9px !important;
  font-weight: 900;
  line-height: 1.05;
  text-shadow: none;
  transform-origin: 44px 0 !important;
  overflow-wrap: anywhere;
}

.wheel-label b {
  margin-bottom: 1px;
  font-size: 15px !important;
}

.wheel-label.chosen {
  color: #17121a !important;
  background: #fff5ff;
  box-shadow: 0 0 0 4px #f3a2fb, 0 5px 15px #27123466;
  filter: none;
  text-decoration: none;
}

@media (min-width: 641px) and (max-height: 900px) {
  :root {
    --grammix-wheel-size: min(420px, max(250px, calc(100svh - 350px)));
    --wheel-label-radius: calc(var(--grammix-wheel-size) * .37);
  }

  .play-screen .wheel-stage {
    width: var(--grammix-wheel-size);
    height: var(--grammix-wheel-size);
    min-height: var(--grammix-wheel-size);
    margin: 4px auto 26px;
  }

  .wheel-label {
    width: 72px;
    margin-left: -36px;
    padding: 3px;
    font-size: 8px !important;
    transform-origin: 36px 0 !important;
  }

  .wheel-label b { font-size: 12px !important; }
  .play-screen .spin-button { min-height: 52px; margin-bottom: 8px; }
}

@media (max-width: 640px) {
  :root {
    --mobile-wheel-size: clamp(220px, min(calc(100vw - 60px), 46svh), 330px);
    --wheel-label-radius: calc(var(--mobile-wheel-size) * .35);
  }

  .play-screen {
    height: auto;
    min-height: calc(100svh - 74px);
    overflow-y: auto;
    padding-bottom: 28px;
  }

  .play-screen .wheel-stage {
    width: var(--mobile-wheel-size);
    height: var(--mobile-wheel-size);
    min-height: var(--mobile-wheel-size);
    flex-basis: var(--mobile-wheel-size);
    margin: 4px auto 20px;
  }

  .wheel-label {
    width: 62px;
    margin-left: -31px;
    padding: 2px 3px;
    font-size: 7px !important;
    transform-origin: 31px 0 !important;
  }

  .wheel-label b { font-size: 10px !important; }
  .play-screen .spin-button { width: min(220px, 78%); min-height: 52px; margin: 6px auto 0; }
}

@media (max-width: 380px) {
  :root {
    --mobile-wheel-size: clamp(205px, min(calc(100vw - 48px), 42svh), 285px);
    --wheel-label-radius: calc(var(--mobile-wheel-size) * .34);
  }

  .wheel-label {
    width: 56px;
    margin-left: -28px;
    font-size: 6px !important;
    transform-origin: 28px 0 !important;
  }
}