@import "./reset.css";
@import "./variables.css";
@import "./fonts.css";
@import "./global.css";
@import "./particles.css";

.loading-screen {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100%;
  background-color: var(--color-bg);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999999;
  opacity: 1;
  animation: show 1s linear 0.4s forwards;
}

@keyframes show {
  to {
    opacity: 0;
    pointer-events: none;
  }
}

/*
 * ===================================================================
 * -- FLAGS ----------------------------------------------------------
 * ===================================================================
 */

#flags {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  position: absolute;
  z-index: -99;
}

.flag_top {
  width: 100vw;
  height: 10rem;
  position: relative;
  z-index: 99;
  filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.4));
}

.flag_top::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--color-flag-one);
  position: absolute;
  top: 0;
  left: 0;
  transition: background-color 0.5s linear;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 5rem),
    50% 100%,
    0 calc(100% - 5rem)
  );
}

.logo {
  height: 9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}

.logo > img {
  height: 7rem;
}

.flag_left,
.flag_right {
  width: 22rem;
  height: 64rem;
  position: absolute;
  top: 0;
  left: 50%;
  transform-origin: top center;
  transition: background-color 0.5s linear;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 10rem),
    50% 100%,
    0 calc(100% - 10rem)
  );
}

.flag_left--one,
.flag_right--one {
  background-color: var(--color-flag-one);
  z-index: 3;
  transform: translate(calc(-50% - 56.5rem));
}

.flag_left--two,
.flag_right--two {
  background-color: var(--color-flag-two);
  z-index: 2;
  transform: translate(calc(-50% - 35rem)) scale(0.8);
}

.flag_left--three,
.flag_right--three {
  background-color: var(--color-flag-three);
  z-index: 1;
  transform: translate(calc(-50% - 18rem)) scale(0.6);
}

.flag_right {
  left: inherit;
  right: 50%;
}

.flag_right--one {
  transform: translate(calc(50% + 56.5rem));
}

.flag_right--two {
  transform: translate(calc(50% + 35rem)) scale(0.8);
}

.flag_right--three {
  transform: translate(calc(50% + 18rem)) scale(0.6);
}

.flag_left > img,
.flag_right > img {
  width: 16rem;
  position: absolute;
  left: 50%;
  bottom: 10rem;
  z-index: 9;
  transform: translate(-50%, 4rem);
  mix-blend-mode: hard-light;
}

/*
 * ===================================================================
 * -- MAIN -----------------------------------------------------------
 * ===================================================================
 */

.main {
  width: 100%;
  /* min-height: 70rem; */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header {
  margin: 4rem 0;
  margin-top: 13rem;
  color: white;
  text-align: center;
  text-transform: uppercase;
}

.header__title {
  opacity: 0;
  transform: translateY(0.4rem);
  animation: opacity-in 0.4s ease-in-out forwards;
}

@keyframes opacity-in {
  to {
    opacity: 1;
    transform: translateY(0rem);
  }
}

.header__nav {
  margin-top: 2rem;
}

.header__nav--loading .nav__option {
  pointer-events: none;
}

.header__nav--loading .nav__star {
  animation: starTurning 3s linear;
}

.nav__star {
  width: 2.4rem;
  height: 1.2rem;
  background-image: url("../assets/img/star_point.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: inline-block;
}

@keyframes starTurning {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(720deg);
  }
}

.nav__option {
  position: relative;
  color: white;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}

.nav__option::after {
  content: "";
  width: 0%;
  border-bottom: 1px solid white;
  display: inline-block;
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translate(-50%);
  transition: width 0.2s;
}

.nav__option:hover::after {
  width: 100%;
}

.nav__option--selected {
  cursor: initial;
  pointer-events: none;
}

.nav__option--selected::after {
  width: 100%;
}

#watches {
  display: flex;
}

.watches__watch {
  width: 14rem;
  height: 36.3rem;
  margin-left: 1rem;
  position: relative;
}

.watches__watch:nth-child(1) {
  margin: 0;
}

.watches__watch-frame {
  width: 14rem;
  height: 36.6rem;
  margin: 0rem;
  display: block;
  overflow: hidden;
  position: absolute;
  inset: 0rem;
  box-sizing: border-box;
}

.watches__watch-sand_grains {
  width: 100%;
  height: 100%;
}

.watches__watch-sand_grain {
  border-radius: 360px;
  position: absolute;
  top: 10%;
  left: 50%;
  right: 0;
  transform: translate(-50%);
}

/* .addPoints .watches__watch-sand_grain{ animation: sand-grain .5s linear 1; } */
@keyframes sand-grain {
  from {
    top: 10%;
  }
  to {
    top: 90%;
  }
}

