@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;
  }
}

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;
      }
    }
  }
}

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

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

    @media(max-width: 500px) {
      button:nth-child(1) {
        display: none;
      }
    }

    .checkbox-list {
      display: flex;
      justify-content: center;
      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;
          }
        }
      }
    }

    .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;
          }
        }
      }
    }
  }
}

.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;

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

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

  &.hidden {
    display: none;
  }

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

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

    &: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;
  }
}