style.scss

@import url('sanitize.css');
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Poppins:wght@700&display=swap');

@mixin flex($direction) {
  display: flex;
  flex-direction: $direction;
  justify-content: center;
  align-items: center;
}

@mixin modal {
  position: absolute;
  @include flex(column);
  gap: 1rem;
  top: 0;
  right: 0;
  width: 100vw;
  min-height: 100vh;
  height: 100%;
  font-family: var(--ff-main);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

@mixin button {
  font-family: var(--ff-main);
  font-size: var(--font-size-md);
  padding: 1rem;
  border: none;
  border-radius: 5px;
  background-color: var(--col-background);
  border: 2px solid transparent;
  color: var(--col-main);
  box-shadow: var(--box-shadow);
}

:root {
  --ff-main: 'Poppins', sans-serif;
  --ff-title: 'Alfa Slab One', cursive;

  --font-size-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
  --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
  --font-size-md: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
  --font-size-lg: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
  --font-size-xl: clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem);
  --font-size-xxl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
  --font-size-xxxl: clamp(3.05rem, 3.54vw + 2.17rem, 5rem);

  --col-main: #bb86fc;
  --col-secondary: #03dac6;
  --col-text: #ffffff;
  --col-btn-text: #000000;
  --col-background: #121212;
  --col-accent: #3700b3;
  --col-error: #cf6679;
  --col-error-acc: #ff0266;

  --text-shadow: 0px 2px 14px rgba(8, 8, 8, 0.9);
  --box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
    rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

body {
  height: 100%;
  min-height: 100vh;
  background-color: var(--col-background);
  color: var(--col-secondary);
  @include flex(column);
}

/* Header/title section */

header {
  height: min-content;
}

.header-title {
  font-family: var(--ff-title);
  font-size: var(--font-size-xl);
}

/* Main section (player/bot gameboards) */

main {
  height: 100%;
  @include flex(row);
  gap: var(--font-size-xl);
  font-family: var(--ff-main);
}

.gameboard {
  @include flex(column);
}

.player-board,
.bot-board,
.start-board {
  background-color: var(--col-text);
  display: grid;
  grid-template-columns: repeat(10, 5.5vmin);
  grid-template-rows: repeat(10, 5.5vmin);
  border: 2px solid var(--col-background);
  box-shadow: var(--box-shadow);
}

.player-tile,
.bot-tile,
.start-tile {
  border: 1px solid var(--col-background);
}

.ship {
  background-color: var(--col-secondary);
}

.hit {
  background-color: var(--col-error);
}

.miss {
  background-color: var(--col-main);
}

.sunk {
  background-color: var(--col-error-acc);
}

/* Start-game modal */

.start-modal {
  @include modal();
  display: flex;
  padding: 0 1rem;

  h3 {
    font-family: var(--ff-title);
    font-size: var(--font-size-lg);
    text-shadow: var(--text-shadow);
    background-color: #121212ee;
    padding: 1rem;
    border-radius: 5px;
    border: 2px solid var(--col-secondary)
  }

  .start-btn-container {
    @include flex(row);
    gap: 2rem;
  }

  button {
    @include button();

    &.go {
      background-color: var(--col-secondary);
      color: var(--col-btn-text);

      &:hover {
        background-color: #14e9d4;
        border: 2px solid var(--col-btn-text);
      }
    }

    &:hover {
      cursor: pointer;
      background-color: #000000;
      border: 2px solid var(--col-main);
    }
  }
}

/* start game board */

.hover {
  background-color: #16131a81;
}

.clicked {
  background-color: var(--col-main);
}

.error {
  background-color: var(--col-error);
}

/* Footer (link) */

footer {
  height: min-content;
  padding: 2rem;
  .footer-link {
    height: var(--font-size-lg);
    width: var(--font-size-lg);

    a {
      color: var(--col-secondary);
    }

    &:hover {
      transform: scale(1.4);
    }
  }
}

/* End-game modal */

.end-modal {
  @include modal();
  display: none;

  .result-text {
    font-size: var(--font-size-lg);
    text-shadow: var(--text-shadow);
    background-color: #121212a9;
    padding: 1rem;
    border-radius: 5px;
    border: 2px solid var(--col-secondary)
  }

  button {
    @include button();

    &:hover {
      cursor: pointer;
      background-color: #000000ea;
      border: 2px solid var(--col-main);
    }
  }
}

/* Media query for mobile screens */

@media screen and (max-width: 1000px) {
  .player-board,
  .bot-board,
  .start-board {
    display: grid;
    grid-template-columns: repeat(10, 4.5vmin);
    grid-template-rows: repeat(10, 4.5vmin);
  }
}

@media screen and (max-width: 768px) {
  #main {
    @include flex(column);
  }
  .player-board,
  .bot-board,
  .start-board {
    display: grid;
    grid-template-columns: repeat(10, 6.5vmin);
    grid-template-rows: repeat(10, 6.5vmin);
  }
}