/* Fonts */
@font-face {
  font-family: "ManiacOutline";
  src: url("../font/ManiacOutline.ttf") format("truetype");
}

@font-face {
  font-family: "Square";
  src: url("../font/Square.ttf") format("truetype");
}

/* All */
:root {
  --c-primary-white: #f4f6ff;
  --c-primary-black: #222222;
  --c-primary-gray: #c2c2c2;
  --c-primary-pink: #fba1a1;
  --c-primary-light-pink: #fbc5c5;
  --c-primary-blue: #1f2122;
  --c-primary-light-blue: #a6d1e6;
  --c-primary-green: #a0d995;
  --c-primary-light-green: #a7c4bc;
  --c-primary-yellow: #ffde6d;
  --c-primary-translucent-yellow: rgba(255, 229, 157, 0.5);
  --c-primary-purple: #a084cf;
  --c-primary-light-purple: #b1bce6;
  --c-primary-red: #ff6363;

  --fs-200: 1rem;
  --fs-400: 1.2rem;
  --fs-500: 1.6rem;
  --fs-600: 2.5rem;
  --fs-700: 3.5rem;
  --fs-900: 5.2rem;

  --ff-primary: "Square";
  --ff-title: "ManiacOutline";
}
@media screen and (min-width: 1550px) {
  :root {
    --fs-200: 1rem;
    --fs-400: 1.6rem;
    --fs-500: 1.6rem;
    --fs-600: 2.5rem;
    --fs-700: 3.5rem;
    --fs-900: 6.2rem;
  }
}
@media screen and (max-width: 1277px) {
  :root {
    --fs-200: 1rem;
    --fs-400: 1rem;
    --fs-500: 1.2rem;
    --fs-600: 1.5rem;
    --fs-700: 2.5rem;
    --fs-900: 4.2rem;
  }
}
@media screen and (max-width: 1024px) {
  :root {
    --fs-200: 1rem;
    --fs-400: 1rem;
    --fs-500: 1.2rem;
    --fs-600: 1.5rem;
    --fs-700: 2.5rem;
    --fs-900: 3.2rem;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Square;
  color: var(--c-primary-black);
  user-select: none;
  cursor: url("../img/cursor.png"), auto !important;
}

/* Tags */
body {
  background-color: var(--c-primary-white);
  color: var(--c-primary-black);
  font-family: var(--ff-primary);
  height: 100vh;
  width: 100vw;
  background-image: url("../img/bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow-x: hidden;
}

button,
a {
  font-size: var(--fs-500);
  background-color: var(--c-primary-white);
  border: 0.3rem solid var(--c-primary-black);
  transition: ease-in-out 0.3s;
  text-decoration: none;
  padding: 0.5rem 2rem;
  width: fit-content;
  text-align: center;
  outline: none;
}

input,
textarea {
  font-size: var(--fs-500);
  background-color: var(--c-primary-white);
  border: 0.3rem solid var(--c-primary-black);
  transition: ease-in-out 0.3s;
  text-decoration: none;
  padding: 0.5rem 2rem;
  width: fit-content;
  outline: none;
}

textarea {
  width: 100%;
  height: 25vh;
}

/* Large classes */
.light-button {
  background-color: var(--c-primary-white);
  color: var(--c-primary-black);
}
.light-button:hover {
  background-color: var(--c-primary-black);
  color: var(--c-primary-white);
}

.dark-button {
  background-color: var(--c-primary-black);
  color: var(--c-primary-white);
}
.dark-button:hover {
  background-color: var(--c-primary-white);
  color: var(--c-primary-black);
}

.simple-link {
  font-size: var(--fs-400);
  background-color: transparent;
  border: none;
  transition: ease-in-out 0.3s;
  text-decoration: underline;
  padding: 0;
  width: auto;
  text-align: left;
  outline: none;
}

/* Advertisement slots */
.ad-slot {
  position: relative;
  width: 100%;
  height: 100%;
}

.ad-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--c-primary-white);
  border: 0.3rem solid var(--c-primary-black);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--fs-400);
  color: var(--c-primary-gray);
  z-index: 0;
}

