/* Breitseite! — dunkles Meer, Pergament & Holz */

:root {
  --sea-deep: #071523;
  --sea: #0b2236;
  --sea-light: #14344f;
  --parchment: #e9d8ac;
  --parchment-dark: #d4bd85;
  --ink: #3a2d1a;
  --wood: #5a3a22;
  --wood-light: #7a5233;
  --gold: #e2b25a;
  --hit: #e2703a;
  --sunk: #a83232;
  --water-mark: #6fb3d9;
  --cell: clamp(28px, 8vw, 44px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: Georgia, 'Palatino Linotype', serif;
  color: var(--parchment);
  background:
    linear-gradient(180deg, rgba(7,21,35,.5) 0%, rgba(7,21,35,.8) 100%),
    url('../assets/img/hero-bg.jpg') center / cover no-repeat,
    linear-gradient(180deg, var(--sea) 0%, var(--sea-deep) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

/* Dezente Wellen am unteren Rand */
body::after {
  content: '';
  position: fixed;
  left: -50%; right: -50%; bottom: -12px;
  height: 90px;
  pointer-events: none;
  z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40'%3E%3Cpath d='M0 24 Q 30 8 60 24 T 120 24 T 180 24 T 240 24 V40 H0 Z' fill='%23103049' opacity='0.55'/%3E%3Cpath d='M0 30 Q 30 16 60 30 T 120 30 T 180 30 T 240 30 V40 H0 Z' fill='%230d2740' opacity='0.8'/%3E%3C/svg%3E") repeat-x bottom / 240px 40px;
  animation: waves 9s linear infinite;
}
@keyframes waves {
  from { transform: translateX(0); }
  to { transform: translateX(240px); }
}

header {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 0.6rem 3.6rem 0.4rem;
  z-index: 1;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-align: left;
}
.logo-badge {
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6));
  flex-shrink: 0;
}
header h1 {
  font-size: clamp(1.4rem, 4.5vw, 2rem);
  line-height: 1.1;
  color: var(--gold);
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
  letter-spacing: 0.04em;
}
.tagline { color: var(--parchment-dark); font-style: italic; font-size: 0.8rem; }

/* ---------- Bootstrap Icons (als Maske, färbt sich über currentColor) ---------- */
.bi {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: -0.15em;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}
.bi-volume-up { --icon: url('../assets/icons/volume-up-fill.svg'); }
.bi-volume-mute { --icon: url('../assets/icons/volume-mute-fill.svg'); }
.bi-crosshair { --icon: url('../assets/icons/crosshair.svg'); }
.bi-bullseye { --icon: url('../assets/icons/bullseye.svg'); }
.bi-play { --icon: url('../assets/icons/play-fill.svg'); }
.bi-flag { --icon: url('../assets/icons/flag-fill.svg'); }
.bi-join { --icon: url('../assets/icons/box-arrow-in-right.svg'); }
.bi-link { --icon: url('../assets/icons/link-45deg.svg'); }
.bi-hourglass { --icon: url('../assets/icons/hourglass-split.svg'); }
.bi-rotate { --icon: url('../assets/icons/arrow-repeat.svg'); }
.bi-dice { --icon: url('../assets/icons/dice-5.svg'); }
.bi-trash { --icon: url('../assets/icons/trash3.svg'); }
.bi-anchor { --icon: url('../assets/icons/life-preserver.svg'); }
.bi-water { --icon: url('../assets/icons/water.svg'); }
.bi-rematch { --icon: url('../assets/icons/arrow-counterclockwise.svg'); }
.bi-home { --icon: url('../assets/icons/house-door.svg'); }
.bi-back { --icon: url('../assets/icons/arrow-left.svg'); }
.bi-map { --icon: url('../assets/icons/map-fill.svg'); }
.bi-check { --icon: url('../assets/icons/check-lg.svg'); }
.bi-send { --icon: url('../assets/icons/send-fill.svg'); }
.bi-chat { --icon: url('../assets/icons/chat-dots-fill.svg'); }

.icon-btn {
  position: absolute;
  top: 0.7rem; right: 1rem;
  font-size: 1.4rem;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--wood-light);
  border-radius: 10px;
  padding: 0.35rem 0.55rem;
  cursor: pointer;
}

main { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 1rem 1rem calc(1.5rem + 70px); z-index: 1; }
#btn-lobby-back { margin-top: 1rem; }

.screen { display: none; }
.screen.active { display: block; animation: fadein .25s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }

/* ---------- Panels (Pergament) ---------- */
.panel {
  background: url('../assets/img/parchment.jpg') repeat;
  background-size: 420px;
  color: var(--ink);
  border-radius: 14px;
  border: 3px solid var(--wood);
  box-shadow: 0 10px 40px rgba(0,0,0,.5), inset 0 0 60px rgba(122,82,51,.18);
  padding: 1.4rem;
}
.panel.center { text-align: center; max-width: 560px; margin: 0 auto; }
.panel h2 { margin-bottom: 0.8rem; color: var(--wood); }
.panel h3 { color: var(--wood); }

/* ---------- Menü ---------- */
.mode-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.mode-card {
  background: rgba(255,255,255,.35);
  border: 2px solid var(--wood-light);
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.difficulty { display: flex; flex-direction: column; gap: 0.3rem; }
.difficulty label, .toggle { cursor: pointer; user-select: none; }
.difficulty input, .toggle input { accent-color: var(--wood); margin-right: 0.4rem; }

.join-row { display: flex; gap: 0.5rem; }
.join-row input {
  flex: 1; min-width: 0;
  padding: 0.55rem;
  font: inherit;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border: 2px solid var(--wood-light);
  border-radius: 8px;
  background: #fff8e6;
  color: var(--ink);
}

.rules-box {
  margin-top: 1rem;
  background: rgba(255,255,255,.3);
  border: 2px solid var(--wood-light);
  border-radius: 10px;
  padding: 0.8rem 1rem;
}
.rules-box summary { cursor: pointer; font-weight: bold; color: var(--wood); }
.rules-box .toggle { display: block; margin-top: 0.6rem; }
.hint { font-size: 0.85rem; opacity: 0.75; margin-top: 0.5rem; }
.menu-stats { margin-top: 1rem; text-align: center; font-style: italic; opacity: 0.8; }

/* ---------- Buttons ---------- */
button {
  font: inherit;
  cursor: pointer;
  border: 2px solid var(--wood);
  border-radius: 10px;
  padding: 0.55rem 1rem;
  background: linear-gradient(180deg, #f4e6bf, var(--parchment-dark));
  color: var(--ink);
  transition: transform .08s ease, filter .12s ease;
  touch-action: manipulation;
}
button:hover:not(:disabled) { filter: brightness(1.06); }
button:active:not(:disabled) { transform: scale(0.97); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.primary {
  background: url('../assets/img/wood.jpg') repeat;
  background-size: 220px;
  color: var(--parchment);
  border-color: #3d2716;
  font-weight: bold;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
button.big { font-size: 1.1rem; padding: 0.7rem 1.4rem; }
button.ghost {
  background: transparent;
  border-color: var(--wood-light);
  color: inherit;
  opacity: 0.8;
}
.btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.8rem 0; }
.btn-row.center { justify-content: center; }

/* ---------- Lobby ---------- */
.lobby-code-label { margin-top: 0.6rem; opacity: 0.7; }
.lobby-code {
  font-size: 2.4rem;
  letter-spacing: 0.35em;
  font-weight: bold;
  color: var(--wood);
  margin-bottom: 0.8rem;
}
#lobby-link {
  width: 100%;
  padding: 0.55rem;
  font: inherit;
  font-size: 0.85rem;
  border: 2px solid var(--wood-light);
  border-radius: 8px;
  background: #fff8e6;
  color: var(--ink);
  margin: 0.6rem 0;
}
.waiting { margin-top: 1rem; font-style: italic; animation: pulse 1.6s ease infinite; }
@keyframes pulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ---------- Bretter ---------- */
.board {
  display: grid;
  grid-template-columns: auto repeat(10, var(--cell));
  grid-auto-rows: var(--cell);
  gap: 2px;
  width: fit-content;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.board .label {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem;
  color: var(--water-mark);
  min-width: 1.2em;
  padding: 0 3px;
}
.setup-board .label, .panel .board .label { color: var(--wood); opacity: 0.8; }

.cell {
  background: linear-gradient(145deg, #14344f, #0e2a41);
  border: 1px solid rgba(111,179,217,.25);
  border-radius: 4px;
  position: relative;
  cursor: pointer;
}
.panel .cell { border-color: rgba(58,45,26,.35); }

.cell.ship {
  background: linear-gradient(145deg, var(--wood-light), var(--wood));
  border-color: #3d2716;
}
.cell.ship.selected { outline: 2px solid var(--gold); outline-offset: -2px; }

.cell.preview-ok { background: #4a7a4a !important; }
.cell.preview-bad { background: #8a3a3a !important; }

.cell.miss::after {
  content: '';
  position: absolute; inset: 32%;
  border-radius: 50%;
  background: var(--water-mark);
  opacity: 0.8;
}
.cell.pending::after {
  content: '';
  position: absolute; inset: 30%;
  border-radius: 50%;
  border: 2px dashed var(--gold);
  animation: pulse 1s ease infinite;
}
.cell.marked::after {
  content: '✕';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(111, 179, 217, 0.65);
  font-size: calc(var(--cell) * 0.45);
}
.mark-hint { max-width: calc(11 * var(--cell)); }

.cell.queued { outline: 2px dashed var(--gold); outline-offset: -3px; }
.cell.queued::after {
  content: '✕';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: calc(var(--cell) * 0.45);
}
.cell.hit {
  background: linear-gradient(145deg, #b5502a, #8a3a1e);
  border-color: var(--hit);
}
.cell.hit::after {
  content: '✸';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #ffce7a; font-size: calc(var(--cell) * 0.55);
  text-shadow: 0 0 6px #ff8c42;
}
.cell.sunk {
  background: linear-gradient(145deg, #6a2020, #481414);
  border-color: var(--sunk);
}
.cell.sunk::after {
  content: '☠';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #d9a0a0; font-size: calc(var(--cell) * 0.55);
}

/* Schiffs-Sprites über den Zellen */
.board { position: relative; }
.ship-sprite {
  position: absolute;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}
.ship-sprite.vertical {
  transform: rotate(90deg) translateY(-100%);
  transform-origin: 0 0;
}
.ship-sprite.sunk-sprite { filter: grayscale(70%) brightness(0.5); }
.cell::after { z-index: 3; }
.cell.selected { z-index: 4; }

/* Wasserspritzer bei Fehlschuss (Spritesheet, 8 Frames) */
.cell.splash::before {
  content: '';
  position: absolute;
  inset: -30%;
  z-index: 5;
  pointer-events: none;
  background: url('../assets/img/splash-strip.png') 0 0 / 800% 100% no-repeat;
  animation: explode 0.6s steps(7) both;
}

/* Treffer-Explosion (Spritesheet, 8 Frames) */
.cell.boom::before {
  content: '';
  position: absolute;
  inset: -35%;
  z-index: 5;
  pointer-events: none;
  background: url('../assets/img/explosion-strip.png') 0 0 / 800% 100% no-repeat;
  animation: explode 0.65s steps(7) both;
}
@keyframes explode {
  from { background-position-x: 0%; }
  to { background-position-x: 100%; }
}

/* Cursor zeigt an, ob gefeuert werden darf */
.target .cell { cursor: not-allowed; }
.target.can-fire .cell { cursor: crosshair; }
.target.can-fire .cell.miss,
.target.can-fire .cell.hit,
.target.can-fire .cell.sunk,
.target.can-fire .cell.pending { cursor: not-allowed; }
.target.can-fire .cell.marked { cursor: pointer; }

.target.can-fire .cell:not(.miss):not(.hit):not(.sunk):hover { filter: brightness(1.35); }

/* ---------- Aufstellung ---------- */
.setup-layout { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: flex-start; }
.dock-wrap { flex: 1; min-width: 240px; }
#ship-dock { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.6rem; }
.dock-ship {
  display: flex; align-items: center; gap: 0.7rem;
  background: rgba(255,255,255,.35);
  border: 2px solid var(--wood-light);
  border-radius: 8px;
  padding: 0.45rem 0.7rem;
  cursor: grab;
  touch-action: none;
}
.dock-ship.selected { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.dock-name { min-width: 90px; font-weight: bold; color: var(--wood); }
.dock-cells { display: flex; gap: 2px; pointer-events: none; }
.dock-cells i {
  width: 20px; height: 20px;
  background: linear-gradient(145deg, var(--wood-light), var(--wood));
  border-radius: 3px;
}

#drag-ghost {
  position: fixed;
  z-index: 50;
  background: rgba(122,82,51,.75);
  border: 2px solid var(--gold);
  border-radius: 6px;
  pointer-events: none;
}

/* ---------- Spiel ---------- */
.game-head { text-align: center; margin-bottom: 0.8rem; min-height: 4.6rem; }
.turn { font-size: 1.05rem; font-weight: bold; }
.turn.mine { color: var(--gold); }
.turn.theirs { color: var(--water-mark); }
.online-status { font-size: 0.85rem; color: #e8b0a0; min-height: 1.1em; }
.ticker {
  font-style: italic;
  font-size: 1rem;
  min-height: 1.4em;
  color: var(--parchment-dark);
}
.ticker.hit { color: var(--hit); }
.ticker.sunk { color: #ff9d9d; font-weight: bold; }
.ticker.water { color: var(--water-mark); }
.ticker.warn { color: #ffce7a; }

.boards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  justify-content: center;
  align-items: flex-start;
}
.board-wrap h3 { margin-bottom: 0.4rem; color: var(--gold); font-size: 1rem; }
.board-wrap .sub { font-weight: normal; opacity: 0.6; font-size: 0.85rem; }

.fleet-status { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; max-width: calc(11 * var(--cell)); }
.fleet-chip {
  font-size: 0.72rem;
  padding: 0.15rem 0.45rem;
  border-radius: 20px;
  background: rgba(111,179,217,.15);
  border: 1px solid rgba(111,179,217,.35);
}
.fleet-chip.down {
  text-decoration: line-through;
  opacity: 0.5;
  background: rgba(168,50,50,.25);
  border-color: var(--sunk);
}

.game-actions { text-align: center; margin-top: 1rem; display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }

/* Eigenes Brett kleiner auf Mobil */
@media (max-width: 720px) {
  .own-wrap { --cell: clamp(18px, 5.2vw, 30px); }
  .game-head { min-height: 0; }
}

/* ---------- Chat (Online-Modus) ---------- */
.chat { max-width: 480px; margin: 1.2rem auto 0; }
.chat-title {
  font-size: 0.85rem;
  color: var(--gold);
  margin-bottom: 0.3rem;
}
.chat-log {
  height: 150px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--wood-light);
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.chat-msg {
  padding: 0.25rem 0.65rem;
  border-radius: 12px;
  max-width: 85%;
  overflow-wrap: break-word;
}
.chat-msg.mine {
  align-self: flex-end;
  background: rgba(122, 82, 51, 0.6);
}
.chat-msg.theirs {
  align-self: flex-start;
  background: rgba(111, 179, 217, 0.22);
}
.chat-input { display: flex; gap: 0.4rem; margin-top: 0.4rem; }
.chat-input input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.7rem;
  font: inherit;
  border: 2px solid var(--wood-light);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--parchment);
}
.chat-input input::placeholder { color: rgba(233, 216, 172, 0.4); }

/* ---------- Endscreen ---------- */
#end-title.won { color: #3f7a3f; }
#end-title.lost { color: var(--sunk); }
.stats-table {
  margin: 1rem auto;
  border-collapse: collapse;
}
.stats-table td {
  padding: 0.35rem 1.2rem;
  border-bottom: 1px solid rgba(58,45,26,.25);
}
.stats-table td:first-child { text-align: left; opacity: 0.75; }
.stats-table td:last-child { text-align: right; font-weight: bold; }
.fair { min-height: 1.3em; margin: 0.5rem 0; font-size: 0.9rem; }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(4, 12, 20, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fadein .15s ease;
}
.modal-overlay[hidden] { display: none; }
.modal-panel {
  background: url('../assets/img/parchment.jpg') repeat;
  background-size: 420px;
  color: var(--ink);
  border: 3px solid var(--wood);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
  padding: 1.4rem;
  max-width: 380px;
  width: 100%;
  text-align: center;
}
.modal-panel p { margin-bottom: 1rem; font-size: 1.05rem; }

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.panel .ghost { color: var(--ink); border-color: var(--wood-light); }