.watches__watch-sand_crest {
  height: 8.7rem;
  border-radius: 3rem 3rem 0 0;
  position: absolute;
  left: 1.3rem;
  right: 1.3rem;
  top: 1.3rem;
  z-index: 2;
  transition: background-color 0.5s ease-in 0.8s;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 3.2rem),
    50% 100%,
    0 calc(100% - 3.2rem)
  );
}

.watches__watch-sand_crest::before {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 3rem 3rem 0 0;
  display: inline-block;
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s ease-in 0.8s;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 3.2rem),
    50% 100%,
    0 calc(100% - 3.2rem)
  );
}

.winnerHouse .watches__watch-sand_crest::before {
  opacity: 1;
}

.watches__watch-shield {
  width: 100%;
  height: 100%;
  position: relative;
}

.watches__watch-shield > img {
  width: 6.4rem;
  height: auto;
  position: absolute;
  top: 1rem;
  left: 50%;
  z-index: 1;
  transform: translate(-50%);
}

.watches__watch-sand_slider {
  height: 20.6rem;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.watches__watch-slider_crest {
  height: 0%;
  max-height: 100% !important;
  padding-top: 1.4rem;
  border-bottom-right-radius: 2.5rem;
  border-bottom-left-radius: 2.5rem;
  position: absolute;
  right: 1.3rem;
  left: 1.3rem;
  bottom: 1.8rem;
  transition: height 1.5s ease-in-out 0.5s;
  clip-path: polygon(0 1.4rem, 50% 0, 100% 1.4rem, 100% 100%, 0 100%);
}

.watches__watch-points {
  color: white;
  line-height: 2.2rem;
  letter-spacing: 0;
  text-align: center;
  position: absolute;
  bottom: 3.8rem;
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(0 0.2rem 0 rgba(0, 0, 0, 0.6));
}

.watches__watch-prefecto {
  color: white;
  text-align: center;
  font-size: 1.6rem;
  margin-top: 0.2rem;
  transition: 0.4s;
}

.prefecto--off {
  opacity: 0;
  transform: translateY(-1rem);
}

/*
 * ===================================================================
 * -- TABLES ---------------------------------------------------------
 * ===================================================================
 */

.tables {
  width: 100vw;
  min-height: 67rem;
  margin-top: 8rem;
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.table {
  width: 70rem;
  color: white;
  font-size: 2rem;
  text-align: center;
  position: absolute;
}

.tables #monthTable.table {
  animation: animationMonthTableIn 0.4s linear forwards;
}

.tables #rankingTable.table {
  animation: animationRankingTableOut 0.4s linear forwards;
}

.tables.table--active #monthTable.table {
  animation: animationMonthTableOut 0.4s linear forwards;
}

.tables.table--active #rankingTable.table {
  animation: animationRankingTableIn 0.4s linear forwards;
}

@keyframes animationMonthTableIn {
  0% {
    transform: translate(-5rem);
    opacity: 0;
  }

  50% {
    transform: translate(-5rem);
    opacity: 0;
  }

  100% {
    transform: translate(0rem);
    opacity: 1;
  }
}

@keyframes animationMonthTableOut {
  0% {
    transform: translate(0rem);
    opacity: 1;
  }

  50% {
    transform: translate(-5rem);
    opacity: 0;
  }

  100% {
    transform: translate(-5rem);
    opacity: 0;
    z-index: 0;
  }
}

@keyframes animationRankingTableIn {
  0% {
    transform: translate(5rem);
    opacity: 0;
  }

  50% {
    transform: translate(5rem);
    opacity: 0;
  }

  100% {
    transform: translate(0rem);
    opacity: 1;
  }
}

@keyframes animationRankingTableOut {
  0% {
    transform: translate(0rem);
    opacity: 1;
  }

  50% {
    transform: translate(5rem);
    opacity: 0;
  }

  100% {
    transform: translate(5rem);
    opacity: 0;
  }
}

#rankingTable .table__body .table__row div:nth-child(2) {
  text-transform: capitalize;
}

.table__head {
  border-bottom: 0.1rem solid rgba(255, 255, 255, 1);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1rem;
  text-transform: uppercase;
}

.table__head .table__column,
.table__row div {
  padding: 1rem;
}

.table__column--one {
  grid-column: 1 / 2;
  grid-row: 1;
}

.table__column--two {
  grid-column: 2 / 3;
  grid-row: 1;
}

.table__column--three {
  grid-column: 3 / 4;
  grid-row: 1;
}

.table__row div:nth-child(1) {
  text-transform: capitalize;
}

#monthTable {
  z-index: 1;
}

#monthTable .table__body {
  overflow-y: auto;
  width: calc(100% + 0.6rem);
  max-height: 52.1rem;
  height: 52.1rem;
}

.table__row {
  border-bottom: 0.1rem solid rgba(255, 255, 255, 0.2);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1rem;
  animation: rowTableShow 0.6s linear 1;
  align-items: center;
}

