/* Grundgerüst und Entwickleranzeigen (Engine-Schild, Bildrate, alte Textleiste). Im Spiel ausgeblendet,
   F2 blendet sie ein (body.entwickler). */
:root { --grund: #05080b; --linie: rgba(169, 232, 255, .18); --text: #dbe6ee; --matt: #8499a5; --cyan: #4ec0e6; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--grund); color: var(--text); font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow: hidden; }
body { display: grid; grid-template-rows: 1fr; }
header.werkzeug { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 16px; border-bottom: 1px solid var(--linie); }
header.werkzeug h1 { margin: 0 8px 0 0; font-size: 15px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
header.werkzeug label { display: flex; align-items: center; gap: 7px; color: var(--matt); white-space: nowrap; }
header.werkzeug select, header.werkzeug button { font: inherit; color: var(--text); background: #0b141b; border: 1px solid var(--linie); border-radius: 6px; padding: 6px 10px; white-space: nowrap; cursor: pointer; }
header.werkzeug button[aria-pressed="true"] { border-color: var(--cyan); color: #fff; background: #0e2230; }
#feuer { border-color: rgba(255, 140, 60, .6); color: #ffd2b0; }
.gruppe { display: flex; gap: 6px; }
.trenner { width: 1px; align-self: stretch; background: var(--linie); }
.kennzahlen { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; padding: 7px 16px; border-bottom: 1px solid var(--linie); color: var(--matt); font-size: 12.5px; }
.kennzahlen b { color: #fff; font-weight: 600; }
main { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
.seite { position: relative; border-right: 1px solid var(--linie); min-height: 0; }
.seite:last-child { border-right: 0; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
.schild { position: absolute; left: 14px; top: 12px; margin: 0; padding: 6px 10px; border-radius: 6px; background: rgba(5, 8, 11, .7); border: 1px solid var(--linie); font-size: 12.5px; pointer-events: none; }
.schild b { color: #fff; }
.schild span { color: var(--matt); margin-left: 8px; }
.status { position: absolute; left: 14px; bottom: 12px; margin: 0; padding: 5px 9px; border-radius: 6px; background: rgba(5, 8, 11, .7); color: var(--text); font-size: 12.5px; pointer-events: none; font-variant-numeric: tabular-nums; }
main.einzeln { grid-template-columns: 1fr; grid-template-rows: 1fr; }
main.einzeln .seite { border: 0; }
/* alte Textleiste: bleibt für Tests im DOM (ids fs-*), sichtbar nur im Entwicklermodus */
.fahrstand { position: absolute; z-index: 5; left: 50%; bottom: 46px; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 16px; max-width: calc(100% - 32px); margin: 0; padding: 7px 12px; border-radius: 6px; background: rgba(5, 8, 11, .74); border: 1px solid var(--linie); color: var(--text); font-size: 12.5px; font-variant-numeric: tabular-nums; pointer-events: none; }
.fahrstand b { color: #fff; font-weight: 600; }
.fahrstand .hilfe { color: var(--matt); }
.fahrstand .schaden { color: #ff9a6b; }
.fahrstand .lage { color: #ffd59a; }
.fahrstand .echolot.warnung { color: #ff9a6b; font-weight: 600; }
.fahrstand[hidden] { display: none; }
.flackern { position: absolute; inset: 0; z-index: 3; background: #000; opacity: 0; pointer-events: none; }
@media (max-width: 800px) { main { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } .seite { border-right: 0; border-bottom: 1px solid var(--linie); } }

/* Spielmodus: Werkzeuge weg, die Szene füllt das Fenster */
body:not(.entwickler) header.werkzeug, body:not(.entwickler) .kennzahlen,
body:not(.entwickler) .schild, body:not(.entwickler) .status, body:not(.entwickler) .fahrstand { display: none; }