/* =========================
   BASE (no scroll, full-viewport)
   ========================= */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;                    /* no page scroll */
  font-family: "Roboto Mono", monospace;
  font-size: 62.5%;                    /* 1rem = 10px */
  background: url('bg.png') center/cover no-repeat #000;
  color: #00ffaa;
  text-shadow: 0 0 6px #00ffaa;
  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }

/* Layout vars (desktop/tablet defaults) */
:root {
  --gap: clamp(12px, 2.2vmin, 24px);
  --sidebarW: clamp(160px, 19vw, 260px);
  --boardSize: clamp(180px, min(58vmin, 68svh, calc(96dvw - var(--sidebarW) - var(--gap) - 16px)), 480px);
}

.game-section {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;   /* title | game | controls (desktop) */
  align-items: start;
  justify-items: center;
  padding: 0 1.2rem;
  background: rgba(0,0,0,0.6);
}

/* Headline */
.game-section h1 {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(2.2rem, 3.5vw, 3.2rem);
  margin: .05rem 0 .12rem;
  line-height: .92;
  text-shadow: 0 0 12px #00ffaa, 0 0 24px #00ffaa44;
}
.game-section p, #message, #torpedoCount {
  font-family: "Roboto Mono", monospace;
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  margin: .05rem 0;
  line-height: 1.05;
}

/* Main row (board + sidebar) */
#gameContainer {
  display: flex;
  gap: var(--gap);
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 96dvw;
  max-height: calc(100svh - 10rem);
  margin: .15rem auto 0;
  flex-wrap: nowrap;
}

/* Board */
#board {
  width: var(--boardSize);
  height: var(--boardSize);
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  gap: clamp(2px, 0.6vmin, 4px);
  background: rgba(0, 77, 77, 0.8);
  padding: clamp(4px, 0.8vmin, 8px);
  padding-top: 2px;
  border: 2px solid #00ffaa;
  border-radius: 8px;
  box-shadow: 0 0 15px #00ffaa;
  min-width: 180px; min-height: 180px;
  background-clip: padding-box;
}

/* Sidebar */
#shipStatus {
  width: var(--sidebarW);
  min-width: 160px;
  max-width: 280px;
  max-height: var(--boardSize);
  overflow: hidden;
  background: rgba(0, 34, 34, 0.92);
  border: 2px solid #00ffaa;
  border-radius: 8px;
  padding: 1rem .7rem;
  box-shadow: 0 0 15px #00ffaa;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  text-align: center;
  align-self: flex-start;
  font-family: "Roboto Mono", monospace;
}
#shipStatus h2 {
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  margin: 0 0 6px;
  border-bottom: 1px solid #00ffaa;
  padding-bottom: .25em;
}
#shipStatus ul { list-style: none; padding: 0; margin: 0; }
#shipStatus li {
  padding: 2px 0 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  font-size: 0.9em; /* slightly smaller text */
  border-bottom: 1px dotted #008877;
}
#shipStatus li:last-child { border-bottom: none; }
#shipStatus li.sunk { color: #ff4444; text-decoration: line-through; font-weight: bold; opacity: .7; }

/* Cells */
#board .cell { position: relative; }
.cell {
  width: 100%; height: 100%; aspect-ratio: 1 / 1;
  background-color: #004d4d;
  border: 1px solid #00ffaa;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 1.5rem; font-weight: bold; color: yellow; text-shadow: 0 0 5px orange;
  background-position: center; background-repeat: no-repeat; background-size: contain;
}
.cell.hit  { background-color: #ff3333; box-shadow: 0 0 10px #ff5555; cursor: default; }
.cell.miss { background-color: #999; opacity: .7; cursor: default; }
.cell.sunk-part { background-color: #8B0000; box-shadow: 0 0 15px 5px #FF4500; color: #FFD700; }

/* Controls */
.controls {
  display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center;
  margin: .6rem 0 1rem;
}
.controls button {
  padding: .6em 1em;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  background-color: #002222; color: #00ffaa;
  border: 2px solid #00ffaa; border-radius: 6px;
  cursor: pointer; transition: background-color .3s, color .3s;
  font-family: "Roboto Mono", monospace;
}
.controls button:hover, .controls button:focus { background-color: #004d4d; color: #aaffcc; }

/* Scrollbars */
body, html { scrollbar-width: thin; scrollbar-color: #56c8f7 #181c23; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(87,200,247,0.17); }

/* Red strike line */
.red-strike {
  position: absolute; top: 50%; left: 0; width: 100%; height: 2px;
  background-color: red; transform: rotate(-45deg); transform-origin: center; pointer-events: none;
}

/* Shake animation */
@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(3px, -1px); }
  60% { transform: translate(-3px, 2px); }
  80% { transform: translate(2px, -2px); }
}
.shake { animation: shake .5s ease; }

/* Game Over overlay */
#gameOverOverlay { position: fixed; inset: 0; display: grid; place-items: center; background: #000 url('ships/over.png') center/cover no-repeat !important; z-index: 100000; }
#gameOverOverlay.hidden { display: none; }
#gameOverOverlay h1 {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(2rem, 6vw, 5rem);
  color: #ff2020;
  text-shadow: 0 0 8px rgba(255,0,0,0.8), 0 0 20px rgba(255,0,0,0.5);
  animation: gameover-pulse 1.2s infinite alternate ease-in-out;
}
@keyframes gameover-pulse { from { transform: scale(.98); opacity: .9; } to { transform: scale(1.02); opacity: 1; } }

/* Play Again button */
#gameOverOverlay .overlay-content { text-align: center; }
#playAgainButton {
  display: block; margin: 1.2rem auto 0; padding: .7em 1.2em;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  background-color: #002222; color: #00ffaa; border: 2px solid #00ffaa; border-radius: 6px;
  cursor: pointer; text-shadow: 0 0 6px #00ffaa; transition: background-color .3s, color .3s, transform .05s;
  font-family: "Roboto Mono", monospace;
}
#playAgainButton:hover, #playAgainButton:focus { background-color: #004d4d; color: #aaffcc; }

/* Sunk popup */
#sunkPopup { position: fixed !important; inset: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; background: rgba(0,0,0,.55) !important; z-index: 10050 !important; }
#sunkPopup.hidden { display: none !important; }
#sunkShipName { order: 0; font-family: "Roboto Mono", monospace; font-size: clamp(1.6rem, 4.2vw, 2.4rem); color: #ffdddd; text-shadow: 0 0 10px rgba(255,0,0,0.7); margin: 0 0 1rem; text-align: center; }
#sunkImage {
  order: 1; display: block !important; margin: 0 auto !important; position: static !important;
  max-width: min(80dvw, 80vmin) !important; max-height: 60svh !important;
  width: auto !important; height: auto !important; object-fit: contain !important;
  image-rendering: pixelated; box-shadow: 0 12px 32px rgba(0,0,0,0.6);
}
/* =========================
   Game Over — Brand link
   ========================= */
