/* Recognizable top-down naval art for the Data Battleship board and game tile. */
.game-tile-preview-battleship {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 8px 12px;
}

.mini-naval-display {
  position: relative;
  width: min(100%, 245px);
  height: 66px;
  overflow: hidden;
  border: 1px solid rgba(94, 213, 222, 0.42);
  border-radius: 8px;
  background:
    radial-gradient(circle at 78% 35%, rgba(64, 255, 226, 0.13), transparent 24%),
    linear-gradient(rgba(87, 225, 234, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(87, 225, 234, 0.1) 1px, transparent 1px),
    #072936;
  background-size: auto, 13px 13px, 13px 13px, auto;
  box-shadow: inset 0 0 16px rgba(46, 214, 220, 0.12);
}

.mini-warship {
  position: absolute;
  width: 74px;
  height: 24px;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.55));
}

.mini-warship-friendly {
  top: 11px;
  left: 14px;
  transform: rotate(-8deg);
}

.mini-warship-enemy {
  right: 17px;
  bottom: 8px;
  width: 60px;
  filter: grayscale(0.35) brightness(0.72) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.6));
  transform: rotate(174deg);
}

.mini-warship-hull {
  position: absolute;
  inset: 1px 0;
  border: 1px solid #e7f8f9;
  clip-path: polygon(0 50%, 10% 7%, 83% 2%, 100% 25%, 100% 75%, 83% 98%, 10% 93%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 22%, rgba(0, 0, 0, 0.35) 82%),
    linear-gradient(90deg, #9eb4ba, #607b84 58%, #334e59);
  box-shadow: inset 0 0 0 2px rgba(8, 29, 39, 0.42);
}

.mini-warship-runway {
  position: absolute;
  top: 50%;
  left: 12%;
  width: 68%;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(225, 247, 248, 0.8) 0 6px, transparent 6px 10px);
  transform: translateY(-50%);
}

.mini-warship-tower {
  position: absolute;
  top: 4px;
  left: 48%;
  width: 17px;
  height: 16px;
  border: 1px solid #dceef1;
  border-radius: 3px;
  background: linear-gradient(90deg, #314e59, #76909a);
  box-shadow: inset 0 0 0 2px rgba(6, 28, 38, 0.35);
}

.mini-warship-turret {
  position: absolute;
  top: 8px;
  left: 17%;
  width: 9px;
  height: 9px;
  border: 1px solid #e2f2f3;
  border-radius: 50%;
  background: #314a55;
}

.mini-warship-turret::after {
  position: absolute;
  top: 3px;
  left: -7px;
  width: 9px;
  height: 2px;
  border-radius: 2px;
  content: "";
  background: #d9ebed;
}

.mini-sonar-sweep {
  position: absolute;
  top: -15px;
  right: 34px;
  width: 66px;
  height: 66px;
  border: 1px solid rgba(110, 250, 235, 0.35);
  border-radius: 50%;
  background: conic-gradient(from 50deg, transparent 0 68%, rgba(102, 255, 226, 0.2) 86%, transparent 100%);
  box-shadow: inset 0 0 0 11px rgba(31, 177, 179, 0.04), inset 0 0 0 22px rgba(31, 177, 179, 0.04);
}

.mini-target-reticle {
  position: absolute;
  right: 34px;
  bottom: 13px;
  width: 20px;
  height: 20px;
  border: 2px solid var(--game-lime);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(201, 251, 85, 0.6);
}

.mini-target-reticle::before,
.mini-target-reticle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  background: var(--game-lime);
  transform: translate(-50%, -50%);
}

.mini-target-reticle::before {
  width: 28px;
  height: 1px;
}

.mini-target-reticle::after {
  width: 1px;
  height: 28px;
}

