.main {
  justify-content: normal;

  @media (orientation: portrait) {
    padding: 0;
  }
}

.golf-match {
  --border: 2px solid var(--box-border-color);
  --border-radius: 8px;
  --bg-color: var(--box-bg-color);
  --golf-match-content-font-size: var(--content-font-size);
  --team-a-color: #ff0000;
  --team-b-color: #0000ff;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    ".         title      ."
    ".         main-match ."
    "sub-match sub-match  sub-match"
    ".         buttons    .";
  gap: 2rem;
  padding: 2rem 2rem 0 2rem !important;
  width: 80%;
  font-size: var(--golf-match-content-font-size);

  h2 {
    text-align: center;
    grid-area: title;
  }

  .team-a-text-color {
    color: var(--team-a-color);
  }

  .team-a-bg-color {
    background-color: var(--team-a-color);
  }

  .team-b-text-color {
    color: var(--team-b-color);
  }

  .team-b-bg-color {
    background-color: var(--team-b-color);
  }

  #main-match-container {
    grid-area: main-match;

    .main-match-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 2rem;
      border-radius: var(--border-radius);
      background: var(--bg-color);
      box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23);
      padding: 0.5rem;

      .main-match-team {
        display: flex;
        flex-direction: column;
        align-items: center;

        .main-match-team-name {
          color: white;
          padding: 0.5rem;
          text-align: center;
          border-radius: var(--border-radius);
          box-shadow:
            rgba(136, 165, 191, 0.48) 6px 2px 16px 0px,
            rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

          &.team-a-name {
            background-color: var(--team-a-color);
          }

          &.team-b-name {
            background-color: var(--team-b-color);
          }
        }
      }

      .diff-banner {
        text-align: center;
      }
    }
  }

  #sub-match-container {
    grid-area: sub-match;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, 1fr);

    @media (orientation: portrait) {
      grid-template-columns: 1fr;
    }
  }

  .sub-match-card {
    display: grid;
    grid-template-rows: 1fr, 3fr, 1fr;
    grid-template-areas:
      "header"
      "main"
      "footer";
    align-items: center;
    text-align: center;
    border-radius: var(--border-radius);
    box-shadow:
      0 10px 20px rgba(0, 0, 0, 0.19),
      0 6px 6px rgba(0, 0, 0, 0.23);
    background: lightgrey;

    .sub-match-header {
      grid-area: header;
      font-weight: bold;
    }

    .sub-match-main {
      grid-area: main;
      display: grid;
      grid-template-columns: 2fr 1fr 2fr;
      grid-template-rows: repeat(2, 1fr);
      grid-template-areas:
        "team-a       vs   team-b"
        "team-a-score .    team-b-score"
        ".            hole .";
      gap: 0.5rem;
      padding: 0.5rem;
      align-items: center;
      justify-items: center;
      background-color: var(--box-bg-color);

      .sub-match-team-name {
        font-size: calc(var(--golf-match-content-font-size) * 0.5);
        font-style: italic;

        &::before {
          content: "(";
        }

        &::after {
          content: ")";
        }
      }

      .sub-match-team-a {
        grid-area: team-a;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
      }

      .sub-match-vs {
        grid-area: vs;
      }

      .sub-match-team-b {
        grid-area: team-b;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
      }

      .sub-match-team-a-score {
        grid-area: team-a-score;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        justify-content: center;
        width: fit-content;
        border-radius: var(--border-radius);
        box-shadow:
          rgba(136, 165, 191, 0.48) 6px 2px 16px 0px,
          rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

        .btn-score {
          color: white;
          border-radius: var(--border-radius) 0 0 var(--border-radius);
          padding: 0 2rem 0 2rem;
        }

        .sub-match-team-score {
          padding-right: 0.5rem;
        }
      }

      .sub-match-team-b-score {
        grid-area: team-b-score;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        justify-content: center;
        width: fit-content;
        border-radius: var(--border-radius);
        box-shadow:
          rgba(136, 165, 191, 0.48) 6px 2px 16px 0px,
          rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

        .btn-score {
          color: white;
          border-radius: var(--border-radius) 0 0 var(--border-radius);
          padding: 0 2rem 0 2rem;
        }

        .sub-match-team-score {
          padding-right: 0.5rem;
        }
      }

      .sub-match-hole {
        grid-area: hole;
        display: flex;
        justify-content: center;
        padding: 0.25rem;

        select.sub-match-hole-select {
          appearance: none;
          font-weight: bold;
          text-align: center;
          border-radius: 25%;
          font-size: var(--golf-match-content-font-size);
          background-color: lightgreen;
          border: 2px solid green;
          box-shadow:
            rgba(136, 165, 191, 0.48) 6px 2px 16px 0px,
            rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
          color: grey;
          cursor: pointer;
        }
      }
    }

    .sub-match-footer {
      grid-area: footer;
      font-weight: bold;
    }
  }

  #no-match-container {
    grid-area: main-match;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: var(--border);
    border-radius: var(--border-radius);
    background: var(--bg-color);
    padding: 1.5rem;
    margin-bottom: 1.5rem;

    p {
      font-size: calc(var(--golf-match-content-font-size) * 0.75);
      font-style: italic;
    }
  }

  #match-admin {
    border: var(--border);
    border-radius: var(--border-radius);
    background: var(--bg-color);

    .match-admin-header {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.5rem;
    }

    #match-setup-form {
      margin-bottom: 1.5rem;

      h5 {
        margin-top: 2rem;
      }

      .match-admin-field {
        display: flex;
        gap: 1.25rem;
        padding: 0.25rem;

        input[type="number"] {
          width: 2.5rem;
        }

        input[type="color"] {
          align-self: center;
        }
      }

      .sub-matchups-table {
        list-style: none;
        padding: 0;
        margin: 1rem 0 0 0;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        .sub-match-setup-header,
        .sub-match-setup-row {
          display: grid;
          grid-template-columns: 1fr 65px 30px 1fr 65px 32px 32px;
          gap: 1rem;
        }

        .sub-match-setup-header {
          font-weight: bold;
          font-size: 0.85rem;
          border-bottom: 2px solid var(--box-border-color);
          padding-bottom: 0.25rem;
          text-align: center;

          span:nth-child(1),
          span:nth-child(4) {
            text-align: left;
          }
        }

        .sub-match-setup-row {
          input[type="text"] {
            width: 100%;
            padding: 0.35rem;
          }

          input[type="number"] {
            width: 100%;
            padding: 0.35rem;
            text-align: center;
          }

          .vs-label {
            align-self: center;
            text-align: center;
            font-size: 0.8rem;
            opacity: 0.7;
          }

          .btn-remove-sub-match {
            cursor: pointer;
            border-radius: 4px;
            padding: 0;
            line-height: 1;
          }
        }

        & > :nth-child(2) .btn-remove-sub-match {
          display: none;
        }
      }

      #btn-add-sub-match {
        font-size: calc(var(--golf-match-content-font-size) * 0.5);
        border-radius: 5px;
      }
    }

    @media (orientation: portrait) {
      width: 80%;
      max-width: 80%;
    }
  }

  .hidden {
    display: none !important;
  }

  #how-this-works {
    width: 100%;
    font-size: calc(var(--golf-match-content-font-size) * 0.75);

    @media (orientation: portrait) {
      max-width: 80%;
    }
  }

  button {
    background-color: var(--secondary-color);
    color: var(--header-color);
    font-size: var(--golf-match-content-font-size);
    padding: 0.2em 0.5em;
    cursor: pointer;
    border-radius: 15px;
  }

  .btn-container {
    grid-area: buttons;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 1em;
    max-width: 100%;
    margin-top: 2rem;
  }

  @keyframes pulse {
    0% {
      transform: scale(0.95);
      opacity: 0.8;
    }
    70% {
      transform: scale(1.1);
      opacity: 1;
    }
    100% {
      transform: scale(0.95);
      opacity: 0.8;
    }
  }

  @media (orientation: portrait) {
    --golf-match-content-font-size: calc(var(--content-font-size) * 1.5);
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "main-match"
      "sub-match"
      "buttons";
  }
}