@keyframes rowTableShow {
  from {
    opacity: 0;
    background-color: rgba(255, 255, 255, 0.6);
  }

  to {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0);
  }
}

#monthTable.table__row div:first-child {
  font-size: 1.8rem;
  opacity: 0.8;
}

.table__row.ravenclaw {
  background: linear-gradient(
    90deg,
    rgba(95, 160, 255, 0) 0%,
    rgba(95, 160, 255, 0.2) 100%
  );
}

.table__row.slytherin {
  background: linear-gradient(
    90deg,
    rgba(41, 221, 192, 0) 0%,
    rgba(41, 221, 192, 0.2) 100%
  );
}

.table__row.gryffindor {
  background: linear-gradient(
    90deg,
    rgba(255, 134, 126, 0) 0%,
    rgba(255, 134, 126, 0.2) 100%
  );
}

.table__row.hufflepuff {
  background: linear-gradient(
    90deg,
    rgba(252, 181, 66, 0) 0%,
    rgba(252, 181, 66, 0.2) 100%
  );
}

/*
 * ===================================================================
 * -- MODULES --------------------------------------------------------
 * ===================================================================
 */

.modules_buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: fixed;
  right: 2rem;
  /* bottom: calc(12rem + 4rem); */
  bottom: 4rem;
  z-index: 999999;
}

.modules_buttons__button {
  width: 7rem;
  height: 7rem;
  /* border: 2px solid white; */
  border-radius: 360px;
  background-size: contain;
  transition: transform 0.2s;
  cursor: pointer;
}

.modules_buttons__button:hover {
  transform: scale(0.9);
}

.modules_buttons__button--spells {
  background-image: url("../assets/img/btn-spells.png");
}

.modules_buttons__button--beasts {
  background-image: url("../assets/img/btn-beasts.png");
}

:root {
  --widthModuleTable: 80vw;
  --paddingModuleTable: 6rem;
}

.module {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 67rem;
  background: #0e0d15;
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  transform: translateY(-150vh);
  transition: transform 0.5s;
}

.module__header {
  width: 100%;
  height: var(--paddingModuleTable);
  /* background-image: linear-gradient(190deg, #F4DC96 0%, #D5A154 100%); */
  background-color: var(--color-purple);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 99;
  color: rgb(14, 13, 23);
  text-transform: uppercase;
  font-family: "Bluu_Next", serif;
  font-style: normal;
  font-weight: 700;
  font-size: 2rem;
}

.module__header::after {
  content: "";
  width: 100%;
  height: 0.2rem;
  /* background-image: linear-gradient(190deg, #F4DC96 0%, #D5A154 100%); */
  background-color: var(--color-purple);
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: -0.7rem;
  z-index: 99;
}

.module .table {
  padding: var(--paddingModuleTable);
  padding-top: calc(var(--paddingModuleTable) + 1.5rem);
  padding-bottom: calc(var(--paddingModuleTable) - 1.5rem);
  background: #0e0d15;
  width: var(--widthModuleTable);
}

.table__container {
  height: calc(100vh - var(--paddingModuleTable) * 2);
}

.module__cover_scroll {
  width: 0.6rem;
  height: 23.3rem;
  background: #0e0d15;
  position: absolute;
  top: 5.9rem;
  right: 5.4rem;
}

.module table {
  margin: 0;
  border: none;
  border-collapse: separate;
  border-spacing: 0;
  white-space: nowrap;
  table-layout: fixed;
}

.module table td,
.module table th {
  padding: 1rem 2rem;
}

.module table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.module table thead th {
  width: 25vw;
  height: 21.8rem;
  padding: 1.5rem 0.5rem;
  border-top: 1px solid #fff;
  background: #0e0d15;
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 2;
  font-family: "Sofia_Pro", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 1.6rem;
  writing-mode: vertical-rl;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  transform: rotate(180deg);
}

.module table td {
  padding: 1rem 0.6rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.2);
}

.module table td.tooltip {
  line-height: 1.4rem;
  opacity: 1;
}

.module table td .img-icon {
  width: 2.1rem;
  height: 2.1rem;
  margin: 0 auto;
  background-size: contain;
}

.module_beasts table td .img-icon.num-b {
  background-image: url("../assets/img/badges/badge-beasts-b.png");
}

.module_beasts table td .img-icon.num-s {
  background-image: url("../assets/img/badges/badge-beasts-s.png");
}

.module_beasts table td .img-icon.num-g {
  background-image: url("../assets/img/badges/badge-beasts-g.png");
}

.module_beasts table td .img-icon.num-p {
  background-image: url("../assets/img/badges/badge-beasts-p.png");
}

.module_beasts table td .img-icon.num-d {
  background-image: url("../assets/img/badges/badge-beasts-d.png");
}

