@font-face {
  font-family: "AldercyPixel";
  src: url(../src/assets/fonts/AldercyPixelDemoRegular-nAgdg.otf)
    format("opentype");
}

@font-face {
  font-family: "NapzerPixel";
  src: url(../src/assets/fonts/NapzerPixelDemoRegular-aYyLa.otf)
    format("opentype");
}

@font-face {
  font-family: "AlvinusPixel";
  src: url(../src/assets/fonts/AlvinusPixelDemoRegular-pg9od.otf)
    format("opentype");
}

:root {
  --w-header: #09032b;
  --w-background: #040115;
  --w-gradient-background: linear-gradient(
    0deg,
    rgba(9, 3, 43, 1) 0%,
    rgba(4, 1, 21, 1) 15%,
    rgba(4, 1, 21, 1) 85%,
    rgba(9, 3, 43, 1) 100%
  );
  --w-text: #dee8f4;
  --w-text-highlight: #9e7cf3;

  --board-background: #080227;
  --board-highlighted: #3c1fca;
  --board-invalid: #ee2936;
  --board-outline: #d2d0da32;

  --highlighted: #f2f1fa;

  --t-size-button: 1rem;
  --t-size-button-small: 1rem;

  --gameboard-box-shadow: #05030e92;

  --button-start-bg-color: #3e10b3;
  --button-toggles-bg-color: #0d0f7b;
  --button-music-bg-color: #1310b3;
  --button-disabled: #15063b;
  --button-start-background: #10052e;

  --font-emphasize: "AldercyPixel", serif;
  --font-strong: "AlvinusPixel", serif;
  --font-normal: "NapzerPixel", serif;

  --board-size: min(40vw, 420px);
  --board-size-small: 70vw;
}

* {
  box-sizing: border-box;
  margin: 0;
  font-size: min(2vw, 15px);
}

html,
body {
  width: 100%;
  color: var(--w-text);
  font-family: var(--font-normal);
}

body {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--w-gradient-background);
  width: 100%;
  height: 100%;

  padding-top: 3rem;
  padding-bottom: 5rem;
}

h1 {
  font-size: min(3.2rem, 5vw);
  font-family: var(--font-emphasize);
  line-height: 0.8;
  text-align: center;
}

h2 {
  font-size: 2rem;
}

header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 8rem;
  padding: 5rem 0 2rem;

  background-color: var(--w-header);
  width: 100%;
}

footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem 0 2rem;

  background-color: var(--w-header);
  width: 100%;
}

#logo {
  width: 25rem;
}

#github a {
  font-size: 1.5rem;
  font-family: var(--font-normal);
  font-weight: 500;
  color: var(--w-text)
}

#github a:hover {
  color: var(--w-text-highlight)
}

#github-logo {
  width: 3rem;
  transition: rotate 0.5s;
}

#github-logo:hover {
  width: 3rem;
  rotate: 360deg;
}

#github {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.label {
  font-family: var(--font-emphasize);
  font-size: 2.3rem;
  text-align: center;
  margin-bottom: 0.2rem;
}

button:hover {
  cursor: pointer;
  filter: brightness(0.8);
}

button:active {
  cursor: pointer;
  filter: brightness(1);
}

#toggle-options {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  gap: 1rem;

  background-color: var(--button-start-background);
  padding: 0.5rem 2rem;
  outline: none;
  border: 0.2rem solid var(--board-outline);
  border-radius: 3rem;
}

#text-display {
  margin: 1rem 3rem 0.5rem;
  font-size: 1.5rem;
  text-align: center;
  font-weight: 400;
}

#start-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  gap: 1rem;
  width: fit-content;

  background-color: var(--button-start-background);
  padding: 0.5rem 2rem;
  outline: none;
  border: 0.2rem solid var(--board-outline);
  border-radius: 3rem;
}

