:root {
  --bg: #0b1420; --panel: #111d2b; --panel2: #16273a; --line: #24384d;
  --text: #d6e2ee; --muted: #8aa0b5; --accent: #ffd166; --accent2: #4cc9f0;
  --water: #16324a; --water2: #1f4a6b; --miss: #7f9db8; --hit: #ff6b35; --sunk: #8b1e1e;
  --gut: #3ddc84; --schlecht: #ff4d4d;
  --cell: 32px; --gap: 2px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: 14px/1.4 -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; }
button { font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; cursor: pointer; }
button:hover:not(:disabled) { background: #1e3449; }
button:disabled { opacity: .45; cursor: default; }
button.primaer { background: var(--accent); color: #1a1a1a; border-color: transparent; font-weight: 600; }
button.primaer:hover:not(:disabled) { background: #ffdb85; }
button.leise { background: transparent; border-color: transparent; color: var(--muted); }
input { font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; width: 100%; }
input:focus { outline: 1px solid var(--accent2); }

#app { height: 100%; display: flex; flex-direction: column; }
#kopf { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; background: var(--panel); border-bottom: 1px solid var(--line); flex: 0 0 auto; }
#statusText { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.knoepfe { display: flex; gap: 4px; }
.knoepfe button { padding: 2px 7px; font-size: 12px; line-height: 1.3; }
.knoepfe button.an { border-color: var(--accent2); color: var(--accent2); }

.screen { display: none; flex: 1 1 auto; min-height: 0; padding: 8px; }
.screen.sichtbar { display: flex; flex-direction: column; }
.karte { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; max-width: 340px; width: 100%; margin: auto; display: flex; flex-direction: column; gap: 10px; }
h1 { margin: 0; font-size: 22px; letter-spacing: .04em; }
h2 { margin: 0; font-size: 18px; }
.klein { font-size: 12px; color: var(--muted); }
.hinweis { font-size: 12px; color: var(--muted); margin: 0; min-height: 1em; }
.reihe { display: flex; gap: 6px; }
.reihe input { text-transform: uppercase; letter-spacing: .2em; }
.codeGross { font-size: 34px; letter-spacing: .3em; text-align: center; font-weight: 700; color: var(--accent); }
.feldTitel { font-size: 13px; color: var(--text); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feldTitel.klein { font-size: 11px; color: var(--muted); }

/* Spielfeld: Zellen-Raster + Schiffsebene (SVG) + Effektebene (Canvas) */
.feld { position: relative; display: grid; grid-template-columns: repeat(10, var(--cell)); grid-auto-rows: var(--cell); gap: var(--gap); width: max-content;
  background: radial-gradient(ellipse at 30% 20%, #1a3a55 0%, #0f2438 70%); border-radius: 4px; }
.zelle { position: relative; background: var(--water); border-radius: 2px; transition: background .12s; }
.feld.ziel .zelle:hover, .feld.aufst .zelle:hover { background: var(--water2); }
.feld .schiffe { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.feld .fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.zelle.wasser, .zelle.treffer, .zelle.versenkt, .zelle.vorschau, .zelle.sonar, .zelle.sonarRahmen { z-index: 2; }
.zelle.wasser::after { content: ""; position: absolute; inset: 36%; border-radius: 50%; background: var(--miss); box-shadow: 0 0 0 2px rgba(127,157,184,.25); }
.zelle.treffer { background: radial-gradient(circle, #ffd166 0%, #ff6b35 35%, rgba(255,107,53,.25) 70%, transparent 72%); }
.zelle.treffer::after { content: ""; position: absolute; left: 30%; top: 18%; width: 40%; height: 40%; border-radius: 50% 50% 50% 0; background: radial-gradient(circle at 40% 60%, #fff4c2, #ff9a3c 60%, transparent 70%); transform: rotate(-45deg); }
.zelle.versenkt { background: rgba(80, 20, 20, .55); }
.zelle.versenkt::before, .zelle.versenkt::after { content: ""; position: absolute; left: 50%; top: 18%; height: 64%; width: 2px; background: #ffb4b4; }
.zelle.versenkt::before { transform: translateX(-50%) rotate(45deg); }
.zelle.versenkt::after { transform: translateX(-50%) rotate(-45deg); }
.zelle.vorschau { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--water2); }
.zelle.vorschau.schlecht { outline-color: var(--schlecht); }
.zelle.sonar::before { content: attr(data-sonar); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(var(--cell) * .55); font-weight: 700; color: var(--accent2); text-shadow: 0 0 4px #000; }
.zelle.sonarRahmen { box-shadow: inset 0 0 0 1px var(--accent2); }
.feld.ziel .zelle.wasser, .feld.ziel .zelle.treffer, .feld.ziel .zelle.versenkt { cursor: default; }

/* Schiffe (SVG, Einheit = eine Zelle) */
.schiff .rumpf { fill: #8d9aa8; stroke: #2a3541; stroke-width: .06; }
.schiff .deck { fill: #b3bfcb; stroke: #6d7a88; stroke-width: .03; }
.schiff .aufbau { fill: #5b6976; stroke: #2a3541; stroke-width: .04; }
.schiff .kamin { fill: #3d4854; stroke: #2a3541; stroke-width: .03; }
.schiff .turm { fill: #46525f; stroke: #222a33; stroke-width: .04; }
.schiff .rohr { stroke: #222a33; stroke-width: .08; stroke-linecap: round; }
.schiff.versenkt .rumpf { fill: #5a2b2b; stroke: #2a1010; }
.schiff.versenkt .deck { fill: #6e3a3a; stroke: #4a2222; }
.schiff.versenkt .aufbau, .schiff.versenkt .turm, .schiff.versenkt .kamin { fill: #3d2222; }
.schiff.versenkt { opacity: .9; }
.schiff.aufgedeckt { opacity: .55; }
.schiff.geist { opacity: .55; }
.schiff.geist .rumpf { stroke: var(--accent); stroke-dasharray: .12 .08; }
.schiff.geist.schlecht .rumpf { stroke: var(--schlecht); fill: #7a4a4a; }

@keyframes puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,209,102,.0); } 50% { box-shadow: 0 0 0 4px rgba(255,209,102,.35); } }
#zugText.dran { color: var(--accent); font-weight: 600; animation: puls 1.6s ease-in-out infinite; border-radius: 6px; padding: 0 6px; }

/* Aufstellung */
#aufstLayout { display: flex; gap: 12px; flex: 1 1 auto; min-height: 0; }
#aufstBox { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
#werkzeug { flex: 0 0 170px; display: flex; flex-direction: column; gap: 8px; }
#schiffListe { display: flex; flex-direction: column; gap: 4px; }
.schiffKnopf { display: flex; align-items: center; gap: 6px; padding: 4px 8px; text-align: left; }
.schiffKnopf svg { width: 64px; height: 14px; }
.schiffKnopf.gesetzt { opacity: .55; }
.schiffKnopf.aktuell { border-color: var(--accent); }

/* Kampf: zwei gleich große Bretter */
#kampfLayout { display: flex; gap: 14px; flex: 1 1 auto; min-height: 0; }
.brett { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; }
.feldBox { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
#log { flex: 0 0 auto; height: 3.2em; overflow: hidden; font-size: 11px; color: var(--muted); display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; padding: 4px 2px 0; }
#log .ich { color: var(--text); }
#log .neu { color: var(--accent); }
#leiste { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 6px; border-top: 1px solid var(--line); margin-top: 4px; }
#energie { display: flex; align-items: center; gap: 6px; min-width: 120px; flex: 1 1 120px; max-width: 260px; }
.balken { flex: 1 1 auto; height: 10px; background: var(--panel2); border-radius: 5px; overflow: hidden; border: 1px solid var(--line); }
#energieFuell { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent2), var(--accent)); transition: width .35s; }
#energieText { font-weight: 700; color: var(--accent); min-width: 2ch; text-align: right; }
#faehigkeiten { display: flex; gap: 4px; flex-wrap: wrap; }
.fk { padding: 4px 8px; font-size: 12px; }
.fk b { margin-left: 4px; color: var(--accent); font-weight: 600; }
.fk.aktiv { border-color: var(--accent); background: #2a3d2a; }
.fk.aktiv[data-art="schuss"] { background: var(--panel2); }
#zugText { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* Finale-Einblendung über dem Gefecht */
#kampf { position: relative; }
#finale { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 6; }
#finale span { font-size: clamp(30px, 9vw, 84px); font-weight: 800; letter-spacing: .06em; color: var(--accent); text-shadow: 0 0 26px rgba(255,209,102,.85), 0 2px 0 #7a5a00; animation: finaleIn .8s cubic-bezier(.2,1.5,.4,1) both; }
#finale.verloren span { color: #ff6b6b; text-shadow: 0 0 26px rgba(255,80,80,.75), 0 2px 0 #5a0000; }
@keyframes finaleIn { from { transform: scale(.25) rotate(-6deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }

/* Ende */
#endeLayout { display: flex; gap: 12px; flex: 1 1 auto; min-height: 0; align-items: center; justify-content: center; flex-wrap: wrap; overflow: auto; }
#endeFelder { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
#endeFelder .feld { --cell: 22px; --gap: 2px; }

/* Tarnung */
#tarn { position: absolute; inset: 0; background: #fff; color: #222; padding: 14px; z-index: 50; overflow: auto; font: 13px/1.5 "Segoe UI", sans-serif; }
#tarn .tarnKopf { font-weight: 600; margin-bottom: 8px; }
#tarn table { border-collapse: collapse; width: 100%; }
#tarn th, #tarn td { border: 1px solid #ddd; padding: 4px 8px; text-align: left; }
#tarn th { background: #f3f3f3; }
#tarn tr:nth-child(even) td { background: #fafafa; }

#meldung { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: #1e3449; border: 1px solid var(--line); padding: 6px 12px; border-radius: 8px; font-size: 12px; z-index: 40; max-width: 90%; }

/* Kompakt: nur Zielfeld + Leiste */
body.kompakt #brettEigen, body.kompakt #log, body.kompakt #statusText, body.kompakt .feldTitel { display: none; }
body.kompakt .screen { padding: 4px; }
body.kompakt #leiste { gap: 6px; padding-top: 4px; margin-top: 4px; }
body.kompakt .fk { padding: 2px 6px; font-size: 11px; }
body.kompakt #zugText { font-size: 11px; }

/* Schmale Fenster: Bretter untereinander */
@media (max-width: 560px) {
  #kampfLayout, #aufstLayout { flex-direction: column; }
  #werkzeug { flex: 0 0 auto; }
}