@media (min-width: 1151px) {
  .create-panel {
    padding-left: 32px;
  }
  .join-panel {
    padding-left: 13%;
    padding-right: 32px;
  }
  #join-form {
    width: min(315px, 100%);
    margin-inline: auto;
  }
  .panel h2 {
    font-size: clamp(23px, 2.05vw, 33px);
  }
  .create-panel > p,
  .join-panel > p,
  .collection-panel > p,
  .empty-social > p {
    margin-left: 43px;
  }
}
@media (min-width: 1181px) {
  .panel {
    --wheel-cutout-x: 126.5%;
    --wheel-cutout-y: 96.2%;
    --wheel-cutout-radius: 238px;
    position: relative;
    -webkit-mask-image: radial-gradient(
      circle at var(--wheel-cutout-x) var(--wheel-cutout-y),
      transparent 0 var(--wheel-cutout-radius),
      #000 calc(var(--wheel-cutout-radius) + 1px)
    );
    mask-image: radial-gradient(
      circle at var(--wheel-cutout-x) var(--wheel-cutout-y),
      transparent 0 var(--wheel-cutout-radius),
      #000 calc(var(--wheel-cutout-radius) + 1px)
    );
  }
  .panel::after {
    content: '';
    position: absolute;
    z-index: 4;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
      circle at var(--wheel-cutout-x) var(--wheel-cutout-y),
      transparent 0 var(--wheel-cutout-radius),
      var(--panel-edge) calc(var(--wheel-cutout-radius) + 1px),
      transparent calc(var(--wheel-cutout-radius) + 2px)
    );
  }
  .join-panel,
  .social-panel {
    --wheel-cutout-x: -26.5%;
  }
  .collection-panel,
  .social-panel {
    --wheel-cutout-y: -5.9%;
  }
}
@media (min-width: 1450px) {
  .roulette {
    margin-top: 40px;
  }
  .panel h2 {
    gap: 12px;
  }
  .create-panel > p,
  .collection-panel > p {
    margin-left: 68px;
  }
  .join-panel h2 {
    margin-left: -24px;
  }
  .join-panel > p {
    margin-left: 44px;
  }
  .social-panel {
    padding-left: 96px;
  }
  .social-panel h2 {
    gap: 25px;
  }
  .empty-social > p {
    margin-left: 68px;
  }
  .social-panel .portraits {
    position: relative;
    left: -16px;
    grid-template-columns: repeat(4, minmax(0, 100px));
    margin-bottom: 14px;
  }
  .group-preview {
    grid-template-columns: 160px minmax(0, 1fr);
    margin-left: -64px;
  }
  .group-heading svg {
    width: 32px;
    height: 32px;
  }
  .group-tokens {
    width: min(330px, 100%);
  }
}
@media (min-width: 1181px) and (max-width: 1449px) {
  .panel {
    --wheel-cutout-y: calc(42px + 11.4vw);
    --wheel-cutout-radius: calc(11.4vw + 10px);
  }
  .collection-panel,
  .social-panel {
    --wheel-cutout-y: calc(42px + 11.4vw - 281px);
  }
  .roulette {
    width: 120%;
    margin-top: 42px;
    margin-left: -10%;
  }
  .wheel-center {
    inset: 30%;
  }
}
@media (max-width: 1150px) {
  .topbar {
    width: 94%;
    gap: 22px;
    padding: 12px 22px;
  }
  .local-tag {
    display: none;
  }
  main {
    width: 94%;
  }
  .stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1fr);
  }
  .panel {
    padding: 20px;
  }
  .panel h2 {
    font-size: 23px;
  }
  .panel > p {
    font-size: 15px;
  }
  .create-panel > p,
  .join-panel > p,
  .collection-panel > p,
  .empty-social > p {
    margin-left: 39px;
  }
  .create-panel {
    padding-right: 20px;
  }
  .create-panel > button {
    width: 80%;
    margin-left: 0;
  }
  .join-panel {
    padding-left: 10%;
    padding-right: 18px;
  }
  #join-form {
    width: 100%;
    margin-left: 0;
  }
  .roulette {
    width: 125%;
    margin-left: -12.5%;
    margin-top: 55px;
  }
  .games {
    gap: 7px;
  }
  .game strong {
    font-size: 13px;
  }
  .game small {
    font-size: 12px;
  }
  .portraits {
    gap: 7px;
  }
}
@media (max-width: 1180px) {
  .topbar {
    width: 100%;
    border-radius: 0;
    padding: 12px 20px;
  }
  .utilities {
    gap: 10px;
  }
  main {
    width: 92%;
    padding-top: 24px;
  }
  .headline {
    margin-bottom: 20px;
  }
  .stage {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 18px;
  }
  .roulette {
    grid-area: 1 / 1 / 2 / 3;
    width: min(74vw, 440px);
    margin: 0 auto 8px;
  }
  .create-panel {
    grid-area: 2 / 1;
    min-height: 280px;
    padding: 22px;
  }
  .join-panel {
    grid-area: 2 / 2;
    padding: 22px;
  }
  #join-form {
    width: 100%;
    margin-left: 0;
  }
  .collection-panel {
    grid-area: 3 / 1;
    margin: 0;
  }
  .social-panel {
    grid-area: 3 / 2;
    margin: 0;
  }
  .create-panel > button {
    width: 80%;
    margin-left: 10%;
  }
  .game strong {
    min-height: 44px;
  }
}
@media (max-width: 620px) {
  .topbar {
    gap: 12px;
    padding: 10px 16px;
  }
  .brand {
    margin-left: 0;
    font-size: 21px;
  }
  .brand img {
    width: 34px;
    height: 34px;
  }
  nav {
    gap: 10px;
    font-size: 16px;
  }
  nav a {
    padding: 8px;
  }
  .utilities {
    gap: 8px;
    margin-right: 0;
  }
  .utility-icon,
  .profile-preview {
    display: none;
  }
  .utilities select {
    padding: 8px 24px 8px 8px;
  }
  main {
    width: calc(100% - 32px);
  }
  .headline h1 {
    font-size: clamp(28px, 7vw, 38px);
    letter-spacing: -0.8px;
  }
  .stage {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .roulette {
    order: -1;
    width: min(88vw, 400px);
    margin: 0 auto 8px;
  }
  .create-panel,
  .join-panel,
  .collection-panel,
  .social-panel {
    grid-area: auto;
    margin: 0;
    min-width: 0;
  }
  .create-panel {
    min-height: 280px;
  }
  .join-panel {
    min-height: 260px;
  }
  .game strong {
    font-size: 14px;
  }
  .portraits {
    max-width: 390px;
    gap: 16px;
  }
  .wheel-center {
    inset: 30%;
    padding: 0;
  }
}
@media (max-width: 410px) {
  .panel {
    padding: 18px;
  }
  .game strong {
    font-size: 13px;
    padding-inline: 7px;
  }
  .game small {
    padding-inline: 7px;
  }
  .games {
    gap: 7px;
  }
  .portraits {
    gap: 10px;
  }
}
@media (max-width: 460px) {
  .group-preview {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .group-tokens {
    width: 100%;
  }
}