@import url(../leaderboard/style.css);

/* iOS görgetőcsík elrejtése */
[page="game"] {
  ::-webkit-scrollbar { display: none; }
  * { scrollbar-width: none; -ms-overflow-style: none; }
}

/* Asztali nézetben szellősebb játéktér + footer visszajön */
@media screen and (min-width: 701px) {
  .game-content {
    margin-top: 40px !important;
    margin-bottom: 40px;
  }
  .game-footer {
    display: grid;
  }
}

/* Mobil: nincs felső margin */
@media screen and (max-width: 700px) {
  .game-content {
    margin-top: 0 !important;
  }
  /* Mobilon az X gomb visszalép, a Back gomb felesleges */
  [game-page="opening"] .button[action="back"] {
    display: none;
  }
}

.game-footer {
  display: none;
}

[page="login"] {
  grid-template-rows: 1fr auto;
  min-height: 100%;
}

.content-info h6 {
  margin: 20px 0;
  font-size: var(--game-font-s);
}

.main {
  --width: 300px;
  --height: 170px;
  --main-gap: 20px;
  --star-size: 15px;
  display: grid;
  grid-template-rows: 1fr;
  min-height: 100%;

  & .content-container {
    pointer-events: none;
  }

  & .content-buttons {
    display: grid;
    margin: 20px 0;
    gap: 10px;
  }

  & [game-page] {
    width: 100%;
    display: grid;
    place-self: center;
    justify-items: center;
    &.hide {
      display: none;
    }
  }
  & [game-page="game"] {
    align-self: start;
  }
  & [game-page="end"] {
    min-height: 100%;
    grid-template-rows: auto auto 1fr;
  }

  & .leaderboard-grid {
    grid-template-rows: initial;
  }

  & .feedback_btn {
    cursor: pointer;
    &:hover {
      color: var(--color-black-all);
    }
  }

  & .rate {
    --star-size: 30px;
    font-family: var(--main-font);
    display: grid;
    gap: 10px;

    & [rate_content] {
      display: none;
      color: var(--color-lightest-all);
      text-align: center;
      font-weight: 300;
      margin: 0;
    }
    & .previous_rating {
      color: var(--color-lightest-all);
      font-weight: 300;
      text-decoration: underline;
      text-align: center;
      cursor: pointer;
      &:hover {
        color: var(--color-purple);
      }
    }
    & .ratings {
      display: grid;
      gap: 0.2rem;
      grid-auto-flow: column;
      place-content: center;
      align-items: center;
      & .rating_stars {
        --hover_scale: 1.1;
        display: grid;
        gap: 3px;
        grid-auto-flow: column;
        justify-self: end;
        font-size: var(--star-size);

        &.rated {
          pointer-events: none;
          & [rate_star="full"] {
            scale: var(--hover_scale);
          }
        }

        &.rating {
          &:hover [rate_star="full"] {
            scale: var(--hover_scale);
          }
          & .rating_star {
            cursor: pointer;
            &:hover {
              animation: 250ms rateanim forwards ease-in-out;
            }
          }
        }

        & .rating_star {
          display: grid;
          width: var(--star-size);
          height: var(--star-size);
          & [rate_star] {
            grid-area: 1 / 1;
            stroke: var(--color-white-all);
            overflow: hidden;
            & svg {
              pointer-events: none;
            }
          }

          & [rate_star="empty"] {
            fill: var(--border-white-all);
          }
          & [rate_star="full"] {
            fill: var(--color-purple);
          }
          &.rated {
            animation: 250ms rateanim forwards ease-in-out;
          }
        }
      }

      & [rates] {
        color: var(--color-lightest-all);
        font-size: var(--font-size-xs);
        translate: 0 1px;
      }
    }

    & [rate_value] {
      display: none;
      font-size: var(--font-size-h6);
      color: var(--color-lightest-all);
    }
    &.animationEnd {
      & [rate_value] {
        display: grid;
        justify-self: start;
      }
      & [rate_content="global"] {
        display: grid;
      }

      & [rate_content="my"] {
        display: none;
      }
    }
  }
}

@keyframes rateanim {
  0% {
    scale: 1;
  }

  25% {
    scale: 1.2;
    rotate: 5deg;
  }

  75% {
    rotate: -5deg;
  }

  100% {
    scale: 1;
    rotate: 0deg;
  }
}

.feedback-popup {
  & .info {
    margin: 20px 0;
    font-weight: 300;
    color: var(--color-lightest-all);
  }
  & .result-info {
    margin: 20px 0;
    font-weight: 300;
    color: var(--color-lightest-all);
    text-align: center;
    & span {
      font-weight: 600;
    }
  }
  & .input {
    width: 100%;
    font-size: var(--font-size-h6);
    background-color: rgba(255, 255, 255, 0.1);
    & option {
      color: black;
      font-family: var(--main-font);
      font-size: var(--font-size-body);
    }
  }
  & .textarea {
    width: 100%;
    height: 300px;
    padding: 20px 30px;
    background-color: rgba(255, 255, 255, 0.1);
    resize: none;
  }
  & .buttons {
    display: grid;
    gap: 20px;
    grid-auto-flow: column;
    justify-content: center;
    margin: 20px 0;
  }
  & .popup-page {
    display: none;
    &.visible {
      display: block;
    }
  }
}

.reset-popup {
  & .info {
    font-weight: 300;
    color: var(--color-lightest-all);
    text-align: center;
  }

  & .buttons {
    display: grid;
    gap: 20px;
    grid-auto-flow: column;
    justify-content: center;
    margin: 20px 0;
  }
}