main[data-view='menu'] {
  width: min(920px, 100vw);
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-content: flex-start;
  text-align: left;
  border: 2px solid var(--color-border);
  padding: 52px 28px 22px;
  background-color: var(--color-bg);
  align-items: stretch;

  & .menu-intro {
    flex: 1 1 100%;
    text-align: center
  }

  & .menu-section {
    border: var(--border);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;

    &[data-panel='create'] {
      flex: 1 1 min(100%, 224px);

      .input-stack {
        display: grid;
        gap: 10px
      }

      .segmented {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 3px;

        & button {
          flex: 1 1 20px;
          font-size: 15px;
          padding-inline: 8px
        }

        & .subtle {
          flex: 1 1 100%
        }
      }

      & [data-role='create-game'] {
        padding-inline: unset
      }
    }

    &[data-panel='rooms'] {
      flex: 2 1 280px;
      min-width: 0;

      .room-list {
        display: grid;
        gap: 10px;

        &>li.subtle {
          grid-column: 1 / -1
        }

        .room-card {
          border: var(--border);
          padding: 12px;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: space-between;
          gap: 14px;

          .room-copy {
            flex: 1;
            min-width: 0
          }

          .room-title {
            font-size: 18px;
            margin-bottom: 6px;
            word-break: break-word
          }

          .room-meta {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            opacity: 0.8
          }

          .pill {
            border: var(--border-nested);
            padding: 2px 6px;
            letter-spacing: 1px;
            text-transform: uppercase;

            &.public {
              border-color: var(--color-success);
              color: var(--color-success)
            }

            &.private {
              border-color: var(--color-warning);
              color: var(--color-warning)
            }

            &.world {
              border-color: #63e6ff;
              color: #63e6ff
            }
          }

          .room-code-row {
            flex-basis: 100%;
            display: grid;
            grid-template-columns: 140px 1fr;
            gap: 8px
          }

          [data-role='join-code-error'] {
            flex-basis: 100%;
            margin: 0;
            font-size: 13px
          }
        }
      }
    }

    &[data-panel='scores'] {
      flex: 1 1 100%;

      .score-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;

        & button {
          font-size: 13px;
          padding: 6px 10px
        }
      }

      .score-list {
        display: flex;
        flex-direction: column;
        gap: 8px;

        .score-row {
          display: flex;
          flex-wrap: wrap;
          flex: 1;
          gap: 10px;
          border: var(--border);
          padding: 10px 12px;
          align-items: center;
          font-size: 14px;

          & span:nth-child(1) {
            flex: 0 0 48px
          }

          & span:nth-child(2) {
            flex: 1 1 auto;
            min-width: 0;
            word-break: break-word
          }

          .mode-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: var(--border-nested);
            padding: 2px 6px;
            font-size: 12px;
            letter-spacing: 1px;
            text-transform: uppercase;

            &[data-mode='coop'] {
              color: var(--color-success);
              border-color: var(--color-success)
            }

            &[data-mode='deathmatch'] {
              color: var(--color-warning);
              border-color: var(--color-warning)
            }

            &[data-mode='ctf'] {
              color: #63e6ff;
              border-color: #63e6ff
            }
          }

          & .replay-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            background: transparent;
            border: none;
            color: var(--color-accent, #fff);
            cursor: pointer;
            padding: 0;

            & svg {
              width: 20px;
              height: 19px;
              display: block
            }
          }
        }
      }
    }
  }

  & .error-text {
    flex: 1 1 100%;
    color: var(--color-error)
  }
}