:root {
  color-scheme: dark;
  font-family: monospace;
  background: #0c1724;
  color: #d7eeff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 280px;
  background: #0c1724;
}

main {
  max-width: 560px;
  min-height: var(--tg-viewport-stable-height, 100dvh);
  margin: auto;
  padding: calc(var(--app-top, 0px) + 16px) 12px var(--app-bottom, 24px);
}

h1 {
  margin: 0 0 12px;
  font-size: 23px;
  letter-spacing: 0.04em;
  color: #f6d86a;
}

.status {
  min-height: 20px;
  margin: 0 0 12px;
  color: #9dc4dc;
}

.status.error {
  color: #ff8a7a;
}

.switches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

button {
  font: inherit;
  color: #d7eeff;
  background: #183353;
  border: 2px solid #4a87ad;
  border-radius: 6px;
  padding: 9px 4px;
}

button.active {
  color: #0c1724;
  background: #f6d86a;
  border-color: #f6d86a;
}

button:disabled {
  opacity: 0.55;
}

.viewport {
  overflow: hidden;
  touch-action: pan-y;
  border: 2px solid #326e98;
  border-radius: 8px;
  background: #101e31;
}

.slides {
  display: flex;
  width: 200%;
  transition: transform 0.2s ease-out;
}

.slide {
  width: 50%;
  padding: 12px;
}

h2 {
  margin: 0 0 10px;
  font-size: 18px;
  color: #f6d86a;
}

.board {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 828 / 794;
  margin: auto;
}

.board-image {
  display: block;
  width: 100%;
  height: 100%;
}

.grid,
.overlays {
  position: absolute;
  left: 9.058%;
  top: 9.068%;
  width: 90.58%;
  height: 90.68%;
}

.grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
}

.overlays {
  pointer-events: none;
}

.cell {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent center / 100% 100% no-repeat;
}

.cell.target.available {
  cursor: pointer;
}

.target.available:active {
  filter: brightness(1.45);
}

.miss {
  background-image: url('/assets/battle/miss.png?v=90de427c759c');
}

.hit {
  background-image: url('/assets/battle/hit.png?v=90de427c759c');
}

.ship {
  position: absolute;
  background: center / 100% 100% no-repeat;
}

.hint {
  margin: 10px 0 0;
  text-align: center;
  font-size: 12px;
  color: #9dc4dc;
}

.placement-controls {
  margin: 0 0 10px;
}

.surrender {
  display: block;
  width: min(210px, 50%);
  margin: 10px auto 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.result-action img,
.surrender img {
  display: block;
  width: 100%;
  height: auto;
}

.fleet {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.fleet button {
  padding: 6px 8px;
}

.placement-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.placement-actions .placement-finish {
  grid-column: span 2;
}

.landing {
  padding: 24px 0;
  text-align: center;
}

.landing button {
  width: 100%;
  margin: 5px 0;
}

.splash {
  position: fixed;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  background: #0c1724;
}

.splash img {
  display: block;
  width: min(100vw, 100vh);
  height: min(100vw, 100vh);
  object-fit: contain;
}

.result {
  position: fixed;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: var(--tg-viewport-stable-height, 100dvh);
  padding: var(--app-top, 0) 0 var(--app-bottom, 24px);
  background: #0c1724;
}

.result.hidden {
  display: none;
}

.result-image {
  width: min(100%, 520px);
  height: min(58vh, 520px);
  margin: auto auto 0;
  object-fit: contain;
}

.result-text {
  margin: 0;
  padding: 12px;
  text-align: center;
}

.result-actions {
  display: flex;
  width: 100%;
}

.result-action {
  flex: 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.hidden {
  display: none;
}