#start-btn {
  font-size: 1.5rem;
  font-family: var(--font-emphasize);
  background-color: var(--button-start-bg-color);
  padding: 1rem 2rem;
  color: var(--w-text);

  outline: none;
  border: 0.2rem solid var(--board-outline);
  border-radius: 3rem;
}

#difficulty-select {
  font-size: calc(var(--t-size-button) * 1.5);
  font-family: var(--font-emphasize);
  background-color: var(--button-start-bg-color);
  padding: 1rem 1.5rem;
  color: var(--w-text);

  outline: none;
  border: 0.2rem solid var(--board-outline);
  border-radius: 3rem;
}

#rotate-btn {
  font-size: var(--t-size-button);
  font-family: var(--font-emphasize);
  background-color: var(--button-toggles-bg-color);
  padding: 0.5rem 1.5rem;
  color: var(--w-text);

  outline: none;
  border: 0.2rem solid var(--board-outline);
  border-radius: 3rem;
}

#toggle-probability {
  font-size: var(--t-size-button);
  font-family: var(--font-emphasize);
  background-color: var(--button-toggles-bg-color);
  padding: 0.5rem 1.5rem;
  color: var(--w-text);
  width: 18rem;

  outline: none;
  border: 0.2rem solid var(--board-outline);
  border-radius: 3rem;
}

#toggle-targets {
  font-size: var(--t-size-button);
  font-family: var(--font-emphasize);
  background-color: var(--button-toggles-bg-color);
  padding: 0.5rem 1.5rem;
  color: var(--w-text);
  width: 12rem;

  outline: none;
  border: 0.2rem solid var(--board-outline);
  border-radius: 3rem;
}

#toggle-music {
  font-size: var(--t-size-button);
  font-family: var(--font-emphasize);
  background-color: var(--button-music-bg-color);
  padding: 0.5rem 1.5rem;
  color: var(--w-text);
  width: 10rem;

  outline: none;
  border: 0.2rem solid var(--board-outline);
  border-radius: 3rem;
}

/* ------- */
/* DETAILS */
/* ------- */
#details-container {
  padding-top: 2rem;
}

.details {
  width: 75vw;
  cursor: pointer;
  padding: 1rem 0;
  border-bottom: 0.2rem solid var(--board-outline);
}

#about-intro {
  margin: 3rem 0 1rem;
  text-align: center;
  font-family: var(--font-strong);
  font-weight: 600;
  font-size: 2.5rem;
  color: var(--w-text);
  line-height: 2rem;
}

.about-title {
  font-family: var(--font-strong);
  font-size: 2rem;
  font-weight: 500;
  color: var(--w-text);
  padding-left: 1.5vw;
  line-height: 2rem;
  padding: 0.2rem 0;
}

.about-title:hover {
  color: var(--w-text-highlight);
}

ul {
  padding: 0 5vw;
}

li::marker {
  font-family: var(--font-normal);
}

.second-li {
  padding-left: 0rem;
}

strong {
  font-weight: 100;
  font-size: 1.5rem;
  font-family: var(--font-strong);
  color: var(--w-text);
  text-align: justify;
}

li {
  font-family: var(--font-normal);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--w-text);
  text-align: justify;
  padding-bottom: 2vh;
}

.about-content {
  max-height: 0;
  transition: max-height 1s ease-out;
  overflow: hidden;
}

.details.active .about-content {
  transition: padding-top max-height 0.7s ease-in;
  max-height: 200vh;
}

.gameboard {
  background-color: var(--board-outline);
  width: var(--board-size);
  height: var(--board-size);

  display: grid;
  grid-gap: 0.25vw;
  border: 0.2vw solid var(--board-outline);
  box-shadow: 10px 10px var(--gameboard-box-shadow);

  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.cell {
  position: relative;
  overflow: visible;
  width: 100%;
  height: 100%;
  background-color: var(--board-background);

  display: flex;
  justify-content: center;
  align-items: center;
}

#computer-board {
  cursor: pointer;
}

#computer-board .has-hit {
  cursor: not-allowed;
}

#gameboard-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 5vw;
}

