@charset "utf-8";

.container {
  width: calc(100% - 32px);
  max-width: calc(806px + 80px * 3);
  margin: 0 auto;
}

header {
  flex-shrink: 0;

  .logo-link {
    display: grid;
    place-items: center;
    width: 96px;
    height: 60px;
  }
}

aside {
  flex-shrink: 0;
  padding-bottom: 60px;

  @media (max-width: 767px) {
    padding-bottom: 45px;
  }

  @media (max-width: 500px) {
    .container {
      width: 100%;
    }
  }
}

footer {
  flex-shrink: 0;
  background: #212121;
  color: #9e9e9e;

  .top-area-container {
    padding: 64px 0;

    .logo-link {
      display: grid;
      place-items: center;
      width: 96px;
      height: 32px;
      margin: 0 auto;
    }

    .nav-list {
      display: flex;
      justify-content: center;
      gap: 40px;
      margin-top: 32px;
      font-size: 12px;

      .nav-item {
        a {
          transition: color 0.2s;

          &:hover {
            color: #d9d9d9;
          }
        }
      }
    }
  }

  .bottom-area-container {
    padding: 32px 0;
    background: #1a1a1a;
    color: #bdbdbd;

    .copyright-p {
      font-size: 12px;
      text-align: center;
    }
  }
}

main {
  flex: 1;
  flex-shrink: 0;
  padding: 16px 0 60px;
}

.info-section {
  .container {
    border: 1px solid #e5e5e5;
  }

  h2 {
    padding: 8px 12px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    display: flex;
    align-items: center;

    &.hidden {
      .bi {
        transform: rotate(-90deg);
      }
    }

    .bi {
      color: #555;
      font-size: 13px;
      transition: transform 0.4s;
      margin-right: 4px;
    }
  }

  .info-container {
    background: #f9f9f9;
    overflow: hidden;
    transition: height 0.4s;
    font-size: 14px;
    color: #212121;

    .info-inner-container {
      padding: 16px;

      h3 {
        font-size: 14px;
      }

      p {
        margin-top: 4px;
      }

      a {
        color: #1a73e8;
      }

      .update-log-container {
        margin-top: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 4px 8px;
        background: #eee;
      }
    }
  }
}

.save-section {
  margin-top: 24px;

  .container {
    display: grid;
    gap: 8px 6px;
    grid-template:
      "a a"
      "b c"
      "d e"
      / 1fr auto;

    @media (max-width: 500px) {
      grid-template:
        "a"
        "b"
        "c"
        "d"
        "e";
    }

    textarea {
      padding: 8px;
      resize: none;
      line-height: 1.4;
      grid-area: a;
    }

    form {
      display: grid;
      grid-column: span 2;
      grid-template: subgrid / subgrid;

      @media (max-width: 500px) {
        grid-column: auto;
        grid-row: span 2;
      }

      input {
        padding: 8px;
        grid-area: b;
      }

      button {
        padding: 8px 12px;
        grid-area: c;
        justify-self: start;
      }
    }

    select {
      padding: 8px 4px;
      grid-area: d;
    }

    .button-container {
      grid-area: e;

      button {
        padding: 8px 12px;
      }
    }
  }
}

.tier-section {
  margin-top: 24px;

  .handle-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    .checkbox-list {
      display: flex;
      gap: 8px;

      .checkbox-item {
        &:nth-child(1) {
          label {
            &:hover:not(&:has(input:checked)) {
              border-color: var(--color-tier0);
              color: var(--color-tier0);
            }

            &:has(input:checked) {
              background: var(--color-tier0);
              border-color: var(--color-tier0);
            }
          }
        }

        &:nth-child(2) {
          label {
            &:hover:not(&:has(input:checked)) {
              border-color: var(--color-tier1);
              color: var(--color-tier1);
            }

            &:has(input:checked) {
              background: var(--color-tier1);
              border-color: var(--color-tier1);
            }
          }
        }

        &:nth-child(3) {
          label {
            &:hover:not(&:has(input:checked)) {
              border-color: var(--color-tier2);
              color: var(--color-tier2);
            }

            &:has(input:checked) {
              background: var(--color-tier2);
              border-color: var(--color-tier2);
            }
          }
        }

        &:nth-child(4) {
          label {
            &:hover:not(&:has(input:checked)) {
              border-color: var(--color-tier3);
              color: var(--color-tier3);
            }

            &:has(input:checked) {
              background: var(--color-tier3);
              border-color: var(--color-tier3);
            }
          }
        }

        &:nth-child(5) {
          label {
            &:hover:not(&:has(input:checked)) {
              border-color: var(--color-tier4);
              color: var(--color-tier4);
            }

            &:has(input:checked) {
              background: var(--color-tier4);
              border-color: var(--color-tier4);
            }
          }
        }

        label {
          display: grid;
          place-items: center;
          width: 35px;
          height: 35px;
          border: 1px solid #ccc;
          color: #ccc;
          font-size: 14px;
          font-weight: bold;
          transition: border-color 0.1s, background-color 0.1s, color 0.1s, filter 0.1s;

          &:hover {
            filter: brightness(1.1);
          }

          &:has(input:checked) {
            color: #fff;
            text-shadow: 1px 1px 2px rgba(0 0 0 / 0.4);
          }

          input {
            display: none;
          }
        }
      }
    }

    .button-container {
      .clear-tier-button {
        padding: 8px 12px;
      }

      .generate-image-button {
        padding: 8px 12px;
      }
    }
  }

  .tier-list {
    user-select: none;
    margin-top: 24px;

    .tier-item {
      transition: height 0.4s, margin-bottom 0.4s;
      overflow: hidden;

      &:not(.hidden) {
        margin-bottom: 5px;
      }

      &[data-id="0"] {
        .rank-container {
          background: #ff4d4f;
        }
      }

      &[data-id="1"] {
        .rank-container {
          background: #ffa940;
        }
      }

      &[data-id="2"] {
        .rank-container {
          background: #fadb14;
        }
      }

      &[data-id="3"] {
        .rank-container {
          background: #73d13d;
        }
      }

      &[data-id="4"] {
        .rank-container {
          background: #40a9ff;
        }
      }

      .tier-item-inner-container {
        display: flex;
        border: 1px solid #ccc;

        .rank-container {
          display: grid;
          place-items: center;
          width: 80px;
          color: #fff;
          font-size: 24px;
          font-weight: bold;
          text-shadow: 1px 1px 2px rgba(0 0 0 / 0.4);

          @media(max-width: 500px) {
            width: 53px;
          }
        }

        .tier-card-list {
          flex: 1;
          display: flex;
          flex-wrap: wrap;
          min-height: 90px;
          background: #f0f0f0;
          padding: 2px;
          transition: background-color 0.05s;

          @media(max-width: 500px) {
            min-height: 60px;
          }

          &.dragover {
            background: #d9f7be;
          }
        }
      }
    }
  }
}