.ad-slot > .adsbygoogle {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.ad-728x90 {
  width: 728px;
  height: 90px;
}

.info-box {
  border: 0.3rem solid var(--c-primary-black);
  padding: 0.5rem;
  max-width: 15rem;
  background-color: var(--c-primary-white);
}
.info-box-title {
  font-size: var(--fs-500);
  padding: 0 0 0.5rem 0;
  margin: 0 0 0.5rem 0;
  border-bottom: 0.3rem solid var(--c-primary-black);
}
.info-box-list > * {
  font-size: var(--fs-400);
  list-style: square;
  margin: 0 0 0 1rem;
}
.info-box-text {
  font-size: var(--fs-400);
  margin: 0 0 0.5rem 0;
}
.info-box-img {
  width: 100%;
  height: auto;
  margin: 0 0 0.5rem 0;
  border: 0.3rem solid var(--c-primary-black);
}

.error {
  color: var(--c-primary-red);
}

/* Loading */
.loading {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  transition: top 1s ease-in-out;
  z-index: 1000;
  background-color: var(--c-primary-white);
}
.loading-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  gap: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.loading-wrapper > p {
  font-size: var(--fs-700);
}
.loading-wrapper > div {
  animation: loading 1s linear infinite;
  border: 0.5rem solid var(--c-primary-black);
  width: 5rem;
  height: 5rem;
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Popup */
.popup-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99;
  justify-content: center;
  align-items: center;
}
.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--c-primary-white);
  z-index: 100;
  justify-content: center;
  align-items: center;
  border: 0.3rem solid var(--c-primary-black);
  padding: 1rem;
}
.popup > * {
  margin: 0.5rem;
}

.skins-popup {
  display: none;
}
.login-popup,
.create-username-popup,
.create-code-popup,
.stats-popup,
.fullscreen-popup,
.discord-popup {
  display: none;
  flex-direction: column;
}
.code-grid {
  max-width: 24rem;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.5rem;
}
.code-pin,
.create-code-pin {
  width: 2rem;
  height: 2rem;
  border: 0.5rem solid var(--c-primary-black);
  background-color: var(--c-primary-white);
}
#login-error,
#create-code-result,
#create-username-result,
#login-result {
  display: none;
}

.skins-controls-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.skins-controls-wrapper > * {
  margin: 0 0.5rem;
}

#skins-preview {
  width: 5rem;
  height: 5rem;
  border: 0.3rem solid var(--c-primary-black);
}

/* Play screen */
.play-screen-wrapper {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr minmax(0, 45rem) 1fr;
  gap: 1rem;
}
/* Left */
.play-screen-left {
  display: grid;
  grid-template-rows: 1fr 1fr;
}

.util-buttons {
  display: flex;
  flex-direction: column;
  width: 15rem;
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1;
}
.util-buttons > * {
  width: 100%;
  margin: 0 0 0.25rem 0;
  font-size: var(--fs-400);
}

.util-buttons-split {
  display: flex;
  justify-content: space-between;
}

.util-buttons-split > * {
  width: 49%;
}

.yt-button:hover > i,
.disc-button:hover > i {
  color: var(--c-primary-white);
}

.bottom-left {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  width: 100%;
}

.feat-yt {
  border: 0.3rem solid var(--c-primary-black);
  padding: 0.5rem;
  max-width: 15rem;
  margin: 0 0 0.5rem 0;
  background-color: var(--c-primary-white);
  text-align: center;
}
.feat-yt-img {
  max-width: 70%;
}
.feat-yt-link {
  font-size: var(--fs-400);
  margin: 0 0 0.25rem 0;

  font-size: var(--fs-500);
  background-color: var(--c-primary-white);
  border: none;
  transition: none;
  text-decoration: none;
  padding: 0;
  width: fit-content;
  text-align: center;
  outline: none;
}

.game-overview {
  width: 15rem;
}

@media screen and (max-width: 1277px) {
  .util-buttons {
    width: 10rem;
  }
  .game-overview,
  .feat-yt {
    width: 10rem;
  }
}

@media screen and (min-width: 1550px) {
  .util-buttons {
    width: 20rem;
  }
  .game-overview,
  .feat-yt {
    width: 20rem;
  }
}

/* Middle */
.play-screen-middle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.middle-top {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 2rem;
}

.top-ad {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 90px;
}
@media screen and (min-width: 970px) {
  .top-ad {
    display: block;
  }
}

.game-title {
  font-size: var(--fs-900);
  text-align: center;
  font-family: var(--ff-title);
  z-index: 2;
}

.play-controls {
  width: min(100%, 1000px);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0.25rem;
  margin: 0 0 0.5rem 0;
  z-index: 2;
}
.play-controls > * {
  width: 100%;
}

.connecting {
  font-size: var(--fs-400);
  color: var(--c-primary-red);
  display: none;
}

.middle-bottom {
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  z-index: 10;
}