.ship-img {
  z-index: 50;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  object-fit: contain;
  transform-origin: top center;

  cursor: pointer;
}

.hit-img {
  z-index: 60;
  width: 90%;
  height: 90%;

  filter: brightness(500);
  /* temporary */
}

.human-ship.sunk-img {
  -webkit-filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black)
    brightness(0.3);
  filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black)
    brightness(0.3);
}

.sunk-img {
  -webkit-filter: drop-shadow(1px 1px 0 white) drop-shadow(-1px -1px 0 white);
  filter: drop-shadow(1px 1px 0 white) drop-shadow(-1px -1px 0 white)
    brightness(1.2);
}

#full-game-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5vw;
}

#settings {
  width: var(--board-size);
  height: var(--board-size);
  background-color: var(--board-background);
  border: 0.2vw solid var(--board-outline);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  box-shadow: 10px 10px var(--gameboard-box-shadow);
}

#settings-label {
  font-size: max(2vw, 20px);
}

#ships-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  padding: 1vw;
}

.horizontal {
  transform: rotate(90deg);
}

#ships-container img {
  width: min(5vw, 50px);
}

.ship-placed {
  filter: brightness(0.4);
}

.human-ship:hover {
  -webkit-filter: drop-shadow(2px 2px 0 var(--highlighted))
    drop-shadow(-2px -2px 0 var(--highlighted));
  filter: drop-shadow(2px 2px 0 var(--highlighted))
    drop-shadow(-2px -2px 0 var(--highlighted)) brightness(1.2);
}

.no-hover.ship-img:hover {
  filter: none !important;
  -webkit-filter: none !important;
  cursor: auto;
}

.no-hover.human-ship.sunk-img:hover {
  -webkit-filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black)
    brightness(0.3) !important;
  filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black)
    brightness(0.3) !important;
}

#ships-container img:hover,
.highlighted-ship {
  -webkit-filter: drop-shadow(2px 2px 0 var(--highlighted))
    drop-shadow(-2px -2px 0 var(--highlighted));
  filter: drop-shadow(2px 2px 0 var(--highlighted))
    drop-shadow(-2px -2px 0 var(--highlighted)) brightness(1.2);
  cursor: pointer;
}

.highlighted-cell {
  background-color: var(--board-highlighted);
  cursor: pointer;
}

.invalid-cell {
  background-color: var(--board-invalid);
  cursor: pointer;
}

#bg-music {
  display: none;
}

.probability-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(16, 5, 77, 1);
  pointer-events: none;
  z-index: 1;
}

.target-img {
  z-index: 60;
  width: 90%;
  height: 90%;
  position: absolute;
  opacity: 0.7;
}

#human-container,
#settings-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#computer-container {
  display: none;
  flex-direction: column;
  align-items: center;
}

.disabled-btn {
  background-color: var(--button-disabled) !important;
  cursor: not-allowed !important;
}

@media (max-width: 750px) {
  header {
    height: 15rem;
  }

  main {
    padding: 0rem 0;
  }

  h1 {
    font-size: 3.5rem;
    font-family: var(--font-emphasize);
    line-height: 0.8;
    text-align: center;
  }

  .gameboard {
    width: var(--board-size-small);
    height: var(--board-size-small);
    grid-gap: 0.5vw;
    border: 0.5vw solid var(--board-outline);
  }

  #gameboard-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #full-game-container {
    display: flex;
    flex-direction: column;
    gap: 5vw;
  }

  #settings {
    width: var(--board-size-small);
    height: var(--board-size-small);
    border: 0.5vw solid var(--board-outline);
  }

  #toggle-probability {
    font-size: var(--t-size-button-small);
    width: 16.5rem;
  }

  #toggle-targets {
    font-size: var(--t-size-button-small);
    width: 11.5rem;
  }

  #toggle-music {
    font-size: var(--t-size-button-small);
    width: 10rem;
  }

  #ships-container img {
    width: 8vw;
  }
}