.search-section {
  margin-top: 24px;

  .container {
    border: 1px solid #e5e5e5;
  }

  h2 {
    padding: 8px 12px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    display: flex;
    align-items: center;

    &.hidden {
      .bi {
        transform: rotate(-90deg);
      }
    }

    .bi {
      color: #555;
      font-size: 13px;
      transition: transform 0.4s;
      margin-right: 4px;
    }
  }

  .search-container {
    background: #f9f9f9;
    overflow: hidden;
    transition: height 0.4s;

    .search-inner-container {
      padding: 16px;

      .field-container {
        display: flex;
        align-items: center;

        @media(max-width: 500px) {
          &:nth-child(n+2) {
            display: block;
          }
        }

        &+& {
          margin-top: 12px;
          border-top: 1px solid #e5e5e5;
          padding-top: 12px;
        }

        h3 {
          flex-shrink: 0;
          font-size: 14px;
          width: 104px;
        }

        .checkbox-list {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          margin-right: 16px;

          @media(max-width: 500px) {
            margin-right: 0;
            margin-top: 8px;
          }

          .checkbox-item {
            display: grid;

            label {
              display: grid;
              place-items: center;
              border: 1px solid #ccc;
              border-radius: 9999px;
              padding: 0 12px;
              font-size: 14px;
              transition: border-color 0.1s, background-color 0.1s, color 0.1s;
              height: 36px;

              &:hover {
                border-color: #0073aa;
              }

              &:has(input:checked) {
                background: #0073aa;
                border-color: #0073aa;
                color: #fff;
              }

              input {
                display: none;
              }
            }
          }
        }

        .clear-all-button {
          flex-shrink: 0;
          margin-left: auto;
          padding: 6px 10px;
        }

        .clear-button {
          flex-shrink: 0;
          margin-left: auto;
          padding: 6px 10px;

          @media(max-width: 500px) {
            display: none;
          }
        }
      }
    }
  }
}

.storage-section {
  margin-top: 16px;

  .storage-card-list {
    display: flex;
    flex-wrap: wrap;
    min-height: 90px;
    background: #e9e9e9;
    border: 1px solid #ccc;
    padding: 2px;
    margin-top: 16px;
    user-select: none;
    transition: background-color 0.05s;

    @media(max-width: 500px) {
      min-height: 60px;
    }

    &.dragover {
      background: #d9f7be;
    }
  }
}

.card-item {
  display: grid;
  place-items: center;
  width: 80px;
  height: 104px;

  @media(max-width: 500px) {
    width: 53px;
    height: 69px;
  }

  &.hidden {
    display: none;
  }

  .card-image {
    cursor: grab;
    transition: opacity 0.05s, border-width 0.05s, transform 0.05s;

    @media(max-width: 500px) {
      width: 53px;
      height: 69px;
    }

    &:active {
      cursor: grabbing;
    }

    &.dragging {
      opacity: 0.25;
    }

    &.dragover:not(&.dragging) {
      opacity: 0.5;
      border: 2px solid transparent;
    }

    &:hover:not(:active) {
      transform: scale(1.025);
    }
  }
}

.touch-image {
  position: fixed;
  opacity: 0.5;
  pointer-events: none;

  &.hidden {
    display: none;
  }
}