.bottom-ads {
  position: absolute;
  bottom: 4rem;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  flex-direction: column;
  z-index: -10;

  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  margin: 0 0 0.5rem 0;
  min-height: 280px;
}
@media screen and (min-width: 970px) {
  .bottom-ads {
    display: flex;
  }
}
.bottom-ad {
  position: relative;
  width: 336px;
  height: 280px;
  align-self: end;
}

#skip-button {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
}

.bottom-links > a {
  margin: 0 0.5rem;
}

@media screen and (max-width: 1024px) {
  .bottom-links {
    width: 70%;
  }
}

/* Right */
.play-screen-right {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 1fr 1fr;
  justify-items: end;
  align-content: space-between;
  height: 100%;
}

.top-right-buttons {
  margin: 0;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 15rem;
  display: flex;
  flex-direction: column;
}

.top-right-buttons > * {
  width: 100%;
  margin-bottom: 0.5rem;
}

#potions-button {
  margin: 0;
  position: absolute;
  top: 4rem;
  right: 0.5rem;
  width: 15rem;
}

.bottom-right-buttons {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
}

.updates {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
}

@media screen and (max-width: 1277px) {
  .top-right-buttons {
    width: 10rem;
  }

  .updates {
    width: 10rem;
  }
}
@media screen and (min-width: 1550px) {
  .top-right-buttons {
    width: 20rem;
  }

  .updates {
    width: 20rem;
  }
}

/* Game */
.game-wrapper {
  overflow: hidden;
  max-width: 100vw;
  max-height: 100vh;
  display: none;
}

#guide-wrapper {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 80vh;
  border: 0.3rem solid var(--c-primary-black);
  background-color: var(--c-primary-white);
  padding: 1rem;
  text-align: center;
  z-index: 999;
  overflow-y: scroll;
}

.guide-home {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin: 0 0 1rem 0;
}

.guide-sub-home {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 1rem 0;
}

.guide-trap-home,
.guide-enemy-home {
  display: none;
}

.guide-button {
  padding: 0.25rem;
}

#guide-back-button {
  display: none;
}

.guide-img {
  max-width: 3rem;
}

.guide-stat-img {
  max-width: 3rem;
  height: auto;
}

.guide-text {
  font-size: var(--fs-500);
}

.guide-title-text {
  font-size: var(--fs-700);
}

.guide-item {
  display: none;
  box-sizing: border-box;
}

.guide-item-stats {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  justify-content: center;
  margin: 1rem 0 0 0;
}

.guide-item-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

/* Pages */
.page-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-title {
  font-size: var(--fs-900);
  font-family: var(--ff-title);
  text-align: center;
  margin: 1rem;
}

.page-content-wrapper {
  width: 70vw;
  margin: 0 0 0 15vw;
  padding: 0.5rem;
}

.page-card {
  background-color: var(--c-primary-white);
  border: 0.3rem solid var(--c-primary-black);
  padding: 0.5rem;
  margin: 0.5rem 0;
}

.page-card-title {
  font-size: var(--fs-600);
  margin: 0 0 0.5rem 0;
}

.page-card-text {
  font-size: var(--fs-500);
  margin: 0 0 1rem 0;
}

.page-card-list {
  list-style: square;
  margin: 0 0 1rem 1.5rem;
  font-size: var(--fs-500);
}

.page-card-img {
  width: 35%;
  height: auto;
  margin: 0 0 0.5rem 0;
  border: 0.3rem solid var(--c-primary-black);
}

/* Game over screen */
.game-over-screen-wrapper {
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
}
.game-over-top {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  max-width: 70vw;
}
#stats-output {
  font-size: var(--fs-500);
}
#play-again-gold-button {
  margin: 0 0 0.5rem 0;
  font-size: var(--fs-600);
}

.interstitial-ad {
  background-color: var(--c-primary-gray);
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

/* Tops Page */
.podium-wrapper {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: end;
}

.podium {
  width: 28vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0.3rem solid var(--c-primary-black);
}

.day-podium {
  min-height: 60vh;
}
.week-podium {
  min-height: 70vh;
}
.month-podium {
  min-height: 80vh;
}

.podium-title {
  font-size: var(--fs-700);
  text-align: center;
  margin: 1rem;
}

.podium-img {
  width: 35%;
  height: auto;
  margin: 0 0 0.5rem 0;
}

.top-output {
  font-size: var(--fs-600);
  text-align: center;
}

/* Feedback */
#feedback-result {
  display: none;
}