@font-face {
  font-family: germania;
  src: url(9f89c9c6863527eb5424.ttf)
}

@media (max-width: 800px) {
  #boards {
    flex-direction: column;
    gap: 0px !important;
    align-items: flex-start;
  }
}
@media (max-width: 550px) {
  section#dialogue div {
    transform: none !important;
  }
  
  #info > p {
    padding-left: 0.6rem !important;
    width: 10rem;
  }
  
  header {
    justify-content: center;
  }

  .board-header {
    justify-content: space-around !important;
  }

}

body {
  margin: 0;
  font-family: 'germania';
}

h3 {
  font-size: 1.35rem;
}

/* #################### Header ######################### */

header {
  display: flex;
  align-items: center;
  height: 4.3rem;  
  --s: 4px; /* control the size*/
  --c1: #e5fcc2;
  --c2: #0cbbdea3;
  --_s:37.5% 12.5% at 62.5%;
  --_g:34% 99%,#0000 101%;
  --g1:radial-gradient(var(--_s) 100%,#0000 32%,var(--c1) var(--_g));
  --g2:radial-gradient(var(--_s) 0   ,#0000 32%,var(--c1) var(--_g));
  --g3:radial-gradient(var(--_s) 100%,#0000 32%,var(--c2) var(--_g));
  --g4:radial-gradient(var(--_s) 0   ,#0000 32%,var(--c2) var(--_g));
  background:
  var(--g1),
  var(--g2) 0                calc(3*var(--s)),
  var(--g3) var(--s)         calc(3*var(--s)),
  var(--g4) var(--s)         calc(6*var(--s)),
  var(--g1) calc(2*var(--s)) calc(6*var(--s)),
  var(--g2) calc(2*var(--s)) calc(9*var(--s)),
  var(--g3) calc(3*var(--s)) calc(9*var(--s)),
  var(--g4) calc(3*var(--s)) 0,
  repeating-linear-gradient(var(--c1) 0 25%,var(--c2) 0 50%);
  background-size: calc(4*var(--s)) calc(12*var(--s));
}

h1#logo-type {
  font-family: 'germania';
  letter-spacing: 0.1rem;
  font-size: 3rem;
  margin: 0.2;
  margin-left: 2rem;
  /* justify-self: start; */
  color: rgb(4, 4, 56);
  background-color: rgba(255, 255, 255, 0.3);
}

h1#logo-type span {
  margin-left: 1.1rem;
  font-size: 2.6rem;
}

/* #################### Info section ######################### */
section#dialogue {
  display: flex;
  justify-content: center;
  /* align-items: center; */
}
section#dialogue div {
  display: flex;
  align-items: center;
  transform: translateX(4rem);
}

section#dialogue div p {
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  height: 2rem; 
  width: 13rem;
  border-radius: 4px;
  background-color: rgb(224, 223, 223);
  padding-left: 0.8rem;
}

@keyframes pulseText {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
  
section#dialogue div p.win {
  animation: pulseText 1s ease-in-out 3;
  animation-fill-mode: both;
}

button {
  height: 1.7rem;
  font-family: 'germania';
  cursor: pointer;
}

section#dialogue button {
  width: 7rem;
  margin-left: 1rem;
}

section#computer-fleet {
  margin-left: 4rem;
  transform: translateX(4rem);
}

/* #################### Fleet section ######################### */
/* #human-fleet > h5, #computer-fleet > h5 {
  margin: 0;
  margin-bottom: 0.2rem;
} */

/* 5x5 Grid Layout */
.fleet-grid {
  display: grid;
  grid-template-columns: repeat(5, 5px); /* 5 columns */
  grid-template-rows: repeat(5, 5px); /* 5 rows */
  gap: 2px 1px; /* Horizontal gap: 2px, Vertical gap: 1px */
  /* background-color: #ddd; */
  /* padding: 0.2rem; */
  width: max-content;
}

/* Ship Cells */
.grid-item {
  width: 5px;
  height: 5px;
  background-color: rgb(117, 117, 206);
  border-radius: 1px; /* Slight rounded corners */
}

.grid-item.hit {
  background-color: red;
}

/* Positioning Ships Using Grid */
.carrier:nth-child(1) { grid-column: 1; grid-row: 1; }
.carrier:nth-child(2) { grid-column: 2; grid-row: 1; }
.carrier:nth-child(3) { grid-column: 3; grid-row: 1; }
.carrier:nth-child(4) { grid-column: 4; grid-row: 1; }
.carrier:nth-child(5) { grid-column: 5; grid-row: 1; }

.battleship:nth-child(6) { grid-column: 1; grid-row: 2; }
.battleship:nth-child(7) { grid-column: 2; grid-row: 2; }
.battleship:nth-child(8) { grid-column: 3; grid-row: 2; }
.battleship:nth-child(9) { grid-column: 4; grid-row: 2; }

.cruiser:nth-child(10) { grid-column: 1; grid-row: 3; }
.cruiser:nth-child(11) { grid-column: 2; grid-row: 3; }
.cruiser:nth-child(12) { grid-column: 3; grid-row: 3; }

.submarine:nth-child(13) { grid-column: 1; grid-row: 4; }
.submarine:nth-child(14) { grid-column: 2; grid-row: 4; }
.submarine:nth-child(15) { grid-column: 3; grid-row: 4; }

.destroyer:nth-child(16) { grid-column: 1; grid-row: 5; }
.destroyer:nth-child(17) { grid-column: 2; grid-row: 5; }

/* #################### Boards section ######################### */
#boards {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 10vw, 6rem);
  margin-top: 2%;
}

.board {
  display: grid;
  grid-template-columns: auto repeat(10, 1fr);
  grid-template-rows: auto repeat(10, 1fr);
  max-width: 25rem;
}

.board-header {
  display: flex;
  justify-content: space-between;
  margin-left: 1.6rem;
}

.board-title {
  text-align: center;
  margin-top: 0;
}

.board tbody {
  display: contents;
  aspect-ratio: 1/1;
}

.board th {
  font-weight: bold;
  padding: 0.5rem;
}

.board tr {
  display: contents;
}

.board td {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  vertical-align: middle;
  /* font-size: min(5vw, 5vh); */
  font-size: xx-large;
  width: 100%;
  height: 100%;
  border: 0.2px solid black;
  aspect-ratio: 1/1; 
  padding: 0;
}

.board td.sunk {
  box-shadow: inset 0 0 0 2px red;
}

#reload-btn {
  display: block;
  margin: 2rem auto;
  transform: translateX(1.5rem);
  
  /* margin-left: auto;
  margin-right: auto; */
  /* justify-self: center; */
}

/* #################### Confetti section ######################### */
@keyframes fall {
  0% {
    transform: translateY(5vh) rotate(0deg); /* Start above the viewport */
  }
  100% {
    transform: translateY(250vh) rotate(900deg); /* End far below the viewport */
  }
}

.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 1000;
}

.confetti-piece {
  position: absolute;
  width: 8px;
  height: 14px;
  opacity: 0.8;
  animation: fall 2.7s linear forwards, rotate 1s linear infinite; /* Adjusted duration for full fall */
  transform-origin: center;
  pointer-events: none;
  animation-fill-mode: forwards;
}

.confetti-container .confetti-piece:nth-child(odd) {
  background-color: #ff6347;
}

.confetti-container .confetti-piece:nth-child(even) {
  background-color: #3cb371;
}