/* Grundlayout: dunkles Theme */
/* Webfonts */
@font-face {
  font-family: "Dogica";
  src: url("./fonts/dogica.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Dogica";
  src: url("./fonts/dogicabold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Dogica Pixel";
  src: url("./fonts/dogicapixel.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Dogica Pixel";
  src: url("./fonts/dogicapixelbold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --bg: var(--carbon-black);
  --panel: var(--carbon-black);
  --panel-2: #0f1626;
  --text: var(--bright-snow);
  --muted: #9fb0c3;
  --line: #263043;
  --accent: var(--charcoal);
  --accent-2: var(--lilac-ash);
  --btn: #1b2436;
  --btn-hover: #233150;
  --btn-active: #31446f;

  --black: #08090aff;
  --lilac-ash: #a7a2a9ff;
  --bright-snow: #f4f7f5ff;
  --charcoal: #575a5eff;
  --carbon-black: #222728;
  /* Fonts */
  --text-font: "Dogica", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --header-font: "Dogica", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-size: 16px;
    line-height: 1.45;
    font-family: var(--text-font), serif;
    letter-spacing: -2.5px;
    font-weight: 400;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-image: url("img/background.png");
    background-repeat: no-repeat;
    height: 100vh;
}

h1, h2, h3, h4, h5, h6, caption {
    color: var(--text);
    margin: 0.5rem 0;
    font-family: var(--header-font), serif;
    font-weight: 700;
}

h1 { margin: 1rem 1rem 0.5rem; }

section {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 1rem;
    margin: auto;
    width: 50vw;
}

/* Tabelle: volle Breite auf kleinen Displays, schönes Raster */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
background: var(--panel-2);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
}

thead th, tbody th {
    background: transparent;
    color: var(--muted);
    font-weight: 600;
    text-align: center;
    padding: 0.35rem;
    border-bottom: 1px solid var(--line);
}

/* Spaltenkopf A–J */
thead th[scope="col"] {
    min-width: 2.5rem;
}

/* Zeilenlabels 1–10 */
tbody th[scope="row"] {
    width: 2.5rem;
    border-right: 1px solid var(--line);
}

/* Zellenlayout: fixierte Größe für quadratische Zellen */
tbody td {
  padding: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  width: 3rem;
  height: 3rem;
}

/* Letzte Spalte/Zeile ohne rechten/unteren Rand (optional, für sauberen Abschluss) */
tbody tr:last-child td { border-bottom: none; }
tbody td:last-child { border-right: none; }

/* Buttons füllen die Zelle vollständig aus */
tbody td > button {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  margin: 0;
  padding: 0;
  background: var(--btn);
  color: var(--text);
  cursor: pointer;
  transition: background-color .12s ease, transform .04s ease, box-shadow .12s ease;
  outline: none;
  border-radius: 0;           /* folgt der Zellenform */
}

/* Optional: Leichte Markierungen im Button (z. B. Koordinaten anzeigen)
   Wenn du die Buttons leer lassen willst, kannst du das ignorieren. */
tbody td > button::after {
    content: "";
}

/* Hover/Active/Fokus-Zustände */
tbody td > button:hover {
  background: var(--btn-hover);
}
tbody td > button:active {
  background: var(--btn-active);
  transform: translateY(1px);
}
tbody td > button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px; /* Blendet die Kontur innerhalb der Zelle ein */
box-shadow: 0 0 0 2px var(--accent);
}

/* Tabellenrahmen oben/unten */
caption {
    caption-side: top;
    padding: 0.5rem;
    color: var(--muted);
}

/* Responsive: Zellen auf sehr kleinen Displays etwas kleiner */
@media (max-width: 520px) {
    tbody td { width: 2.4rem; height: 2.4rem; }
    thead th[scope="col"], tbody th[scope="row"] { width: 2rem; }
}

/* Optional: optische Trennung der beiden Sektionen */
#board-ally, #board-enemy {
    scroll-margin-top: 1rem;
}

/* Boards nebeneinander im Spiel */
body.game .boards {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* Im Spiel: Tabellen haben nur Inhaltsbreite, kleinere Zellen */
body.game table {
  width: auto;
}
/* Keep cells at their natural size (1:1 via aspect-ratio on .grid-cell). */
/* Removed fixed 2rem sizing to avoid unintended shrinkage. */

/* Utilities */
.hidden { display: none !important; }

/* Simple modal */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 1000;
}
.modal-dialog {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem;
  max-width: 420px;
  width: 100%;
  color: var(--text);
}
.modal .actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 1rem;
}
.btn-secondary {
  background: #2a344a;
}

.grid-cell {
    /* Remove transform animations that caused rotating tiles to animate */
    transition: none;
    aspect-ratio: 1; /* keep cells 1:1 */
}

.grid-cell:hover {
    transition: none;
    background: var(--bright-snow);
    color: var(--carbon-black);
}

button, input {
    padding: 10px;
    border: none;
    background: var(--bright-snow);
    font-family: var(--text-font), serif;
    margin: 5px 0 5px 0;
    font-weight: bold;
}

.footer {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    min-height: 2rem;
    height: fit-content;
    background: var(--carbon-black);
    text-align: center;
}

