body {
  background: #b1b1b1;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2vmin;
  flex-wrap: wrap;
}

.header {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.turn-indicator {
  text-align: center;
  font-weight: 600;
  font-size: min(3.5vmin, 18px);
  color: #1f3649;
  margin-bottom: 1vmin;
}

.bungee-tint-regular {
  font-family: "Bungee Tint", sans-serif;
  font-weight: 500;
  font-style: normal;
  line-height: 1.1;
  color: #1f3649;
  text-shadow: 0 0.4vmin 0.6vmin rgba(0, 0, 0, 0.2);
  transition: font-size 0.2s ease;
  font-size: clamp(24px, 6vw, 80px);
  letter-spacing: 0.05em;
}

.boards-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 5vmin;
}

.board-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 6vmin;
  flex-wrap: wrap;
}

.board-title {
  font-weight: 700;
  color: #1f3649;
  margin-bottom: 1vmin;
  font-size: min(4vmin, 18px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.game {
  width: min(75vmin, 75vw);
  aspect-ratio: 1;
  position: relative;
}

/* ===== Root Variables ===== */
:root {
  --n: 10;
  --padT: 7%;
  --padL: 7%;
  --padR: 7%;
  --padB: 7%;
  --pf-pad: 1.5%;
}

/* ===== Labels ===== */
.labels-top,
.labels-left {
  position: absolute;
  color: #e3eef5;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: min(3vmin, 14px);
  user-select: none;
  z-index: 5;
}

.labels-top {
  top: calc(var(--padT) - (100% / var(--n)) + var(--pf-pad));
  left: var(--padL);
  right: var(--padR);
  height: calc(100% / var(--n));
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  align-items: center;
  text-align: center;
}

.labels-left {
  top: var(--padT);
  bottom: var(--padB);
  left: calc(var(--padL) - (100% / var(--n)) * 0.7);
  width: calc(100% / var(--n));
  display: grid;
  grid-template-rows: repeat(var(--n), 1fr);
  align-items: center;
  justify-items: center;
}

/* ===== Board ===== */
.board {
  position: absolute;
  top: var(--padT);
  left: var(--padL);
  right: var(--padR);
  bottom: var(--padB);
  background: #6aa7c0;
  border-radius: 1vmin;
  border: 0.8vmin solid #213847;
  box-shadow: 0 1vmin 2vmin rgba(0, 0, 0, 0.15);
  padding: var(--pf-pad);
  box-sizing: border-box;
}

.playfield {
  position: relative;
  width: 100%;
  height: 100%;
}

.grid {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0 1px, transparent 1px calc(100% / var(--n))),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0 1px, transparent 1px calc(100% / var(--n)));
  opacity: 0.35;
  pointer-events: none;
}

/* ===== Cells ===== */
.row {
  position: absolute;
  width: 100%;
  height: calc(100% / var(--n));
}

.cell {
  position: absolute;
  top: 0;
  width: calc(100% / var(--n));
  height: 100%;
}


/* ===== Ships ===== */
.ship {
  --x: 0;
  --y: 0;
  --w: 1;
  --h: 1;
  --rotate: 0deg;

  position: absolute;
  left: calc(var(--x) * 100% / var(--n));
  top: calc(var(--y) * 100% / var(--n));
  width: calc(var(--w) * 100% / var(--n));
  height: calc(var(--h) * 100% / var(--n));
  transform: rotate(var(--rotate));
  transform-origin: center;
  filter: drop-shadow(0 0.4vmin 0.7vmin rgba(0, 0, 0, 0.3));
  z-index: 5;
  pointer-events: none;
}

.ship[style*="--rotate:90deg"] {
  transform-origin: top left;
  transform: rotate(90deg) translateY(-100%);
  width: calc(var(--h) * 10%);
  height: calc(var(--w) * 10%);
}

.ship img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ===== Markers ===== */
.marker {
  position: absolute;
  width: calc(100% / var(--n));
  height: calc(100% / var(--n));
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 7vmin;
  font-weight: bold;
  color: white;
  pointer-events: none;
}

.marker.hit::before {
  content: "✕";
  color: #d33;
}

.marker.miss::before {
  content: "•";
  color: #1a4a64;
  font-size: 3vmin;
}