/* Lohn-Flotte · Lohnmeister.ai (27.10.2026) — Styles für assets/lohn-flotte.js.
   Flach und ruhig: Panels aus lm.css (--paper, --mist, --line, --ink-900, --blue-600; folgen dem Dunkelmodus),
   Seekarte als tiefblaues Meer mit dezentem Wellenmuster, Gold nur als Akzent (Fähigkeit, Panzerkreuzer, aktiver Zug).
   Layout über Container-Abfragen: ab 760 px Breite beide Meere nebeneinander, darunter Reiter „Meine Flotte“ / „Gegner“.
   Feldgröße --cs passt sich der Spaltenbreite an (14 × 14 am Handy ≈ 23 px), die Lupe vergrößert auf 36 px mit Ausschnitt. */
.lf,.lf-ov{--lf-gold:#e2b13c;--lf-gold-ink:#7a5500;--lf-goldsoft:#fff4d6;--lf-navy:#0d2f4f;--lf-navy2:#163f66;--lf-foe:#4a2731;
  --lf-ink:var(--ink-900,#14202a);--lf-mute:var(--ink-500,#5b666f);--lf-blue:var(--blue-600,#1190ce);--lf-blue-soft:var(--blue-050,#eef7fd);
  --lf-paper:var(--paper,#fff);--lf-mist:var(--mist,#f5f9fc);--lf-line:var(--line,#e4ebf1);--lf-line2:var(--line-strong,#d2dbe3);
  --lf-ok:#1f9d63;--lf-bad:#d4503e;--lf-oksoft:#e3f5ec;--lf-okline:#a9dcc0;--lf-badsoft:#fbe5e1;--lf-badline:#ecb3a9;
  --lf-fd:var(--font-display,"Space Grotesk",system-ui,sans-serif);--lf-fb:var(--font-body,"IBM Plex Sans",system-ui,sans-serif)}
html[data-theme=dark] .lf,html[data-theme=dark] .lf-ov{--lf-goldsoft:#2d2612;--lf-gold-ink:#f2cf6b;--lf-oksoft:#123528;--lf-okline:#23614a;--lf-badsoft:#3a201c;--lf-badline:#7a3a30;--lf-navy:#0b2741;--lf-navy2:#123553}
.lf{container:lf / inline-size;position:relative;background:var(--lf-mist);color:var(--lf-ink);border:1px solid var(--lf-line);border-radius:24px;padding:clamp(10px,2.2vw,24px);font:15px/1.5 var(--lf-fb);text-align:left;min-width:0;overflow-wrap:break-word}
.lf *,.lf *::before,.lf *::after,.lf-ov *,.lf-ov *::before,.lf-ov *::after{box-sizing:border-box}
:where(.lf,.lf-ov) p{margin:0}
:where(.lf,.lf-ov) button{font:inherit;color:inherit}
:where(.lf,.lf-ov) h2,:where(.lf,.lf-ov) h3{font-family:var(--lf-fd);color:var(--lf-ink);margin:0;letter-spacing:-.01em;line-height:1.15;font-weight:600}
.lf :focus-visible,.lf-ov :focus-visible{outline:3px solid var(--lf-blue);outline-offset:2px}
.lf-eye{font:600 12px/1.3 var(--lf-fd);letter-spacing:.12em;text-transform:uppercase;color:var(--lf-blue);margin:0 0 6px}
.lf-eye-l{color:#8fd6f9}
.lf-ic{width:22px;height:22px;flex:none}
.lf-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0}
body.lf-noscroll{overflow:hidden}
.lf [hidden],.lf-ov [hidden]{display:none!important}

/* Knöpfe (mind. 44 px) */
.lf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 18px;border-radius:12px;border:1.5px solid var(--lf-line2);background:var(--lf-paper);color:var(--lf-ink);font:600 15px/1.2 var(--lf-fd);cursor:pointer;text-align:center;text-decoration:none}
.lf-btn:hover{border-color:var(--lf-blue)}
.lf-btn .lf-ic{width:19px;height:19px}
.lf-btn-p{background:var(--lf-blue);border-color:var(--lf-blue);color:#fff}
.lf-btn-p:hover{background:var(--blue-700,#0b7cb3);border-color:var(--blue-700,#0b7cb3)}
.lf-btn-g{background:transparent}
.lf-btn-l{min-height:50px;padding:12px 22px;font-size:16px}
.lf-btn-link{border:0;background:transparent;color:var(--lf-mute);text-decoration:underline;text-underline-offset:3px;padding-inline:6px}
.lf-btn-link:hover{color:var(--lf-ink)}
.lf-ib{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;border:1.5px solid var(--lf-line2);background:var(--lf-paper);color:var(--lf-ink);cursor:pointer;padding:0}
.lf-ib:hover{border-color:var(--lf-blue)}
.lf-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.lf-row-end{justify-content:flex-end}

/* Porträts: Bild → Heldenbild → Initialen-Kreis */
.lf-por{--ps:44px;--hc:#1190ce;position:relative;display:inline-block;width:var(--ps);height:var(--ps);flex:none;border-radius:50%;overflow:hidden;background:#d8eaf6}
.lf-por-lome,.lf-fig-lome{--hc:#1190ce}.lf-por-lomy,.lf-fig-lomy{--hc:#c24f86}.lf-por-domi,.lf-fig-domi{--hc:#4a2f5e}
.lf-por-domi{background:#e6dcec}.lf-por-lomy{background:#f6e1ec}
.lf-por-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 10%;opacity:0;transition:opacity .2s}
.lf-por.is-ok .lf-por-img{opacity:1}
/* Kapitäns-Bilder sind Ganzkörper-Figuren (quadratisch): im Kreis auf den Kopf zoomen */
.lf-por-lome .lf-por-img{transform:scale(2.3);transform-origin:50% 13%}
.lf-por-lomy .lf-por-img{transform:scale(2.2);transform-origin:31% 20%}
.lf-por-domi .lf-por-img{transform:scale(2.6);transform-origin:50% 9%}
.lf-ini{display:none;place-items:center;border-radius:50%;background:var(--hc);color:#fff;font:700 18px/1 var(--lf-fd);letter-spacing:-.02em}
.lf-por .lf-ini{position:absolute;inset:0;font-size:calc(var(--ps) * .38)}
.lf-por.is-fail .lf-ini{display:grid}
.lf-por-xs{--ps:30px}.lf-por-s{--ps:44px}.lf-por-m{--ps:64px}
.lf-fig{--hc:#1190ce;position:relative;display:flex;align-items:flex-end;justify-content:center;flex:none;overflow:hidden}
.lf-fig-img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain;object-position:50% 100%;opacity:0;transition:opacity .2s}
.lf-fig.is-ok .lf-fig-img{opacity:1}
.lf-fig .lf-ini{width:60px;height:60px;font-size:22px;align-self:center}
.lf-fig.is-fail .lf-ini{display:grid}

/* Kopfzeile, Funkspruch */
.lf-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.lf-ttl{flex:1;min-width:0}
.lf-ttl b{display:block;font:600 17px/1.25 var(--lf-fd);color:var(--lf-ink)}
.lf-ttl small{display:block;color:var(--lf-mute);font-size:13px;line-height:1.35}
.lf-time{font:600 15px/1 var(--lf-fd);font-variant-numeric:tabular-nums;padding:0 4px;color:var(--lf-mute)}
.lf-radio{display:flex;align-items:center;gap:10px;min-height:58px;padding:7px 12px;border-radius:14px;background:var(--lf-paper);border:1px solid var(--lf-line);margin-bottom:10px}
.lf-radio p{flex:1;min-width:0;font-size:14.5px;line-height:1.45}
.lf-radio.is-foe{border-color:#e7c3bb}
html[data-theme=dark] .lf-radio.is-foe{border-color:#5a3434}
.lf-say{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--lf-mist);border:1px solid var(--lf-line)}
.lf-say p{flex:1;min-width:0;font-size:14px;line-height:1.45}

/* ===== Startbildschirm ===== */
.lf-mhead h2{font-size:clamp(22px,3.6vw,30px);margin:0 0 6px}
.lf-lead{color:var(--lf-mute);max-width:72ch}
.lf-lead b{color:var(--lf-ink)}
.lf-h{display:flex;align-items:center;gap:10px;font:600 17px/1.2 var(--lf-fd);margin:22px 0 10px;color:var(--lf-ink)}
.lf-h span{width:26px;height:26px;border-radius:50%;background:var(--lf-navy);color:#fff;display:grid;place-items:center;font-size:13px}
.lf-heroes,.lf-worlds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.lf-hero,.lf-world{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:10px;min-width:0;padding:12px;border-radius:18px;border:2px solid var(--lf-line);background:var(--lf-paper);text-align:left;cursor:pointer}
.lf-hero:hover,.lf-world:hover{border-color:var(--lf-line2)}
.lf-hero.is-sel,.lf-world.is-sel{border-color:var(--lf-blue);box-shadow:0 0 0 3px rgba(17,144,206,.14)}
.lf-fig-card{height:150px;width:100%;border-radius:12px;background:linear-gradient(180deg,#e6f3fb 0%,#cfe6f5 100%)}
.lf-fig-card.lf-fig-domi{background:linear-gradient(180deg,#efe8f3 0%,#ddd0e6 100%)}
.lf-fig-card.lf-fig-lomy{background:linear-gradient(180deg,#fbeef4 0%,#f1d8e5 100%)}
html[data-theme=dark] .lf-fig-card{background:linear-gradient(180deg,#183650 0%,#10283c 100%)}
.lf-hero-t{min-width:0}
.lf-hero-t b{display:block;font:600 16px/1.25 var(--lf-fd);color:var(--lf-ink)}
.lf-abil-name{display:flex;align-items:center;gap:6px;font:600 14px/1.3 var(--lf-fd);color:var(--lf-blue);margin:3px 0 2px}
.lf-abil-name .lf-ic{width:18px;height:18px}
.lf-hero-t small{display:block;color:var(--lf-mute);font-size:13px;line-height:1.45}
.lf-tick{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;background:var(--lf-blue);color:#fff;display:grid;place-items:center}
.lf-tick .lf-ic{width:17px;height:17px}
.lf-wmap{position:relative;display:block;height:78px;border-radius:12px;overflow:hidden;background-color:#0f4d78;background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:calc(78px / var(--n)) calc(78px / var(--n))}
.lf-wbars{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-content:flex-end;gap:5px 6px;padding:8px 10px}
.lf-wbars i{display:block;width:calc(var(--l) * 7px);height:calc(var(--w) * 6px);border-radius:2px 50% 50% 2px / 2px 50% 50% 2px;background:#d5e6f2}
.lf-wbars i.is-boss{background:var(--lf-gold)}
.lf-world-t b{display:block;font:600 16px/1.25 var(--lf-fd);color:var(--lf-ink)}
.lf-world-t small{display:block;color:var(--lf-mute);font-size:13px;line-height:1.4}
.lf-world-t em{display:block;margin-top:4px;font-style:normal;font-size:12.5px;color:var(--lf-blue)}
.lf-foes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.lf-seg-l{font-size:13px;color:var(--lf-mute);margin:0 0 6px}
.lf-seg-l span{color:var(--lf-ink)}
.lf-seg{display:flex;flex-wrap:wrap;gap:6px}
.lf-segb{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px;border-radius:12px;border:1.5px solid var(--lf-line2);background:var(--lf-paper);font:600 14.5px/1.2 var(--lf-fd);cursor:pointer}
.lf-segb:hover{border-color:var(--lf-blue)}
.lf-segb.is-sel{background:var(--lf-navy);border-color:var(--lf-navy);color:#fff}
.lf-segb .lf-ic{width:18px;height:18px}
.lf-opts{margin-top:18px;border:1px solid var(--lf-line);border-radius:14px;background:var(--lf-paper);padding:2px 14px}
.lf-opts summary{min-height:46px;display:flex;align-items:center;font:600 15px/1.2 var(--lf-fd);cursor:pointer}
.lf-chk{display:flex;gap:12px;align-items:flex-start;padding:8px 0 12px;cursor:pointer}
.lf-chk input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--lf-blue);flex:none}
.lf-chk b{display:block;font-weight:600}
.lf-chk small{display:block;color:var(--lf-mute);font-size:13px;line-height:1.45}
.lf-mfoot{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* ===== Aufstellung ===== */
.lf-smain{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.lf-spanel{background:var(--lf-paper);border:1px solid var(--lf-line);border-radius:18px;padding:14px;min-width:0}
.lf-h2{font:600 16px/1.2 var(--lf-fd);margin:0 0 10px;color:var(--lf-ink)}
.lf-slist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.lf-sbtn{display:grid;grid-template-columns:94px minmax(0,1fr);align-items:center;gap:10px;width:100%;min-height:48px;padding:6px 10px;border-radius:12px;border:1.5px solid var(--lf-line);background:var(--lf-mist);text-align:left;cursor:pointer}
.lf-sbtn:hover{border-color:var(--lf-line2)}
.lf-sbtn.is-boss{border-color:var(--lf-gold)}
.lf-sbtn.is-sel{border-color:var(--lf-blue);background:var(--lf-blue-soft)}
.lf-sbtn b{display:block;font:600 14.5px/1.3 var(--lf-fd);color:var(--lf-ink)}
.lf-sbtn small{display:block;color:var(--lf-mute);font-size:12.5px;line-height:1.35}
.lf-chip-art{--cs:15px;position:relative;flex:none;justify-self:center;width:calc(var(--len) * var(--cs));height:calc(var(--wid) * var(--cs) + 4px)}
.lf-chip-art .lf-ssvg{position:absolute;inset:0;width:100%;height:100%;transition:opacity .2s}
.lf-chip-art.has-img .lf-ssvg{opacity:0}
.lf-chip-art.has-img .lf-simg{opacity:1}
.lf-sbtn.is-boss .lf-chip-art{outline:2px solid var(--lf-gold);outline-offset:1px;border-radius:5px}
.lf-boss-tag{display:inline-flex;align-items:center;gap:3px;font:600 11.5px/1.5 var(--lf-fd);color:var(--lf-gold-ink);background:var(--lf-goldsoft);border:1px solid #ecd28a;border-radius:6px;padding:0 6px;margin-left:4px;vertical-align:1px;white-space:nowrap}
.lf-boss-tag .lf-ic{width:13px;height:13px}
.lf-info{min-height:44px;margin:10px 0;font-size:13.5px;line-height:1.45;color:var(--lf-mute)}
.lf-info b{color:var(--lf-ink)}
.lf-btn-go{width:100%}

/* ===== Spielfeld (Seekarte) ===== */
.lf-side{container:lfside / inline-size;position:relative;min-width:0;background:var(--lf-paper);border:1px solid var(--lf-line);border-radius:18px;padding:10px}
.lf-side.is-active{border-color:var(--lf-gold);box-shadow:0 0 0 2px rgba(226,177,60,.3)}
.lf-stit{display:flex;align-items:center;gap:8px;margin-bottom:8px;min-width:0}
.lf-stit b{font:600 15px/1.2 var(--lf-fd);color:var(--lf-ink);min-width:0}
.lf-stit small{margin-left:auto;color:var(--lf-mute);font-size:12.5px;white-space:nowrap}
.lf-bw{--lab:18px;--cs:clamp(15px,calc((100cqw - var(--lab) - 2px) / var(--n)),44px);position:relative;display:flex;justify-content:center}
.lf-scroll{max-width:100%}
.lf-grid{display:grid;grid-template-columns:var(--lab) calc(var(--n) * var(--cs));grid-template-rows:var(--lab) calc(var(--n) * var(--cs));width:max-content}
.lf-corner{grid-column:1;grid-row:1}
.lf-colh{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(var(--n),var(--cs))}
.lf-rowh{grid-column:1;grid-row:2;display:grid;grid-template-rows:repeat(var(--n),var(--cs))}
.lf-colh span,.lf-rowh span{display:grid;place-items:center;color:var(--lf-mute);font:600 clamp(9px,calc(var(--cs) * .38),12px)/1 var(--lf-fd)}
.lf-field{grid-column:2;grid-row:2;position:relative;width:calc(var(--n) * var(--cs));height:calc(var(--n) * var(--cs));border-radius:4px;overflow:hidden;
  background-color:#0f4d78;background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px),radial-gradient(120% 90% at 30% 15%,#1a689a 0%,#0f4d78 55%,#0a3a5d 100%);
  background-size:var(--cs) var(--cs),var(--cs) var(--cs),100% 100%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);user-select:none;-webkit-user-select:none}
.lf-field::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.9;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48'%3E%3Cpath d='M0 12q12-6 24 0t24 0 24 0 24 0M0 36q12-6 24 0t24 0 24 0 24 0' fill='none' stroke='%23ffffff' stroke-opacity='.075' stroke-width='1.6'/%3E%3C/svg%3E");background-size:96px 48px;animation:lf-wave 16s linear infinite}
@keyframes lf-wave{from{background-position:0 0}to{background-position:96px 0}}
.lf-ships,.lf-marks,.lf-fx{position:absolute;inset:0;pointer-events:none}
.lf-ships{z-index:1}.lf-marks{z-index:2}.lf-cells{z-index:3}.lf-fx{z-index:4}
.lf-cells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--n),var(--cs));grid-template-rows:repeat(var(--n),var(--cs))}
.lf-c{position:relative;display:block;width:var(--cs);height:var(--cs);padding:0;margin:0;border:0;border-radius:0;background:transparent;cursor:default;-webkit-tap-highlight-color:transparent;color:#fff}
.lf-c:focus-visible{outline:2px solid #ffd34d;outline-offset:-2px;z-index:2}
.lf-side-foe .lf-c.is-open{cursor:crosshair}
.lf-side-foe.is-active .lf-c.is-open:hover::after{content:"";position:absolute;inset:16%;border:2px solid #ffd34d;border-radius:50%}
.lf-setup .lf-c.has-ship{cursor:grab;touch-action:none}
.lf-setup .lf-c:not(.has-ship):hover{background:rgba(255,255,255,.08)}
.lf-c.is-pv{background:rgba(255,211,77,.28);box-shadow:inset 0 0 0 1px rgba(255,211,77,.85)}
.lf-c.is-clear::before{content:"";position:absolute;inset:42%;border-radius:50%;background:rgba(255,255,255,.35)}
.lf-c.is-bounce{background:rgba(226,177,60,.2)}
.lf-c.is-bosshit::after{content:"";position:absolute;inset:7%;border:2px solid var(--lf-gold);border-radius:4px}

/* Markierungen */
.lf-mk{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.lf-mk-miss::before{content:"";width:26%;height:26%;border-radius:50%;background:rgba(232,244,252,.85);box-shadow:0 0 0 calc(var(--cs) * .08) rgba(232,244,252,.16)}
.lf-mk-hit::before{content:"";position:absolute;inset:10%;background:#f26a2a;clip-path:polygon(50% 0,61% 31%,92% 17%,73% 46%,100% 59%,68% 66%,75% 98%,50% 77%,25% 98%,32% 66%,0 59%,27% 46%,8% 17%,39% 31%)}
.lf-mk-hit::after{content:"";position:absolute;inset:36%;border-radius:50%;background:#ffd84d}
.lf-mk-hit.has-img::before,.lf-mk-hit.has-img::after{display:none}
.lf-mk-img{position:absolute;left:50%;top:50%;width:120%;height:120%;object-fit:contain;transform:translate(-50%,-56%);opacity:0;transition:opacity .2s;pointer-events:none}
.lf-mk-hit.has-img .lf-mk-img{opacity:1}
.lf-c.is-sunk .lf-mk-hit::before{background:#8c3b26}
.lf-c.is-sunk .lf-mk-hit::after{background:#d9a441}
.lf-c.is-sunk .lf-mk-img{filter:saturate(.55) brightness(.85);width:96%;height:96%}
.lf-mk-tipp{color:#ffd34d}
.lf-mk-tipp .lf-ic{width:66%;height:66%;fill:#ffd34d;stroke:#7a5500;stroke-width:1.2;animation:lf-pulse 1.4s ease-in-out infinite}
.lf-c.is-tipp-foe .lf-mk-tipp .lf-ic{fill:#ff9b87;stroke:#6b231a}
.lf-mk-bounce{color:#ffd34d}
.lf-mk-bounce .lf-ic{width:68%;height:68%;fill:rgba(43,33,8,.55);filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
@keyframes lf-pulse{0%,100%{transform:scale(1)}50%{transform:scale(.82)}}

/* Sonar-Bereiche */
.lf-zone{position:absolute;left:calc(var(--c) * var(--cs));top:calc(var(--r) * var(--cs));width:calc(3 * var(--cs));height:calc(3 * var(--cs));border:2px dashed rgba(143,214,249,.95);border-radius:6px;background:rgba(70,189,244,.13)}
.lf-zone b{position:absolute;right:-2px;top:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:0 6px 0 8px;background:#8fd6f9;color:#0b2f4c;font:700 12px/20px var(--lf-fd);text-align:center}
.lf-zone.is-zero{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.06)}
.lf-zone.is-zero b{background:#e8f1f7}

/* Schiffe: Bild über die Länge der Felder, senkrecht per Drehung; SVG als Ersatz */
.lf-ship{position:absolute;left:calc(var(--c) * var(--cs));top:calc(var(--r) * var(--cs));width:calc(var(--len) * var(--cs));height:calc(var(--wid) * var(--cs))}
.lf-ship.is-v{width:calc(var(--wid) * var(--cs));height:calc(var(--len) * var(--cs))}
.lf-art{position:absolute;left:0;top:0;width:calc(var(--len) * var(--cs));height:calc(var(--wid) * var(--cs))}
.lf-ship.is-v .lf-art{transform:translateX(calc(var(--wid) * var(--cs))) rotate(90deg);transform-origin:0 0}
.lf-bob{position:absolute;inset:0;animation:lf-bob 5.5s ease-in-out infinite;animation-delay:calc(var(--c) * -.7s - var(--r) * .45s)}
@keyframes lf-bob{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-1.5%) rotate(.5deg)}70%{transform:translateY(1.5%) rotate(-.5deg)}}
.lf-ssvg{position:absolute;left:2%;top:0;width:96%;height:100%;transition:opacity .25s}
.lf-simg{position:absolute;left:1%;top:50%;width:98%;height:min(calc(var(--len) * var(--cs) * .98 / var(--ar,5)),calc(var(--wid) * var(--cs) * 1.3));transform:translateY(-50%);object-fit:fill;opacity:0;transition:opacity .25s;pointer-events:none;-webkit-user-drag:none}
.lf-ship.has-img .lf-simg{opacity:1}
.lf-ship.has-img .lf-ssvg{opacity:0}
.lf-ship.is-sunk .lf-bob{animation:none;transform:rotate(-2.5deg) translateY(3%);filter:grayscale(.75) brightness(.7)}
.lf-ship.is-left .lf-bob{opacity:.55}
.lf-ship.is-sel .lf-art::after{content:"";position:absolute;inset:-1px;border:2px solid #ffd34d;border-radius:8px}
.lf-ship.is-ghost{z-index:2;opacity:.82}
.lf-ship.is-bad .lf-art::after{border-color:#ff6b57;background:rgba(255,107,87,.22)}
/* Panzerkreuzer: Goldpanzer + Schild */
.lf-ship.is-boss .lf-art::before{content:"";position:absolute;inset:1px;border:2px solid var(--lf-gold);border-radius:7px;background:rgba(226,177,60,.16)}
.lf-boss-badge{position:absolute;left:3px;top:50%;z-index:1;width:min(22px,calc(var(--cs) * .66));height:min(22px,calc(var(--cs) * .66));transform:translateY(-50%);border-radius:50%;background:var(--lf-gold);color:#3a2a05;display:grid;place-items:center;box-shadow:0 0 0 2px rgba(10,30,50,.55)}
.lf-boss-badge .lf-ic{width:72%;height:72%}
.lf-ship.is-v .lf-boss-badge{transform:translateY(-50%) rotate(-90deg)}
.lf-ship.is-sunk .lf-boss-badge{background:#9a8a66}

/* Effekte: Fadenkreuz, Explosion, Platscher, Sonar */
.lf-fx>.lf-fxi{position:absolute;left:calc(var(--c) * var(--cs));top:calc(var(--r) * var(--cs));width:var(--cs);height:var(--cs);pointer-events:none}
.lf-fx-aim{color:#ffd34d;animation:lf-aim .32s ease-out forwards}
.lf-fx-aim .lf-ic{width:100%;height:100%}
@keyframes lf-aim{from{transform:scale(2.4) rotate(-45deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
.lf-fx-boom{animation:lf-boom .72s ease-out forwards}
.lf-fx-boom::before{content:"";position:absolute;inset:-35%;background:#ff8a1f;clip-path:polygon(50% 0,61% 31%,92% 17%,73% 46%,100% 59%,68% 66%,75% 98%,50% 77%,25% 98%,32% 66%,0 59%,27% 46%,8% 17%,39% 31%)}
.lf-fx-boom::after{content:"";position:absolute;inset:12%;border-radius:50%;background:#ffe27a}
.lf-fx-boom.is-armor::before{background:var(--lf-gold)}
.lf-fx-boom.is-armor::after{background:#fff4c4}
.lf-fx-boom.has-img::before,.lf-fx-boom.has-img::after{display:none}
.lf-fx-boom img,.lf-fx-splash img{position:absolute;left:-45%;top:-55%;width:190%;height:190%;object-fit:contain}
@keyframes lf-boom{0%{transform:scale(.3);opacity:1}55%{transform:scale(1.2);opacity:1}100%{transform:scale(1.45);opacity:0}}
.lf-fx-splash::before,.lf-fx-splash::after{content:"";position:absolute;inset:8%;border-radius:50%;border:2px solid rgba(255,255,255,.9);animation:lf-ring .7s ease-out forwards}
.lf-fx-splash::after{animation-delay:.14s;opacity:0}
.lf-fx-splash.has-img::before,.lf-fx-splash.has-img::after{display:none}
.lf-fx-splash img{animation:lf-splash .8s ease-out forwards}
@keyframes lf-ring{0%{transform:scale(.2);opacity:1}100%{transform:scale(1.7);opacity:0}}
@keyframes lf-splash{0%{transform:scale(.3) translateY(18%);opacity:0}25%{opacity:1}100%{transform:scale(1.08) translateY(-6%);opacity:0}}
.lf-fx>.lf-fx-sonar{width:calc(3 * var(--cs));height:calc(3 * var(--cs));border-radius:50%;border:3px solid #8fd6f9;animation:lf-sonar 1.3s ease-out forwards}
.lf-fx-sonar.is-zero{border-color:#fff}
@keyframes lf-sonar{0%{transform:scale(.15);opacity:1}100%{transform:scale(1.25);opacity:0}}
.lf-fx-tipp{border-radius:50%;box-shadow:0 0 0 3px #ffd34d;animation:lf-ring .9s ease-out 2}
.lf-fx-clang{border-radius:50%;border:3px solid var(--lf-gold);animation:lf-ring .65s ease-out forwards}

/* Banner „Versenkt!“ */
.lf-banner{position:absolute;left:50%;top:50%;z-index:8;transform:translate(-50%,-50%);width:max-content;min-width:min(80%,240px);max-width:92%;padding:12px 18px;border-radius:14px;background:rgba(8,30,50,.94);color:#fff;text-align:center;box-shadow:0 14px 34px rgba(0,0,0,.35);pointer-events:none;animation:lf-ban 1.9s ease-in-out forwards}
.lf-banner small{display:block;font:700 12px/1.3 var(--lf-fd);letter-spacing:.14em;text-transform:uppercase;color:#ffd34d}
.lf-banner b{display:block;font:600 clamp(15px,2.4vw,19px)/1.25 var(--lf-fd);margin-top:2px}
.lf-banner em{display:block;font-style:normal;font-size:13px;line-height:1.4;color:#cfe1ee;margin-top:4px}
.lf-banner.is-foe small{color:#ff9b87}
.lf-banner.is-boss,.lf-banner.is-bounce{border:2px solid var(--lf-gold)}
.lf-banner.is-bounce{background:rgba(43,33,8,.95)}
.lf-bpips{display:flex;gap:6px;justify-content:center;margin:7px 0 2px}
.lf-bpips i{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center}
.lf-bpips i.is-ok{background:var(--lf-ok)}.lf-bpips i.is-bad{background:var(--lf-bad)}
.lf-bpips .lf-ic{width:14px;height:14px}
@keyframes lf-ban{0%{opacity:0;transform:translate(-50%,-40%) scale(.95)}12%{opacity:1;transform:translate(-50%,-50%) scale(1)}84%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-58%)}}

/* ===== Spielbildschirm ===== */
.lf-turn{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;min-height:48px;padding:8px 14px;border-radius:12px;background:var(--lf-navy);color:#fff;margin-bottom:10px}
.lf-turn-t{display:inline-flex;align-items:center;gap:6px;font:600 15px/1.2 var(--lf-fd)}
.lf-turn-t .lf-ic{width:19px;height:19px}
.lf-turn.is-foe,.lf-turn.is-wait{background:var(--lf-foe)}
.lf-turn.is-over{background:var(--lf-paper);color:var(--lf-ink);border:1px solid var(--lf-line)}
.lf-shots{display:inline-flex;align-items:center;gap:5px}
.lf-shots i{width:14px;height:14px;border-radius:50%;background:var(--lf-gold)}
.lf-shots.is-foe i{background:#ff9b87}
.lf-shots b{margin-left:3px;font-weight:600;font-size:14px}
.lf-extra{font-size:13px;color:#ffc2b4}
.lf-turn-end{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.lf-tabs{display:none}
.lf-tab{position:relative;min-height:46px;border-radius:12px;border:1.5px solid var(--lf-line2);background:var(--lf-paper);font:600 15px/1.2 var(--lf-fd);cursor:pointer;padding:6px 10px}
.lf-tab small{font-weight:500;opacity:.75;margin-left:2px}
.lf-tab.is-sel{background:var(--lf-navy);border-color:var(--lf-navy);color:#fff}
.lf-tab-dot{position:absolute;top:8px;right:10px;width:9px;height:9px;border-radius:50%;background:var(--lf-gold)}
.lf-boards{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.lf-act{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;margin-top:10px}
.lf-abil{flex:1 1 220px;display:flex;align-items:center;gap:10px;min-width:0;min-height:54px;padding:7px 12px;border-radius:14px;border:1.5px solid var(--lf-line2);background:var(--lf-paper);color:var(--lf-ink);text-align:left;cursor:pointer}
.lf-abil.is-ready{border-color:var(--lf-gold);background:var(--lf-goldsoft)}
.lf-abil.is-on{background:var(--lf-navy);border-color:var(--lf-gold);color:#fff}
.lf-abil-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--lf-navy);color:var(--lf-gold);flex:none}
.lf-abil-ic .lf-ic{width:23px;height:23px}
.lf-abil.is-on .lf-abil-ic{background:var(--lf-gold);color:var(--lf-navy)}
.lf-abil-t{flex:1;min-width:0}
.lf-abil-t b{display:block;font:600 15px/1.25 var(--lf-fd)}
.lf-abil-t small{display:block;font-size:12.5px;line-height:1.35;color:var(--lf-mute)}
.lf-abil.is-on small{color:#cfe1ee}
.lf-abil-pips{display:flex;gap:4px;flex:none}
.lf-abil-pips i{width:10px;height:10px;border-radius:50%;background:var(--lf-line2)}
.lf-abil-pips i.on{background:var(--lf-gold)}
.lf-torpdir{flex:0 0 auto}
.lf-zoom{display:none}
.lf-zoom[aria-pressed=true]{background:var(--lf-navy);border-color:var(--lf-navy);color:#fff}
.lf-fleet{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.lf-chip{position:relative;display:inline-flex;align-items:center;gap:6px;padding:4px 9px 4px 7px;border-radius:9px;border:1px solid var(--lf-line);background:var(--lf-mist);font-size:12.5px;line-height:1.25;color:var(--lf-ink)}
.lf-chip-bar{display:block;flex:none;width:calc(var(--l) * 6px);height:calc(var(--w) * 5px + 2px);border-radius:2px 50% 50% 2px / 2px 50% 50% 2px;background:#5d7183}
.lf-chip.is-sunk{opacity:.6}
.lf-chip.is-sunk .lf-chip-n{text-decoration:line-through}
.lf-chip.is-sunk .lf-chip-bar{background:var(--lf-bad)}
.lf-chip.is-boss{border-color:var(--lf-gold);background:var(--lf-goldsoft)}
.lf-chip.is-boss .lf-chip-bar{background:var(--lf-gold)}
.lf-chip-boss{display:inline-grid;place-items:center;color:var(--lf-gold-ink)}
.lf-chip-boss .lf-ic{width:14px;height:14px}

/* ===== Overlays: Lohnfrage, Panzerprüfung, Ende, Anleitung ===== */
.lf-ov{position:fixed;inset:0;z-index:1000;background:rgba(5,20,35,.64);display:flex;align-items:flex-start;justify-content:center;padding:clamp(10px,4vh,44px) 12px;overflow-y:auto;color:var(--lf-ink);font:15px/1.5 var(--lf-fb);text-align:left}
.lf-dlg{position:relative;width:100%;max-width:600px;margin:auto 0;background:var(--lf-paper);border-radius:22px;box-shadow:0 24px 60px rgba(0,0,0,.35);overflow:hidden;animation:lf-in .22s ease-out}
@keyframes lf-in{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.lf-small,.lf-guide{padding:clamp(16px,3vw,26px)}
.lf-small h3{font-size:21px;margin-bottom:8px}
.lf-small p{color:var(--lf-mute)}
.lf-q-top{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:flex-end;padding:14px 18px 0;background:var(--lf-navy);color:#fff;border-bottom:3px solid var(--lf-gold)}
.lf-fig-q{height:104px;width:92px;align-items:flex-start}
.lf-fig-q .lf-fig-img{height:180%;max-width:none}
.lf-q-who{flex:1;min-width:190px;padding-bottom:12px}
.lf-q-who>b{display:block;font:600 18px/1.25 var(--lf-fd);color:#fff}
.lf-q-stake{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.lf-q-stake span{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:8px;background:rgba(255,255,255,.1);font-size:12.5px;line-height:1.35}
.lf-q-stake .lf-ic{width:15px;height:15px}
.lf-q-body{padding:16px 18px 18px}
.lf-q-q{font-size:clamp(17px,2.4vw,20px);line-height:1.38;margin:0 0 14px}
.lf-q-opts{display:grid;gap:8px}
.lf-opt{display:flex;align-items:center;gap:12px;width:100%;min-height:50px;padding:10px 14px;border-radius:12px;border:1.5px solid var(--lf-line2);background:var(--lf-paper);color:var(--lf-ink);text-align:left;cursor:pointer;font-size:15px;line-height:1.38}
.lf-opt:hover:not(:disabled){border-color:var(--lf-blue);background:var(--lf-blue-soft)}
.lf-opt>span:nth-child(2){flex:1;min-width:0}
.lf-opt-k{flex:none;width:28px;height:28px;border-radius:8px;background:var(--lf-mist);border:1px solid var(--lf-line2);display:grid;place-items:center;font:700 13px/1 var(--lf-fd)}
.lf-opt:disabled{cursor:default;opacity:1}
.lf-opt.is-ok{border-color:var(--lf-ok);background:var(--lf-oksoft)}
.lf-opt.is-bad{border-color:var(--lf-bad);background:var(--lf-badsoft)}
.lf-opt.is-dim{opacity:.55}
.lf-opt-m{display:grid;place-items:center;flex:none}
.lf-opt-m .lf-ic{width:21px;height:21px}
.lf-opt.is-ok .lf-opt-m{color:var(--lf-ok)}.lf-opt.is-bad .lf-opt-m{color:var(--lf-bad)}
.lf-res{margin-top:14px;padding:12px 14px;border-radius:14px;border:1px solid var(--lf-line)}
.lf-res.is-ok{background:var(--lf-oksoft);border-color:var(--lf-okline)}
.lf-res.is-bad{background:var(--lf-badsoft);border-color:var(--lf-badline)}
.lf-res-big{display:flex;align-items:center;gap:8px;font:600 16px/1.35 var(--lf-fd);color:var(--lf-ink)}
.lf-res.is-ok .lf-res-big .lf-ic{color:var(--lf-ok)}.lf-res.is-bad .lf-res-big .lf-ic{color:var(--lf-bad)}
.lf-res-right,.lf-res-why{margin-top:6px;font-size:14px;line-height:1.45}
.lf-res-ex{margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--lf-mute)}
.lf-res-chg{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:13.5px;color:var(--lf-gold-ink)}
.lf-res-chg .lf-ic{width:18px;height:18px}
.lf-res .lf-row{margin-top:10px}
/* Panzerprüfung */
.lf-boss-top{background:#2b2108;align-items:center;padding-bottom:14px}
.lf-boss-top .lf-q-who{padding-bottom:0}
.lf-boss-ic{width:62px;height:62px;border-radius:16px;background:var(--lf-gold);color:#2b2108;display:grid;place-items:center;flex:none}
.lf-boss-ic .lf-ic{width:38px;height:38px}
.lf-boss-why{display:block;font-size:13.5px;line-height:1.45;color:#f1e2b8;margin-top:4px}
.lf-boss-why b{color:#fff}
.lf-boss-pp{display:flex;gap:6px;flex:none}
.lf-boss-pp i{width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.35);display:grid;place-items:center;font:700 13px/1 var(--lf-fd);font-style:normal;color:#fff}
.lf-boss-pp i.is-now{border-color:var(--lf-gold);color:var(--lf-gold)}
.lf-boss-pp i.is-ok{background:var(--lf-ok);border-color:var(--lf-ok)}
.lf-boss-pp i.is-bad{background:var(--lf-bad);border-color:var(--lf-bad)}
.lf-boss-pp .lf-ic{width:16px;height:16px}
/* Spielende */
.lf-end-top{display:flex;gap:16px;align-items:flex-end;padding:16px 20px 0;background:var(--lf-navy);color:#fff;border-bottom:3px solid var(--lf-gold)}
.lf-end.is-lose .lf-end-top{background:#3b2630}
.lf-end-top>div{flex:1;min-width:0;padding-bottom:14px}
.lf-fig-end{height:160px;width:136px}
.lf-end-top h3{color:#fff;font-size:clamp(19px,2.8vw,23px);line-height:1.22;margin:2px 0 8px}
.lf-end-say{color:#d5e3ee;font-size:14px;line-height:1.45}
.lf-end-say b{color:#fff}
.lf-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 20px 0;padding:0}
.lf-stats div{background:var(--lf-mist);border:1px solid var(--lf-line);border-radius:12px;padding:8px 10px;min-width:0}
.lf-stats dt{font-size:12px;color:var(--lf-mute);line-height:1.3}
.lf-stats dd{margin:2px 0 0;font:600 16px/1.3 var(--lf-fd);color:var(--lf-ink)}
.lf-stats em{display:inline-block;margin-left:6px;font-style:normal;font:600 11.5px/1.5 var(--lf-fd);color:var(--lf-gold-ink);background:var(--lf-goldsoft);border-radius:6px;padding:0 6px;vertical-align:2px}
.lf-end-note{margin:12px 20px 0;color:var(--lf-mute);font-size:14px}
.lf-end-btns{padding:0 20px 20px}
/* Anleitung */
.lf-prog{height:4px;background:var(--lf-line);border-radius:2px;margin:-4px 0 14px;overflow:hidden}
.lf-prog span{display:block;height:100%;background:var(--lf-blue)}
.lf-guide h3{font-size:clamp(20px,3vw,24px);margin:0 0 8px}
.lf-gtxt{font-size:15px;line-height:1.55}
.lf-gex{margin:14px 0;display:flex;justify-content:center}
.lf-mini{--cs:26px}
.lf-mini .lf-field{border-radius:6px}
.lf-gq{display:flex;flex-direction:column;gap:8px;width:100%}
.lf-gq span{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;font:600 15px/1.3 var(--lf-fd)}
.lf-gq .is-ok{background:var(--lf-oksoft);border:1px solid var(--lf-okline)}
.lf-gq .is-bad{background:var(--lf-badsoft);border:1px solid var(--lf-badline)}
.lf-gq .lf-ic{width:19px;height:19px}
.lf-gq-boss .lf-ic{margin-right:-4px}
.lf-gnav{align-items:center}
.lf-gnav>span{flex:1}

/* ===== Breiten ===== */
@container lf (min-width: 760px){
  .lf-boards{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@container lf (min-width: 820px){
  .lf-smain{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
}
@container lf (max-width: 759.98px){
  .lf-tabs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;margin-bottom:10px}
  .lf-boards[data-tab=me] .lf-side-foe,.lf-boards[data-tab=foe] .lf-side-me{display:none}
  .lf-zoom-ok .lf-zoom{display:inline-grid}
  .lf-side.is-zoom .lf-bw{--cs:36px}
  .lf-side.is-zoom .lf-scroll{width:100%;overflow:auto;max-height:min(70vh,560px);overscroll-behavior:contain;border-radius:6px}
  .lf-side.is-zoom .lf-grid{background:var(--lf-paper)}
  .lf-side.is-zoom .lf-colh,.lf-side.is-zoom .lf-corner{position:sticky;top:0;z-index:6;background:var(--lf-paper)}
  .lf-side.is-zoom .lf-rowh{position:sticky;left:0;z-index:6;background:var(--lf-paper)}
  .lf-side.is-zoom .lf-corner{left:0;z-index:7}
}
@container lf (max-width: 640px){
  .lf-heroes,.lf-worlds,.lf-foes{grid-template-columns:minmax(0,1fr)}
  .lf-hero,.lf-world{flex-direction:row;align-items:center;gap:12px}
  .lf-fig-card{width:88px;height:100px;flex:none}
  .lf-wmap{width:88px;height:64px;flex:none;background-size:calc(64px / var(--n)) calc(64px / var(--n))}
  .lf-wbars{gap:3px 4px;padding:5px 6px}
  .lf-wbars i{width:calc(var(--l) * 4px);height:calc(var(--w) * 4px)}
  .lf-tick{top:8px;right:8px;width:24px;height:24px}
  .lf-hero-t{padding-right:22px}
}
@container lf (max-width: 520px){
  .lf-side{padding:0;border:0;background:transparent;border-radius:0;box-shadow:none}
  .lf-side.is-active{box-shadow:none}
  .lf-bw{--lab:14px}
  .lf-stit{padding:0 2px}
  .lf-radio{min-height:52px;padding:6px 10px}
  .lf-radio p{font-size:14px}
  .lf-turn{padding:7px 12px}
  .lf-mfoot .lf-btn{flex:1 1 100%}
  .lf-act .lf-abil{flex-basis:100%}
}
@media (max-width: 560px){
  .lf-q-top{padding:12px 14px 0}
  .lf-fig-q{height:80px;width:70px}
  .lf-q-body{padding:14px}
  .lf-boss-top{padding-bottom:12px}
  .lf-boss-ic{width:48px;height:48px;border-radius:12px}
  .lf-boss-ic .lf-ic{width:30px;height:30px}
  .lf-boss-pp{order:3;width:100%;justify-content:flex-start}
  .lf-end-top{padding:12px 14px 0;gap:10px}
  .lf-fig-end{height:118px;width:96px}
  .lf-stats{grid-template-columns:repeat(2,minmax(0,1fr));margin:14px 14px 0}
  .lf-end-note{margin:12px 14px 0}
  .lf-end-btns{padding:0 14px 16px}
  .lf-end-btns .lf-btn{flex:1 1 100%}
  .lf-ov{padding:8px 8px 76px}
}
@media (prefers-reduced-motion: reduce){
  .lf *,.lf-ov *,.lf *::before,.lf *::after,.lf-ov *::before,.lf-ov *::after{animation:none!important;transition:none!important}
}