.battleship {
  display: grid;
  justify-items: center;
  gap: .7rem;
  width: 100%;
  min-width: 0;
  --fleet-blue: #97c9ff;
  --fleet-water: #151e38;
  --fleet-line: #344a68;
}

.battleship-tabs, .battleship-actions, .battleship-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .45rem;
}

.battleship-tab {
  min-height: 44px;
  padding: .55rem .8rem;
  border: 1px solid var(--fleet-line);
  border-radius: .65rem;
  background: #202640;
  color: #d2e5ff;
  font: inherit;
  font-size: .85rem;
  font-weight: 750;
  line-height: 1.2;
  touch-action: manipulation;
}

.battleship-tab[aria-pressed="true"] {
  border-color: #81bdff;
  background: #324e70;
  color: #fff;
}

.battleship-tab:disabled { opacity: .53; }
.battleship-note, .battleship-counts { margin: 0; text-align: center; color: #c6dcf8; font-size: .85rem; }
.battleship-note { min-height: 1.4em; }

.battleship-grid {
  display: grid;
  grid-template-columns: minmax(.8rem, .65fr) repeat(10, minmax(0, 1fr));
  align-items: stretch;
  width: min(100%, 25rem);
  min-width: 0;
  gap: clamp(1px, .32vw, 3px);
  padding: clamp(2px, 1vw, 7px);
  border: 1px solid var(--fleet-line);
  border-radius: .65rem;
  background: #10192d;
}

.battleship-coordinate {
  display: grid;
  min-width: 0;
  min-height: 1.1rem;
  place-items: center;
  color: #c3ddfd;
  font: 700 clamp(.57rem, 2vw, .79rem)/1 system-ui, sans-serif;
}

.battleship-cell, .battleship-symbol {
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--fleet-line);
  border-radius: clamp(2px, 1vw, 5px);
  background: var(--fleet-water);
  color: #e7f6ff;
  font: 900 clamp(.78rem, 3.5vw, 1.45rem)/1 system-ui, sans-serif;
}

.battleship-cell { touch-action: manipulation; }
.battleship-cell[aria-disabled="true"] { cursor: default; }
.battleship-cell[aria-disabled="false"]:hover { background: #223d5a; }
.battleship-cell:focus-visible { outline-offset: -2px; }
.battleship-cell.battleship-aiming { border-color: #b4e4ff; box-shadow: inset 0 0 0 2px #a3d6ff; background: #294c6b; }
.battleship [data-mark="1"] { border-color: #75bed4; background: repeating-linear-gradient(135deg, #3a768a 0 22%, #2b5e70 23% 42%); }
.battleship [data-mark="2"] { color: #c7d5e8; background: #24344f; }
.battleship [data-mark="3"] { color: #ffe1de; border-color: #d98184; background: #703c53; }
.battleship [data-mark="4"] { color: #fff2ec; border-color: #ffad8f; background: #955044; box-shadow: inset 0 0 0 1px #ffad8f; }
.battleship-fire { min-width: min(100%, 10rem); }

.battleship-legend { list-style: none; margin: 0; padding: 0; color: #c6dcf8; font-size: .75rem; }
.battleship-legend li { display: inline-flex; align-items: center; gap: .24rem; }
.battleship-symbol { width: .95rem; height: .95rem; font-size: .75rem; }