#lobby-controls {
    display: grid;
    grid-template-areas: "header header"
                         "create join"
                         "bot bot";
    width: fit-content;
}

#lobby-navbar{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#lobby-debug-tool{
    text-decoration: none;
    color: var(--text-font);
    opacity: 0.5;
    font-size: smaller
}

#lobby-actions {
    grid-area: header;
}

#lobby-create { grid-area: create; display: flex; flex-direction: column; justify-content: space-between; padding: 10px; }
#lobby-join { grid-area: join; display: flex; flex-direction: column; justify-content: space-between; padding: 10px; }
#bot-game { grid-area: bot; display: flex; flex-direction: column; padding: 10px; }

.game-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
}

#central-controls {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.room-info-bar {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

#board-ally, #board-enemy {
    flex: 0 0 auto;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.inactive-board {
    opacity: 0.5;
    filter: grayscale(80%);
    pointer-events: none;
}

.board-wrap { display: flex; gap: 12px; align-items: flex-start; }
.inline-panel { padding: 12px; min-width: 240px; }
.inline-panel h3 { margin-top: 0; }
.room-info { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pill { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; font-size: .9rem; }

.ship-tray { display: flex; flex-direction: column; gap: 6px; }
.ship-item { color: var(--text); background: var(--panel); border: 1px solid var(--line); cursor: grab; padding: 6px 8px; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ship-item.selected { outline: 2px solid var(--accent); }
.ship-item:disabled { opacity: .5; cursor: not-allowed; }

/* Ship preview inside tray items */
.ship-preview { display: inline-grid; gap: 0; }
.ship-preview.h { grid-auto-flow: column; grid-auto-columns: 12px; grid-auto-rows: 12px; }
.ship-preview.v { grid-auto-flow: row; grid-auto-rows: 12px; grid-auto-columns: 12px; }
.ship-seg { width: 12px; height: 12px; background: transparent; border: 0; }

/* Ensure table cells have no inner padding so buttons can fill completely */
tbody td { padding: 0; }
thead th[scope="col"], tbody th[scope="row"] { padding: 0; }

/* unified below: button.grid-cell fills its table cell exactly */
.grid-cell.label {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-weight: bold;
}
/* Own ship cells rendered with sprites */
.grid-cell.own.ship-piece {
  background-color: transparent;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: pixelated;
}
/* Generic sprite piece (used in tray preview and drag preview) */
.ship-piece {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: pixelated;
}
/* Ship part images (apply to both board cells and mini previews) */
.grid-cell.own.ship-front, .ship-piece.ship-front { background-image: url('/styles/img/ship_sprites/ship_front.webp') !important; }
.grid-cell.own.ship-mid,   .ship-piece.ship-mid   { background-image: url('/styles/img/ship_sprites/ship_middle.webp') !important; }
.grid-cell.own.ship-back,  .ship-piece.ship-back  { background-image: url('/styles/img/ship_sprites/ship_back.webp') !important; }

/* Orientation: vertical is correct; rotate horizontal ships by 90° */
.grid-cell.own.orient-h { transform: rotate(-90deg) !important; }
.grid-cell.own.orient-v { transform: rotate(0deg) !important; }
/* Generic orientation for sprite pieces (tray + previews) */
.ship-piece.orient-h { transform: rotate(-90deg) !important; transition: none; }
.ship-piece.orient-v { transform: rotate(0deg) !important; transition: none; }

/* Legacy placed color kept as fallback when sprites missing */
.grid-cell.own.placed:not(.ship-piece) { background: #2563eb; border-color: #1d4ed8; }
.grid-cell.enemy.hit { background: #dc2626; }
.grid-cell.enemy.miss { background: #6b7280; }

.grid-cell.shot-hit { background-color: #ef4444 !important; background-image: none !important; }
.grid-cell.shot-miss { background-color: #3b82f6 !important; background-image: none !important; opacity: 0.6; }
.grid-cell.ship-sunk { background-color: #22c55e !important; background-image: none !important; opacity: 1; }
.grid-cell.shot-hit, .grid-cell.shot-miss { pointer-events: none; cursor: default; }

/* Drag & drop placement preview */
.grid-cell.preview-ok { box-shadow: inset 0 0 0 9999px rgba(37, 99, 235, 0.45); }
.grid-cell.preview-bad { box-shadow: inset 0 0 0 9999px rgba(220, 38, 38, 0.45); }

/* Board containers share same background; panel lives inside */
#board-ally, #board-enemy { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px; width: fit-content }

/* Grid water background and button fill: exactly one water tile per cell */
button.grid-cell {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('/styles/img/water_sprite.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
}

/* Moving placed ships: show move cursor while in placement phase */
.grid-cell.own.placed { cursor: move; }

/* Ensure rotation happens around the center for ship sprites */
.grid-cell.own.orient-h,
.grid-cell.own.orient-v { transform-origin: center center; }

/* Center the main navbar (title + links) */
.navbar { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.navbar nav a { color: var(--muted); text-decoration: none; margin: 0 4px; }
.navbar nav a:hover { text-decoration: underline; }