.mini-torpedo-track {
  position: absolute;
  top: 34px;
  left: 85px;
  width: 63px;
  height: 2px;
  background: repeating-linear-gradient(90deg, #9ef6f0 0 5px, transparent 5px 9px);
  filter: drop-shadow(0 0 3px #72f2eb);
  transform: rotate(9deg);
}

.mini-battle-blast {
  position: absolute;
  right: 49px;
  bottom: 18px;
  width: 16px;
  height: 20px;
  border-radius: 55% 45% 58% 40%;
  background: linear-gradient(0deg, #f42d22, #ff9227 58%, #fff374);
  box-shadow: 0 0 9px #ff4d26;
}

.mini-battle-blast i {
  position: absolute;
  top: -7px;
  left: 2px;
  width: 15px;
  height: 12px;
  border-radius: 50%;
  background: rgba(27, 34, 38, 0.82);
  box-shadow: 7px -4px 0 rgba(48, 54, 57, 0.62);
}

.mini-battle-status {
  align-self: center;
  color: var(--game-lime);
  font: 900 8px "Courier New", monospace;
  letter-spacing: 0.06em;
  writing-mode: vertical-rl;
}

.battle-vessel-full {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.55));
}

.battle-orientation-horizontal .battle-vessel-full {
  top: 50%;
  left: 5%;
  width: calc(var(--battle-ship-length) * 100% - 10%);
  height: 68%;
  transform: translateY(-50%);
}

.battle-orientation-vertical .battle-vessel-full {
  top: 5%;
  left: 50%;
  width: 68%;
  height: calc(var(--battle-ship-length) * 100% - 10%);
  transform: translateX(-50%);
}

.battle-vessel-hull {
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 1px solid #dff6fb;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 24%, rgba(0, 0, 0, 0.16) 68%, rgba(0, 0, 0, 0.42)),
    repeating-linear-gradient(90deg, rgba(220, 241, 244, 0.13) 0 1px, transparent 1px 13%),
    linear-gradient(90deg, #9bb1b8, #607b84 56%, #344d58);
  box-shadow: inset 0 0 0 3px rgba(5, 27, 37, 0.3), inset 0 4px 5px rgba(255, 255, 255, 0.16);
}

.battle-orientation-horizontal .battle-vessel-hull {
  clip-path: polygon(0 50%, 7% 8%, 86% 2%, 100% 22%, 100% 78%, 86% 98%, 7% 92%);
}

.battle-orientation-vertical .battle-vessel-hull {
  clip-path: polygon(50% 0, 92% 7%, 98% 86%, 78% 100%, 22% 100%, 2% 86%, 8% 7%);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent 24%, rgba(0, 0, 0, 0.16) 68%, rgba(0, 0, 0, 0.42)),
    repeating-linear-gradient(180deg, rgba(220, 241, 244, 0.13) 0 1px, transparent 1px 13%),
    linear-gradient(180deg, #9bb1b8, #607b84 56%, #344d58);
}

.battle-vessel-centerline {
  position: absolute;
  z-index: 3;
  opacity: 0.82;
}

.battle-orientation-horizontal .battle-vessel-centerline {
  top: 50%;
  left: 10%;
  width: 72%;
  height: 2px;
  background: repeating-linear-gradient(90deg, #d8ecef 0 10px, transparent 10px 17px);
  transform: translateY(-50%);
}

.battle-orientation-vertical .battle-vessel-centerline {
  top: 10%;
  left: 50%;
  width: 2px;
  height: 72%;
  background: repeating-linear-gradient(180deg, #d8ecef 0 10px, transparent 10px 17px);
  transform: translateX(-50%);
}

.battle-vessel-superstructure {
  position: absolute;
  z-index: 4;
  border: 1px solid rgba(230, 250, 252, 0.78);
  border-radius: 4px;
  background: linear-gradient(135deg, #78919a, #294650);
  box-shadow: inset 0 0 0 2px rgba(5, 24, 33, 0.28), 0 2px 3px rgba(0, 0, 0, 0.4);
}

.battle-orientation-horizontal .battle-vessel-superstructure {
  top: 21%;
  left: 45%;
  width: 18%;
  height: 58%;
}

.battle-orientation-vertical .battle-vessel-superstructure {
  top: 45%;
  left: 21%;
  width: 58%;
  height: 18%;
}

.battle-vessel-turret {
  position: absolute;
  z-index: 5;
  border: 1px solid #e5f5f6;
  border-radius: 50%;
  background: #314b55;
  box-shadow: 0 0 0 2px rgba(4, 22, 30, 0.4);
}

.battle-vessel-turret::after {
  position: absolute;
  border-radius: 2px;
  content: "";
  background: #d9ebed;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.battle-orientation-horizontal .battle-vessel-turret {
  top: 36%;
  width: 8%;
  aspect-ratio: 1;
}

.battle-orientation-horizontal .battle-vessel-turret::after {
  top: 42%;
  right: 72%;
  width: 90%;
  height: 2px;
}

.battle-orientation-horizontal .battle-vessel-turret-bow {
  left: 16%;
}

.battle-orientation-horizontal .battle-vessel-turret-stern {
  left: 73%;
  transform: rotate(180deg);
}

.battle-orientation-vertical .battle-vessel-turret {
  left: 36%;
  height: 8%;
  aspect-ratio: 1;
}

.battle-orientation-vertical .battle-vessel-turret::after {
  bottom: 72%;
  left: 42%;
  width: 2px;
  height: 90%;
}

.battle-orientation-vertical .battle-vessel-turret-bow {
  top: 16%;
}

.battle-orientation-vertical .battle-vessel-turret-stern {
  top: 73%;
  transform: rotate(180deg);
}

.battle-vessel-radar {
  position: absolute;
  z-index: 6;
  width: 8px;
  height: 8px;
  border: 2px solid #dff9fa;
  border-radius: 50%;
  background: #143a46;
  box-shadow: 0 0 5px rgba(115, 231, 228, 0.7);
}

.battle-orientation-horizontal .battle-vessel-radar {
  top: 7%;
  left: 52%;
}

.battle-orientation-vertical .battle-vessel-radar {
  top: 52%;
  left: 7%;
}

.battle-vessel-wake {
  position: absolute;
  z-index: 1;
  opacity: 0.52;
  filter: blur(1px);
}

.battle-orientation-horizontal .battle-vessel-wake {
  top: 16%;
  right: -7%;
  width: 25%;
  height: 68%;
  clip-path: polygon(0 17%, 100% 0, 45% 50%, 100% 100%, 0 83%);
  background: rgba(183, 249, 249, 0.52);
}

.battle-orientation-vertical .battle-vessel-wake {
  bottom: -7%;
  left: 16%;
  width: 68%;
  height: 25%;
  clip-path: polygon(17% 0, 50% 55%, 83% 0, 100% 100%, 0 100%);
  background: rgba(183, 249, 249, 0.52);
}

.battle-ship-data-carrier .battle-vessel-hull {
  filter: brightness(1.03);
}

.battle-ship-data-carrier .battle-vessel-superstructure {
  background: linear-gradient(135deg, #3f6670, #173d49);
}

.battle-ship-data-carrier .battle-vessel-turret {
  display: none;
}

.battle-ship-analytics-cruiser .battle-vessel-full {
  height: 58%;
}

.battle-ship-analytics-cruiser.battle-orientation-vertical .battle-vessel-full {
  width: 58%;
  height: calc(var(--battle-ship-length) * 100% - 10%);
}

.battle-ship-query-vessel .battle-vessel-full {
  height: 52%;
}

.battle-ship-query-vessel.battle-orientation-vertical .battle-vessel-full {
  width: 52%;
  height: calc(var(--battle-ship-length) * 100% - 10%);
}

.battle-ship-query-vessel .battle-vessel-hull {
  filter: hue-rotate(10deg) saturate(0.78);
}

.battle-ship-pipeline-scout .battle-vessel-full {
  height: 48%;
}

.battle-ship-pipeline-scout.battle-orientation-vertical .battle-vessel-full {
  width: 48%;
  height: calc(var(--battle-ship-length) * 100% - 10%);
}

.battle-ship-pipeline-scout .battle-vessel-turret-stern {
  display: none;
}

.battle-vessel-contact {
  position: absolute;
  z-index: 3;
  inset: 18%;
  border: 1px solid #dff6fb;
  clip-path: polygon(50% 0, 100% 24%, 90% 100%, 10% 100%, 0 24%);
  background: linear-gradient(135deg, #9db3b9, #3c5963);
  filter: brightness(0.72);
  pointer-events: none;
}

.battle-vessel-contact i {
  position: absolute;
  top: 38%;
  left: 36%;
  width: 28%;
  height: 26%;
  border-radius: 3px;
  background: #233f49;
}

.battle-cell.is-sunk .battle-vessel-full {
  filter: grayscale(0.9) brightness(0.48) drop-shadow(0 5px 6px rgba(0, 0, 0, 0.85));
}

.battle-cell.is-sunk.battle-orientation-horizontal .battle-vessel-full {
  transform: translateY(-50%) rotate(-4deg) scale(0.96);
}

.battle-cell.is-sunk.battle-orientation-vertical .battle-vessel-full {
  transform: translateX(-50%) rotate(4deg) scale(0.96);
}

.battle-cell.is-sunk .battle-vessel-hull {
  border-color: #6f777b;
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.52), 0 0 12px rgba(0, 0, 0, 0.75);
}

@media (max-width: 620px) {
  .battle-vessel-radar {
    width: 6px;
    height: 6px;
    border-width: 1px;
  }

  .battle-vessel-superstructure {
    border-radius: 2px;
  }
}