#gameOverOverlay .brand-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;

  margin: .8rem auto 0;
  padding: .55em .9em;
  text-decoration: none;

  background: rgba(0, 34, 34, 0.85);
  color: #00ffaa;
  border: 2px solid #00ffaa;
  border-radius: 8px;

  text-shadow: 0 0 6px #00ffaa;
  box-shadow: 0 0 12px #00ffaa55, inset 0 0 14px #00ffaa22;
  filter: drop-shadow(0 0 8px #00ffaa44);

  cursor: pointer;
  transition:
    transform .06s ease,
    box-shadow .25s ease,
    background-color .25s ease,
    color .25s ease,
    filter .25s ease;
  will-change: transform, box-shadow, filter;
}

#gameOverOverlay .brand-link:hover,
#gameOverOverlay .brand-link:focus-visible {
  transform: translateY(-1px) scale(1.02);
  background: rgba(0, 77, 77, 0.9);
  color: #aaffcc;
  box-shadow:
    0 0 16px #00ffaa,
    0 0 28px #00ffaa55,
    inset 0 0 18px #00ffaa33;
  outline: none;
}

#gameOverOverlay .brand-link:active {
  transform: translateY(0) scale(0.99);
}

/* logo + tagline */
#gameOverOverlay .brand-link img {
  height: clamp(18px, 3.2vmin, 32px);
  width: auto;
  image-rendering: pixelated;
  display: block;
  filter: drop-shadow(0 0 3px #00ffaaaa);
}

#gameOverOverlay .brand-link span {
  font-family: "Roboto Mono", monospace;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.1;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* strong keyboard focus ring for a11y */
#gameOverOverlay .brand-link:focus-visible {
  box-shadow:
    0 0 0 3px #002222,
    0 0 0 5px #00ffaa,
    0 0 18px #00ffaa88,
    inset 0 0 18px #00ffaa33;
}

/* motion sensitivity */
@media (prefers-reduced-motion: reduce) {
  #gameOverOverlay .brand-link { transition: none; }
  #gameOverOverlay .brand-link:hover,
  #gameOverOverlay .brand-link:focus-visible { transform: none; }
}

/* Mobile polish (≤ 560px) */
@media (max-width: 560px) {
  #gameOverOverlay .brand-link {
    max-width: min(86vw, var(--boardSize));
    width: max-content;
    gap: .5rem;
    padding: .55em .8em;
  }
  #gameOverOverlay .brand-link img { height: 20px; }
  #gameOverOverlay .brand-link span {
    font-size: .95rem;
    white-space: normal;              /* allow wrap on small screens */
    text-align: center;
  }
}

/* =========================
   MOBILE (≤ 560px): clean rules
   ========================= */
@media (max-width: 560px) {
  :root {
    --controlsH: 60px;
    --boardSize: min(86vw, 44vh, 320px); /* safe size */
  }

  .game-section {
    grid-template-rows: auto 1fr auto;
    padding: 8px 10px !important;
  }
  .game-section h1 { margin: 0 0 .2rem !important; line-height: .95 !important; }
  #message, #torpedoCount { margin: 0 !important; line-height: 1 !important; }

  #gameContainer {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #board {
    width: var(--boardSize) !important;
    height: var(--boardSize) !important;
    margin: 4px auto 8px !important;
    gap: 1.6px !important;
    padding: 4px !important;
    border-width: 1.5px !important;
  }

  #shipStatus {
    width: var(--boardSize) !important;
    max-width: var(--boardSize) !important;
    margin: 0 auto 10px auto !important;
    padding: .6rem .5rem !important;
    font-size: .85rem !important;
    line-height: 1.2 !important;
    max-height: 28vh !important;
    overflow: auto !important;
  }
  #shipStatus h2 { font-size: .95rem !important; margin-bottom: 4px !important; }
  #shipStatus li { font-size: .85rem !important; padding: 1px 0 !important; line-height: 1.2 !important; }

  .controls {
    position: static !important;
    margin-top: 6px !important;
    gap: 10px !important;
    background: transparent !important;
  }
  .controls button {
    flex: 1 1 auto !important;
    max-width: 46% !important;
    font-size: .85rem !important;
    padding: .5em .8em !important;
  }
}