.module_spells table td .img-icon.num-b {
  background-image: url("../assets/img/badges/badge-spells-b.png");
}

.module_spells table td .img-icon.num-s {
  background-image: url("../assets/img/badges/badge-spells-s.png");
}

.module_spells table td .img-icon.num-g {
  background-image: url("../assets/img/badges/badge-spells-g.png");
}

.module_spells table td .img-icon.num-p {
  background-image: url("../assets/img/badges/badge-spells-p.png");
}

.module_spells table td .img-icon.num-d {
  background-image: url("../assets/img/badges/badge-spells-d.png");
}

.module table tbody {
  font-size: 1.8rem;
  font-weight: 300;
}

.module table tbody th {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background: #0e0d15;
  position: relative;
  font-family: "Sofia_Pro";
  font-style: normal;
  font-weight: 300;
}

.module table thead th:first-child {
  min-width: 12rem;
  position: sticky;
  left: 0;
  z-index: 3;
  writing-mode: initial;
  text-align: center;
}

.module table thead th:first-child span {
  display: inline-block;
  position: absolute;
  /* left: 50%;
  bottom: 1.5rem; */
  top: 1.5rem;
  font-family: "Bluu_Next", serif;
  font-style: normal;
  font-weight: 500;
  font-size: 2rem;
  text-transform: uppercase;
  transform: translateX(-50%) rotate(180deg);
}

.module table tbody th {
  min-width: 13rem;
  position: sticky;
  left: 0;
  z-index: 2;
}

.module table tbody tr th.total-b {
  background: linear-gradient(90deg, rgb(57, 40, 38) 0%, rgb(14, 13, 21) 100%);
  /* color: #E69871; */
}

.module table tbody tr th.total-s {
  background: linear-gradient(90deg, rgb(54, 53, 59) 0%, rgb(14, 13, 21) 100%);
  /* color: #D9D9D9; */
}

.module table tbody tr th.total-g {
  background: linear-gradient(90deg, rgb(60, 54, 46) 0%, rgb(14, 13, 21) 100%);
  /* color: #F4DC96; */
}

.module table tbody tr th.total-p {
  background: linear-gradient(90deg, rgb(43, 42, 55) 0%, rgb(14, 13, 21) 100%);
  /* color: #A1A0C2; */
}

.module table tbody tr th.total-d {
  background: linear-gradient(90deg, rgb(49, 59, 65) 0%, rgb(14, 13, 21) 100%);
  /* color: #C0F6F6; */
}

.module table tbody tr th span {
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 0.3rem;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  transform: translateY(0.3rem);
}

.module .table__container {
  width: calc(100% + 0.6rem);
  overflow: auto;
  outline: 0;
}

body.module--open {
  overflow: hidden;
}

.module_beasts--open .module_beasts,
.module_spells--open .module_spells {
  transform: translate(0);
}

.module--open .modules_buttons {
  right: 2.6rem;
}

.tooltip {
  border-bottom: 1px dotted black;
  position: relative;
}

.tooltip .tooltiptext {
  width: auto;
  padding: 1rem;
  border-radius: 0.8rem;
  background-color: var(--color-purple);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  color: #fff;
  text-align: center;
  transform: translate(-50%, -50%);
  visibility: hidden;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

/*
 * ===================================================================
 * -- FOOTER ---------------------------------------------------------
 * ===================================================================
 */

footer {
  width: 100%;
  height: 12rem;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

footer p {
  color: white;
  font-size: 1.4rem;
}

/*
 * ===================================================================
 * -- MEDIA ----------------------------------------------------------
 * ===================================================================
 */

@media (max-width: 820px) {
  .module .table {
    padding: 4rem;
    padding-top: calc(var(--paddingModuleTable) + 1.5rem);
    padding-bottom: calc(var(--paddingModuleTable) + 2rem);
    width: 100vw;
  }

  .module__cover_scroll {
    z-index: 9;
    right: 3.4rem;
  }

  .table__container {
    height: calc(100vh - (var(--paddingModuleTable) + 3.5rem) * 2);
  }

  .module--on #buttonBeastsModule,
  .module--on #buttonSpellsModule {
    right: 4rem;
  }
}

@media (max-width: 778px) {
  html {
    font-size: 8px;
  }
}

@media (max-width: 600px) {
  .table {
    width: 62rem;
  }
}

@media (max-width: 520px) {
  html {
    font-size: 7px;
  }
}

@media (max-width: 470px) {
  html {
    font-size: 6px;
  }

  .table {
    width: 58rem;
  }

  #buttonSpellsModule {
    bottom: 13rem;
  }
}

@media (max-width: 380px) {
  body {
    height: 100%;
  }

  #watches {
    transform: scale(0.9);
  }
}