/* Seeschlacht — Seekarte bei Nacht: tiefes Petrol, Raster in Sandfarbe,
   Treffer in Signalrot. Bewusst einthemig, alles explizit gefärbt. */

:root {
  --see: #0c1f26;
  --see-2: #071318;
  --panel: #143039;
  --panel-2: #1b3e49;
  --naht: #24505e;
  --schrift: #e4eef0;
  --schrift-dim: #9fb6bd;
  --schrift-blass: #6d878f;

  --wasser: #143a49;
  --wasser-rand: #1e5568;
  --sand: #e8c98a;
  --sand-tief: #8a7440;
  --treffer: #e2603c;
  --treffer-tief: #6d2f20;
  --schiff: #8fa3ab;
  --schiff-rand: #b8c9cf;
  --wrack: #6b4038;
  --gut: #5fc0a0;

  --font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;
  --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-num: ui-monospace, SFMono-Regular, 'SF Mono', 'Roboto Mono', Menlo, Consolas, monospace;

  --r-md: 14px;
  --r-lg: 22px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overscroll-behavior: none; }

body {
  background: var(--see);
  background-image:
    radial-gradient(130% 60% at 50% -8%, #16323d 0%, rgba(22, 50, 61, 0) 62%),
    linear-gradient(180deg, var(--see) 0%, var(--see-2) 100%);
  background-attachment: fixed;
  color: var(--schrift-dim);
  font-family: var(--font-ui);
  font-size: 16px; line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* ---------- Gerüst ---------- */

#app { min-height: 100dvh; display: flex; flex-direction: column; }
.screen { flex: 1; display: flex; flex-direction: column; min-height: 100dvh; }
.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; min-height: 0; }
.scrollbar { overflow-y: auto; max-height: 100dvh; }
.wrap { width: 100%; max-width: 560px; margin-inline: auto; padding: 22px 18px calc(18px + var(--safe-b)); }
.blatt { padding: calc(var(--safe-t) + 16px) 18px calc(18px + var(--safe-b)); width: 100%; max-width: 560px; margin-inline: auto; }

h2 { font-family: var(--font-display); font-weight: 400; font-size: 26px; color: var(--schrift); margin: 0 0 6px; }
h3 { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand-tief); font-weight: 700; margin: 24px 0 8px; }
p, li { font-size: 15px; line-height: 1.6; color: var(--schrift-dim); }
strong { color: var(--schrift); }
em { color: var(--sand); font-style: italic; }

.kopf {
  display: flex; align-items: center; gap: 12px;
  padding: calc(var(--safe-t) + 12px) 16px 10px;
  border-bottom: 1px solid var(--naht);
}
.kopf .titel { flex: 1; min-width: 0; }
.kopf .ober { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--schrift-blass); font-weight: 700; }
.kopf h1 {
  margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 23px;
  color: var(--schrift); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.werkzeuge { display: flex; gap: 7px; }
.werkzeug {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--naht); color: var(--schrift-dim); font-size: 15px;
}

/* ---------- Knöpfe ---------- */

.btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 15px 18px; border-radius: var(--r-md);
  font-weight: 650; font-size: 16px; letter-spacing: -0.01em;
  transition: transform 0.1s ease, filter 0.15s ease;
}
.btn:active { transform: scale(0.985); }
.btn:disabled { opacity: 0.3; transform: none; box-shadow: none; filter: saturate(0.5); }
.btn--signal { background: var(--sand); color: #2b2007; box-shadow: 0 8px 26px rgba(232, 201, 138, 0.16); }
.btn--geist { background: var(--panel); color: var(--schrift); border: 1px solid var(--naht); }
.btn--leise { background: none; color: var(--schrift-blass); font-weight: 500; font-size: 15px; padding: 13px; }
.knopfsaeule { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.reihe { display: flex; gap: 10px; }
.reihe .btn { width: auto; flex: 1; }

/* ---------- Startbildschirm ---------- */

.start { justify-content: center; text-align: center; padding: 30px 20px calc(28px + var(--safe-b)); }
.wortmarke {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 11vw, 52px); line-height: 1.03; margin: 0;
  color: var(--schrift); letter-spacing: -0.02em;
}
.wortmarke em { font-style: italic; color: var(--sand); }
.unterzeile { color: var(--schrift-blass); margin: 10px 0 26px; }

/* ---------- Das Meer ---------- */

.meerfeld { padding: 8px 12px 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.meertitel {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--schrift-blass); font-weight: 700; text-align: center;
}
.meer {
  display: grid; gap: 2px;
  /* Die Spaltenzahl kommt aus dem Spielstand — die kurze Fassung ist 8 × 8. */
  grid-template-columns: 1.1em repeat(calc(var(--spalten, 11) - 1), 1fr);
  position: relative;
  width: 100%; max-width: min(92vw, 46dvh);
  font-size: clamp(9px, 2.6vw, 12px);
}
.meer--klein { max-width: min(58vw, 26dvh); font-size: 8px; opacity: 0.92; }
.meer .kopfzelle {
  display: grid; place-items: center; color: var(--schrift-blass);
  font-family: var(--font-num); font-size: 0.85em; font-weight: 700;
}
.zelle {
  aspect-ratio: 1; border-radius: 3px;
  background: var(--wasser); border: 1px solid var(--wasser-rand);
  display: grid; place-items: center; padding: 0;
  transition: background 0.12s ease;
}
.zelle--schiff { background: var(--schiff); border-color: var(--schiff-rand); }
.zelle--daneben::after {
  content: ""; width: 26%; height: 26%; border-radius: 50%;
  background: var(--schrift-blass); opacity: 0.75;
}
.zelle--treffer { background: var(--treffer-tief); border-color: var(--treffer); }
.zelle--treffer::after {
  content: ""; width: 58%; height: 58%; border-radius: 2px;
  background: var(--treffer);
}
.zelle--wrack { background: var(--wrack); border-color: var(--treffer); }
.zelle--letzter { box-shadow: 0 0 0 2px var(--sand); }
.zelle--frei { cursor: pointer; }
.zelle--frei:active { background: var(--wasser-rand); }
.zelle--sperr { opacity: 0.45; }

/* ---------- Flottenliste ---------- */

.flotte { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 4px; }
.pott {
  display: flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 9px;
  background: var(--panel); border: 1px solid var(--naht); font-size: 12px; color: var(--schrift-dim);
}
.pott--dran { border-color: var(--sand); color: var(--sand); }
.pott--weg { opacity: 0.4; text-decoration: line-through; }
.pott .rumpf { display: flex; gap: 1px; }
.pott .planke { width: 6px; height: 10px; border-radius: 1px; background: var(--schiff); }
.pott--weg .planke { background: var(--wrack); }

.leiste {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px calc(12px + var(--safe-b));
  max-width: 560px; margin-inline: auto; width: 100%;
}
.sagt { flex: 1; min-width: 0; }
.sagt .zeile1 { color: var(--schrift); font-size: 15px; line-height: 1.35; }
.sagt .zeile2 { color: var(--schrift-blass); font-size: 13px; margin-top: 2px; }
.sagt .treff { color: var(--treffer); font-weight: 700; }
.sagt .senk { color: var(--sand); font-weight: 700; }

/* ---------- Punktetafel und Formulare ---------- */

.tafel {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 10px; background: var(--panel); border: 1px solid var(--naht);
  border-radius: var(--r-lg); padding: 16px 14px; margin: 16px 0;
}
.tafel .seite { text-align: center; min-width: 0; }
.tafel .wer { font-size: 12px; color: var(--schrift-blass); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tafel .zahl { font-family: var(--font-num); font-size: 34px; font-weight: 800; color: var(--sand); line-height: 1.1; }
.tafel .strichlein { width: 1px; height: 40px; background: var(--naht); }

.feld {
  background: var(--panel); border: 1px solid var(--naht);
  border-radius: var(--r-md); padding: 14px; color: var(--schrift); font-size: 16px;
  user-select: text; -webkit-user-select: text; width: 100%;
}
.feld::placeholder { color: var(--schrift-blass); }
.feld--code {
  width: 100%; text-align: center; letter-spacing: 0.3em;
  font-family: var(--font-num); font-size: 28px; text-transform: uppercase; margin-top: 8px;
}
.feldlabel { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--schrift-blass); font-weight: 700; text-align: left; margin: 18px 0 7px; }
.warnton { color: var(--treffer); }

.wahlliste { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.wahl {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--panel); border: 1px solid var(--naht); border-radius: var(--r-md); padding: 13px 15px;
}
.wahl--an { border-color: var(--sand); background: #2c2a17; }
.wahl .haupt { flex: 1; min-width: 0; }
.wahl .oben { color: var(--schrift); font-weight: 650; }
.wahl .unten { font-size: 13px; color: var(--schrift-blass); }
.wahl .haken { color: var(--sand); font-size: 18px; }

/* ---------- Overlays ---------- */

.overlay {
  position: fixed; inset: 0; z-index: 50; background: var(--see-2);
  display: flex; flex-direction: column; animation: einblenden 0.18s ease-out;
}
@keyframes einblenden { from { opacity: 0; } }

.uebergabe, .jubel {
  justify-content: center; align-items: center; text-align: center;
  padding: 26px calc(24px + var(--safe-b));
  background-color: var(--see-2);
  background-image: radial-gradient(90% 50% at 50% 40%, #16323d 0%, rgba(22, 50, 61, 0) 70%);
}
.uebergabe .pfeil { font-size: 40px; animation: schubs 1.5s ease-in-out infinite; }
@keyframes schubs { 50% { transform: translateX(10px); } }
.uebergabe .lbl, .jubel .lbl { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--schrift-blass); font-weight: 700; }
.uebergabe .name, .jubel .name { font-family: var(--font-display); font-size: clamp(30px, 9vw, 42px); color: var(--schrift); line-height: 1.1; margin: 4px 0 6px; }
.uebergabe p, .jubel p { max-width: 32ch; }
.uebergabe .btn, .jubel .btn { width: min(340px, 100%); }
.jubel .krone { font-size: 46px; }

@media (prefers-reduced-motion: reduce) {
  .uebergabe .pfeil { animation: none; }
}

/* ---------- Kopplung per QR ---------- */

.qrfeld { display: grid; place-items: center; background: #dfe9e4; border-radius: 14px; padding: 14px; margin: 16px 0; }
.qrfeld canvas { width: 100%; max-width: 300px; height: auto; image-rendering: pixelated; display: block; }

.scanfenster {
  position: relative; overflow: hidden; border-radius: 14px; background: #000;
  aspect-ratio: 1; margin: 16px 0; border: 1px solid var(--naht);
}
.scanfenster video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanfenster::after {
  content: ""; position: absolute; inset: 16%;
  border: 2px solid var(--sand); border-radius: 12px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.45);
}

.raumcode {
  font-family: var(--font-num); font-size: clamp(38px, 13vw, 58px); font-weight: 800;
  letter-spacing: 0.14em; text-align: center; padding: 18px 10px; margin: 16px 0;
  border-radius: 14px; user-select: all; -webkit-user-select: all;
  background: var(--panel); color: var(--schrift); border: 2px solid var(--sand);
}

.codeklappe { margin-top: 6px; }
.codeklappe summary { font-size: 13px; color: var(--schrift-blass); cursor: pointer; padding: 8px 0; list-style: none; }
.codeklappe summary::before { content: "▸ "; }
.codeklappe[open] summary::before { content: "▾ "; }
.codeklappe .btn { margin-top: 8px; }
.codefeld {
  width: 100%; min-height: 84px; resize: vertical; margin-top: 6px;
  background: var(--panel); border: 1px solid var(--naht); border-radius: 10px;
  padding: 10px; color: var(--schrift-blass); font-family: var(--font-num); font-size: 11px;
  word-break: break-all; user-select: text; -webkit-user-select: text;
}
.lage { margin-top: 12px; font-size: 12px; line-height: 1.55; opacity: 0.62; word-break: break-word; }

/* ---------- Quer: beide Meere nebeneinander ---------- */

@media (orientation: landscape) and (max-height: 560px) {
  .kopf { padding-block: 6px; }
  .meerfeld { flex-direction: row; align-items: flex-start; justify-content: center; gap: 14px; }
  .meerspalte { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .meer { max-width: min(42vw, 82dvh); }
  .meer--klein { max-width: min(30vw, 60dvh); }
}

/* ---------- Salve, Sonderwaffen, Radar und Minen ---------- */

/* Vorgemerkte Ziele einer Salve: noch nichts passiert, aber sichtbar gesetzt. */
.zelle--markiert {
  background: var(--sand); border-color: var(--sand);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25);
}
.zelle--vorschau { background: rgba(226, 96, 60, 0.35); }

/* Eine eigene Mine — und dieselbe, nachdem sie hochgegangen ist. */
.zelle--mine { position: relative; }
.zelle--mine::after,
.zelle--mine-weg::after {
  content: "✱"; position: absolute; inset: 0;
  display: grid; place-items: center; font-size: 0.8em; line-height: 1;
  color: #f0c419; pointer-events: none;
}
.zelle--mine-weg::after { color: #b03a2e; content: "✸"; }

/* Radarbefund: die Zahl liegt auf der Mitte des abgesuchten Quadrats. */
.radarmarke {
  position: absolute; z-index: 2; pointer-events: none;
  grid-column: calc(var(--rx) + 1); grid-row: calc(var(--ry) + 1);
  display: grid; place-items: center;
  font-family: var(--font-num); font-size: 0.62em; font-weight: 800;
  color: #0b1a24; background: rgba(240, 196, 25, 0.92);
  border-radius: 50%; width: 1.5em; height: 1.5em; align-self: center; justify-self: center;
}

.waffenleiste {
  display: flex; gap: 8px; padding: 0 16px 8px;
  max-width: 560px; margin-inline: auto; width: 100%;
}
.waffe {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 6px; border-radius: 12px; font-size: 13px; font-weight: 650;
  background: var(--panel); border: 1px solid var(--naht); color: var(--schrift-dim);
}
.waffe--an { background: var(--sand); border-color: var(--sand); color: #2b2007; }
.waffe:disabled { opacity: 0.32; }
.waffe .zahl { font-family: var(--font-num); font-size: 12px; opacity: 0.8; }