/* Survival Builders – Oberfläche V2 (Besitzer: UI-V2). Ergänzt ui.css (dort nichts ändern): Weltkarte, Kapitelkarte, Markt, Fraktionen/Kaserne,
   Technik-Ansicht, Level-Karte + XP-Ring, Schiffs-/Brücken-/Vorkommen-Panel, Neues-Spiel-Dialog, HUD-Erweiterungen. Farben: Creme #F0ECEB, Akzent #524FFE. */
:root { --v2-sea: #1E5FA8; --v2-sea2: #163F7A; --v2-fog: #D8DFE8; --v2-gold: #F2B134; --v2-bridge: #8B5E3C; --v2-coin: #E9A825; --v2-coin2: #B97E0C; }

/* ---------- Weltkarte ---------- */
#ui .wm-full { padding: 0; background: var(--v2-sea); }
#ui .wm-svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }
#ui .wm-svg text { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; pointer-events: none; user-select: none; }
#ui .wm-top { position: absolute; top: calc(var(--sat) + 10px); left: calc(var(--sal) + 12px); right: calc(var(--sar) + 12px); display: flex; align-items: center; gap: 8px; color: #fff; }
#ui .wm-top .wm-titles { flex: 1 1 auto; min-width: 0; }
#ui .wm-top .wm-title { font-size: 20px; font-weight: 800; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); line-height: 1.1; }
#ui .wm-top .wm-sub { font-size: 12px; font-weight: 600; opacity: .9; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui .wm-top .btn { background: rgba(247, 242, 234, .96); box-shadow: var(--shadow); }
#ui .wm-top .btn-round { width: 48px; height: 48px; min-height: 48px; }
#ui .wm-bottom { position: absolute; left: calc(var(--sal) + 10px); right: calc(var(--sar) + 10px); bottom: calc(var(--sab) + 10px); display: flex; flex-direction: column; align-items: stretch; gap: 8px; pointer-events: none; }
#ui .wm-bottom > * { pointer-events: auto; }
#ui .wm-filter { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
#ui .wm-filter .fchip { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(247, 242, 234, .92); color: var(--ink2); font-weight: 700; font-size: 13px; cursor: pointer; box-shadow: var(--shadow-soft); }
#ui .wm-filter .fchip.on { background: var(--primary); color: #fff; }
#ui .wm-filter .fchip .ic { color: inherit; }
#ui .wm-legend { background: rgba(247, 242, 234, .95); border-radius: var(--r); padding: 10px 12px; box-shadow: var(--shadow); font-size: 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
#ui .wm-legend .lg { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
#ui .wm-legend .lg i { width: 18px; height: 0; border-top: 3px dashed #fff; display: inline-block; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .6)); }
#ui .wm-legend .lg i.bridge { border-top: 4px solid var(--v2-bridge); }
#ui .wm-legend .lg .dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); display: inline-block; }
#ui .wm-legend .lg .dot.ship { background: var(--v2-gold); }
#ui .wm-legend .lg .dot.fog { background: var(--v2-fog); border-color: #9AA5B5; }
#ui .wm-card { background: var(--card); border-radius: var(--r); padding: 12px 14px; box-shadow: var(--shadow); animation: pop .22s ease-out; }
#ui .wm-card .wm-card-head { display: flex; align-items: center; gap: 10px; }
#ui .wm-card .wm-card-ic { width: 44px; height: 44px; border-radius: 14px; background: var(--card2); display: flex; align-items: center; justify-content: center; flex: none; color: var(--ink); }
#ui .wm-card .wm-card-title { font-weight: 800; font-size: 17px; line-height: 1.15; }
#ui .wm-card .wm-card-sub { font-size: 12px; color: var(--ink2); margin-top: 1px; }
#ui .wm-card .wm-card-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
#ui .wm-card .wm-card-actions .btn { flex: 1 1 auto; min-height: 48px; }
#ui .wm-card .wm-card-actions .btn-ghost { flex: 0 0 auto; }
#ui .wm-card .wm-card-info { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; font-size: 12px; color: var(--ink2); }
#ui .wm-card .wm-card-info b { color: var(--ink); }
#ui .wm-card.danger { border: 2px solid var(--danger); }
/* SVG-Ebenen: Marker sind über scale(1/s) bildschirmgroß (Maße in px), Routen/Brücken/Kurs in Weltkoordinaten */
#ui .wm-route { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 2px; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
#ui .wm-route.inactive { stroke: rgba(255, 255, 255, .35); }
#ui .wm-course { fill: none; stroke: #fff; stroke-width: 2.5px; stroke-dasharray: 2 7; stroke-linecap: round; vector-effect: non-scaling-stroke; animation: wmDash 1.2s linear infinite; }
@keyframes wmDash { to { stroke-dashoffset: -18; } }
#ui .wm-bridge-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
#ui .wm-bridge-line.offen { stroke: rgba(255, 255, 255, .6); stroke-width: .9; stroke-dasharray: .9 .9; }
#ui .wm-bridge-line.bau { stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 1.6 .8; }
#ui .wm-bridge-line.fertig { stroke: var(--v2-bridge); stroke-width: 1.7; }
#ui .wm-bridge-line.gesperrt { stroke: rgba(255, 255, 255, .3); stroke-width: .8; stroke-dasharray: .5 1; }
#ui .wm-bridge-hit { fill: none; stroke: transparent; stroke-width: 5; pointer-events: stroke; cursor: pointer; }
#ui .wm-cur { fill: none; stroke: #fff; stroke-width: .8; stroke-dasharray: 2 1.4; animation: spinDash 6s linear infinite; pointer-events: none; }
#ui .wm-hit { fill: transparent; stroke: none; pointer-events: all; cursor: pointer; }
#ui .wm-label text { font-weight: 800; fill: #fff; font-size: 13px; text-anchor: middle; paint-order: stroke; stroke: rgba(0, 0, 0, .55); stroke-width: 3px; stroke-linejoin: round; }
#ui .wm-label text.sub { font-size: 10.5px; font-weight: 700; fill: #F3F6FB; stroke-width: 2.5px; }
#ui .wm-label.unknown text { fill: #E6EBF2; }
#ui .wm-label.npc text { fill: var(--lbl, #fff); }
#ui .wm-label.pressed, #ui .wm-boat.pressed, #ui .wm-ship.pressed, #ui .wm-post.pressed, #ui .wm-deposit.pressed { opacity: .75; }
#ui .wm-label .pin { fill: rgba(255, 255, 255, .9); stroke: var(--ink); stroke-width: 1.2; }
#ui .wm-label.current .pin { fill: var(--v2-gold); }
#ui .wm-boat .hull { stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
#ui .wm-boat .eta { font-size: 10px; font-weight: 800; fill: #fff; text-anchor: middle; paint-order: stroke; stroke: rgba(0, 0, 0, .55); stroke-width: 2.5px; }
#ui .wm-boat .row-ring { fill: none; stroke: var(--v2-gold); stroke-width: 2.5; opacity: 0; }
#ui .wm-boat.rowable .row-ring { opacity: 1; transform-box: fill-box; transform-origin: center; animation: rowRing 1.2s ease-out infinite; }
#ui .wm-ship .pulse { fill: none; stroke: #fff; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: wmPulse 1.7s ease-out infinite; }
#ui .wm-ship .halo { fill: rgba(242, 177, 52, .35); }
#ui .wm-ship .hull { fill: var(--v2-gold); stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
#ui .wm-ship .sail { fill: #fff; stroke: var(--ink); stroke-width: 1.1; }
#ui .wm-ship text { font-size: 10px; font-weight: 800; fill: #fff; text-anchor: middle; paint-order: stroke; stroke: rgba(0, 0, 0, .55); stroke-width: 2.5px; }
@keyframes wmPulse { 0% { transform: scale(.55); opacity: .95; } 100% { transform: scale(1.9); opacity: 0; } }
#ui .wm-target .ring { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 4 3; transform-box: fill-box; transform-origin: center; animation: spinDash 4s linear infinite; }
#ui .wm-target .x { stroke: #fff; stroke-width: 2; }
#ui .wm-post .flag { stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
#ui .wm-post .pole { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
#ui .wm-post .base { fill: rgba(255, 255, 255, .85); stroke: var(--ink); stroke-width: 1.2; }
#ui .wm-deposit { display: none; }
#ui .wm-svg.wm-near .wm-deposit { display: block; }
#ui .wm-deposit .gem { stroke: rgba(0, 0, 0, .55); stroke-width: 1.2; stroke-linejoin: round; }
#ui .wm-deposit text { font-size: 9.5px; font-weight: 800; fill: #fff; text-anchor: middle; paint-order: stroke; stroke: rgba(0, 0, 0, .6); stroke-width: 2.5px; }
#ui .wm-deposit.leer { opacity: .5; }
#ui .wm-tap .r1 { fill: none; stroke: #fff; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: wmPulse 1s ease-out 2; }
#ui .wm-tap .r2 { fill: rgba(255, 255, 255, .25); stroke: #fff; stroke-width: 1.5; }
#ui .wm-cam { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 1.5; stroke-dasharray: 3 3; }
#ui .wm-svg.hide-boats .wm-boats .wm-boat, #ui .wm-svg.hide-routes .wm-routes, #ui .wm-svg.hide-bridges .wm-bridges, #ui .wm-svg.hide-deposits .wm-deposit { display: none; }
#ui .wm-bridge-badge .bg { fill: rgba(247, 242, 234, .96); stroke: var(--ink); stroke-width: 1.2; }
#ui .wm-bridge-badge.bau .bg { stroke: var(--warn); }
#ui .wm-bridge-badge.fertig .bg { fill: var(--v2-bridge); stroke: #5A3A22; }
#ui .wm-bridge-badge text { font-size: 10px; font-weight: 800; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
#ui .wm-bridge-badge.fertig text { fill: #fff; }
#ui .wm-bridge-badge .ic { color: var(--ink); }
#ui .wm-bridge-badge.fertig .ic { color: #fff; }
#ui .wm-hint { position: absolute; left: 50%; top: calc(var(--sat) + 70px); transform: translateX(-50%); background: rgba(43, 42, 51, .85); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; pointer-events: none; white-space: nowrap; }
@media (max-width: 374px) { #ui .wm-legend { font-size: 11px; gap: 4px 10px; padding: 8px 10px; } #ui .wm-top .wm-title { font-size: 18px; } #ui .wm-filter .fchip { font-size: 12px; padding: 0 10px; } }
@media (min-width: 700px) { #ui .wm-bottom { left: 50%; right: auto; width: min(560px, calc(100% - 20px)); transform: translateX(-50%); } #ui .wm-top { left: 50%; right: auto; width: min(720px, calc(100% - 24px)); transform: translateX(-50%); } }

/* ---------- HUD-Erweiterungen: XP-Ring, Münzen-Chip, Technikband ---------- */
#ui .xp-ring { position: relative; }
#ui .xp-ring .ring .ring-fg { stroke: var(--primary); }
#ui .xp-ring .xp-level { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: var(--ink); }
#ui .xp-ring.bump { animation: xpBump .5s ease-out; }
@keyframes xpBump { 0% { transform: scale(1.3); } 100% { transform: none; } }
#ui .hud-level { padding-left: 4px; }
#ui .hud-level small { font-weight: 700; }
#ui .hud-coins { background: #FBF0C9; color: #6A4A00; }
#ui .hud-coins .ico { color: #B97E0C; }
#ui .hud-coins .ico .ic .a { fill: var(--v2-coin); }
#ui .hud-tech { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 2px 10px 2px 7px; border: 0; border-radius: 999px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 800; cursor: pointer; box-shadow: var(--shadow-soft); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
#ui .hud-tech .ico { color: #fff; }
#ui .hud-tech .ico .ic .a { fill: rgba(255, 255, 255, .35); }
#ui .hud-row.hud-row-v2 { justify-content: flex-start; }
#ui .hud-fly { position: absolute; font-weight: 800; font-size: 16px; color: #6A4A00; text-shadow: 0 1px 0 #fff; pointer-events: none; animation: hudFly 1.1s ease-out forwards; z-index: 5; display: inline-flex; align-items: center; gap: 3px; }
#ui .hud-fly.xp { color: var(--primary); }
@keyframes hudFly { 0% { opacity: 0; transform: translate(-50%, 0) scale(.8); } 20% { opacity: 1; transform: translate(-50%, -8px) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -46px); } }
#ui .hb .badge.hb-story { right: 2px; top: 0; }

/* ---------- Kapitelkarte ---------- */
#ui .sm-body { display: flex; flex-direction: column; gap: 8px; }
#ui .sm-nav { display: flex; align-items: center; gap: 8px; padding: 2px 0 6px; }
#ui .sm-nav .btn-round { width: 48px; height: 48px; min-height: 48px; }
#ui .sm-dots { flex: 1 1 auto; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
#ui .sm-dot { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--card3); background: var(--card2); font-weight: 800; font-size: 13px; color: var(--ink2); cursor: pointer; position: relative; }
#ui .sm-dot.active { background: var(--primary); border-color: var(--primary); color: #fff; }
#ui .sm-dot.locked { opacity: .55; }
#ui .sm-dot.claim::after { content: ""; position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); border: 2px solid var(--card); }
#ui .sm-scene { position: relative; flex: 1 1 auto; min-height: 340px; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); background: #1E5FA8; }
#ui .sm-scene.slide-l { animation: smSlideL .32s ease-out; }
#ui .sm-scene.slide-r { animation: smSlideR .32s ease-out; }
@keyframes smSlideL { 0% { transform: translateX(40px); opacity: .4; } 100% { transform: none; opacity: 1; } }
@keyframes smSlideR { 0% { transform: translateX(-40px); opacity: .4; } 100% { transform: none; opacity: 1; } }
#ui .sm-svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; display: block; }
#ui .sm-svg text { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; pointer-events: none; }
#ui .sm-path-out { fill: none; stroke: rgba(43, 42, 51, .55); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
#ui .sm-path { fill: none; stroke: #F7F2EA; stroke-width: 1.6; stroke-dasharray: 2.4 1.8; stroke-linecap: round; stroke-linejoin: round; }
#ui .sm-branch { fill: none; stroke: rgba(247, 242, 234, .75); stroke-width: 1; stroke-dasharray: 1 1.3; }
#ui .sm-pt { cursor: pointer; }
#ui .sm-pt .hit { fill: transparent; pointer-events: all; }
#ui .sm-pt .disc { fill: #F7F2EA; stroke: var(--ink); stroke-width: .9; }
#ui .sm-pt .icw { color: var(--ink); }
#ui .sm-pt .icw .ic .a { fill: #D9D2C5; }
#ui .sm-pt.gesperrt .disc { fill: #B8BCC6; stroke: #6B6F78; }
#ui .sm-pt.gesperrt .icw { color: #4C505A; }
#ui .sm-pt.gesperrt .lbl { opacity: .75; }
#ui .sm-pt.offen .disc { fill: #FBF7EF; stroke-dasharray: 1.2 .9; }
#ui .sm-pt.einloesbar .disc { fill: var(--gold); stroke: #7A4E00; }
#ui .sm-pt.einloesbar .icw { color: #3B2A00; }
#ui .sm-pt.einloesbar .icw .ic .a { fill: #FFE08A; }
#ui .sm-pt.einloesbar .glow { fill: rgba(242, 177, 52, .45); transform-box: fill-box; transform-origin: center; animation: smGlow 1.6s ease-in-out infinite; }
#ui .sm-pt.einloesbar .ring { fill: none; stroke: #fff; stroke-width: .7; stroke-dasharray: 1.5 1.1; animation: spinDash 5s linear infinite; }
@keyframes smGlow { 0%, 100% { transform: scale(.9); opacity: .6; } 50% { transform: scale(1.25); opacity: 1; } }
#ui .sm-pt.erledigt .disc { fill: var(--success); stroke: #1F6B33; }
#ui .sm-pt.erledigt .icw { color: #fff; }
#ui .sm-pt.erledigt .icw .ic .a { fill: rgba(255, 255, 255, .3); }
#ui .sm-pt.sel .disc { stroke: var(--primary); stroke-width: 1.4; }
#ui .sm-pt.pressed { opacity: .8; }
#ui .sm-pt .lbl { font-size: 3.1px; font-weight: 800; fill: #fff; text-anchor: middle; paint-order: stroke; stroke: rgba(0, 0, 0, .6); stroke-width: .8px; stroke-linejoin: round; }
#ui .sm-pt.neben .lbl { font-size: 2.7px; }
#ui .sm-pt .prog { font-size: 2.6px; font-weight: 700; fill: #FFE08A; text-anchor: middle; paint-order: stroke; stroke: rgba(0, 0, 0, .6); stroke-width: .7px; }
#ui .sm-pt .chip rect { fill: rgba(43, 42, 51, .85); stroke: var(--gold); stroke-width: .4; }
#ui .sm-pt .chip text { font-size: 2.9px; font-weight: 800; fill: #FFE08A; text-anchor: middle; }
#ui .sm-pt .chip .ic { color: #FFE08A; }
#ui .sm-pt .chip .ic .a { fill: var(--gold); }
#ui .sm-banner { position: absolute; left: 10px; top: 10px; right: 10px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); pointer-events: none; }
#ui .sm-bn-kicker { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .95; }
#ui .sm-bn-name { font-size: 22px; font-weight: 800; line-height: 1.1; }
#ui .sm-bn-sub { font-size: 12px; font-weight: 600; opacity: .95; max-width: 70%; }
#ui .sm-bn-lock { display: inline-flex; gap: 5px; align-items: center; margin-top: 6px; background: rgba(43, 42, 51, .7); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; }
#ui .sm-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#ui .sm-card { position: absolute; left: 10px; right: 10px; bottom: 10px; background: rgba(247, 242, 234, .97); border-radius: 18px; padding: 12px 14px; box-shadow: var(--shadow); animation: pop .22s ease-out; }
#ui .sm-card-head { display: flex; align-items: center; gap: 10px; }
#ui .sm-card-ic { width: 44px; height: 44px; border-radius: 14px; background: var(--card2); display: flex; align-items: center; justify-content: center; flex: none; }
#ui .sm-card-ic.einloesbar { background: var(--gold); }
#ui .sm-card-ic.erledigt { background: var(--success); color: #fff; }
#ui .sm-card-ic.gesperrt { background: #B8BCC6; }
#ui .sm-card-title { font-weight: 800; font-size: 17px; line-height: 1.15; }
#ui .sm-card-text { margin-top: 8px; font-size: 14px; line-height: 1.35; color: var(--ink); }
#ui .sm-card-text.intro { font-style: italic; color: var(--ink2); }
#ui .sm-card-prog { font-size: 12px; font-weight: 700; margin-top: 4px; color: var(--ink2); }
#ui .sm-card-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
#ui .sm-reward { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: #FBF0C9; color: #6A4A00; font-weight: 800; font-size: 13px; }
#ui .sm-reward.erledigt { background: var(--card3); color: var(--ink2); }
#ui .sm-status { font-size: 12px; font-weight: 700; color: var(--ink2); }
#ui .sm-status.einloesbar { color: #9A6400; }
#ui .sm-status.erledigt { color: var(--success); }
#ui .sm-card-actions { display: flex; gap: 8px; margin-top: 10px; }
#ui .sm-card-actions .btn { flex: 1 1 auto; }
#ui .sm-below { flex: none; }
@media (max-width: 374px) { #ui .sm-bn-name { font-size: 19px; } #ui .sm-scene { min-height: 300px; } }

/* ---------- Markt ---------- */
#ui .mk-coins { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: #FBF0C9; color: #6A4A00; font-weight: 800; font-size: 14px; flex: none; }
#ui .mk-coins .ic .a { fill: var(--v2-coin); }
#ui .mk-lock { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: #FBD9DA; color: #9E1F24; font-weight: 700; font-size: 13px; margin-bottom: 8px; }
#ui .mk-lock.info { background: #E6EDF8; color: #26456E; }
#ui .mk-sources { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 8px; }
#ui .mk-src { --fc: var(--primary); flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 12px 6px 10px; border: 2px solid transparent; border-radius: 14px; background: #fff; box-shadow: var(--shadow-soft); cursor: pointer; text-align: left; }
#ui .mk-src.on { border-color: var(--fc); background: #F4F3FF; }
#ui .mk-src-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--fc); flex: none; border: 2px solid rgba(0, 0, 0, .15); }
#ui .mk-src-name { display: block; font-weight: 800; font-size: 13px; white-space: nowrap; }
#ui .mk-src-sub { display: block; font-size: 11px; color: var(--ink2); white-space: nowrap; }
#ui .mk-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
#ui .mk-row { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 10px; border: 2px solid transparent; border-radius: 14px; background: #fff; box-shadow: var(--shadow-soft); cursor: pointer; text-align: left; width: 100%; }
#ui .mk-row.sel { border-color: var(--primary); }
#ui .mk-row.off { opacity: .55; }
#ui .mk-row.plain { box-shadow: none; background: var(--card2); min-height: 44px; }
#ui .mk-main { flex: 1 1 auto; min-width: 0; }
#ui .mk-name { display: block; font-weight: 800; font-size: 14px; }
#ui .mk-sub { display: block; font-size: 11px; color: var(--ink2); }
#ui .mk-trend { font-size: 12px; font-weight: 800; width: 18px; text-align: center; flex: none; }
#ui .mk-trend.up { color: var(--danger); }
#ui .mk-trend.down { color: var(--success); }
#ui .mk-trend.flat { color: var(--ink3); }
#ui .mk-price { font-weight: 800; font-size: 15px; white-space: nowrap; flex: none; font-variant-numeric: tabular-nums; }
#ui .mk-price small { font-weight: 600; color: var(--ink3); font-size: 11px; }
#ui .mk-detail { padding: 10px 12px 12px; border-radius: 14px; background: var(--card2); display: flex; flex-direction: column; gap: 8px; animation: pop .2s ease-out; }
#ui .mk-detail-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
#ui .mk-amt { font-size: 20px; font-weight: 800; min-width: 2ch; text-align: center; }
#ui .mk-quick { margin-left: auto; display: flex; gap: 6px; }
#ui .mk-quick .btn-small { min-width: 48px; min-height: 40px; }
#ui .mk-total { font-weight: 700; }
#ui .mk-grund { font-size: 12px; color: var(--danger); font-weight: 700; }
#ui .mk-grund:empty { display: none; }

/* ---------- Fraktionen / Kaserne ---------- */
#ui .fk-row { --fc: #8E8E9A; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 8px 10px 8px 0; border: 0; border-radius: 14px; background: #fff; box-shadow: var(--shadow-soft); cursor: pointer; text-align: left; margin-bottom: 8px; overflow: hidden; }
#ui .fk-bar { width: 8px; align-self: stretch; background: var(--fc); border-radius: 0 4px 4px 0; flex: none; }
#ui .fk-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#ui .fk-name { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#ui .fk-sub { font-size: 12px; color: var(--ink2); }
#ui .fk-haltung { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; background: var(--card3); color: var(--ink2); text-transform: uppercase; letter-spacing: .03em; }
#ui .fk-haltung.ok { background: #DDF0E0; color: #1F6B33; }
#ui .fk-haltung.warn { background: #FBE7CF; color: #9A4D00; }
#ui .fk-haltung.bad { background: #FBD9DA; color: #9E1F24; }
#ui .bar.fk-zorn { height: 12px; position: relative; overflow: visible; }
#ui .bar.fk-zorn .bar-fill { border-radius: 999px; }
#ui .fk-schwelle { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--danger); border-radius: 1px; }
#ui .fk-head { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; }
#ui .fk-swatch { width: 14px; height: 44px; border-radius: 6px; background: var(--fc); flex: none; }
#ui .fk-goods { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 4px; }
#ui .fk-goods .chip { background: #fff; box-shadow: var(--shadow-soft); }
#ui .fk-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--ink2); padding: 6px 2px; }
#ui .fk-stats b { color: var(--ink); }
#ui .fk-post .btn-round { width: 44px; height: 44px; min-height: 44px; }
#ui .fk-attack { background: #FBD9DA; color: #9E1F24; }
#ui .fk-preview { background: #fff; border-radius: 14px; padding: 10px 12px; box-shadow: var(--shadow-soft); }
#ui .fk-chance { display: flex; align-items: baseline; gap: 8px; font-weight: 800; margin-bottom: 6px; }
#ui .fk-chance b { font-size: 30px; }
#ui .fk-chance.ok b { color: var(--success); }
#ui .fk-chance.warn b { color: var(--warn); }
#ui .fk-chance.bad b { color: var(--danger); }
#ui .bar.fk-vs { height: 18px; }
#ui .bar.fk-vs .bar-fill { background: var(--primary); }
#ui .bar.fk-vs { background: #F3C1C3; }
#ui .fk-warn { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; font-size: 12px; color: #9A4D00; font-weight: 700; }
#ui .fk-pick { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px 0; }
#ui .fk-pick-s { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; min-height: 64px; padding: 4px; border: 2px solid transparent; border-radius: 14px; background: #fff; box-shadow: var(--shadow-soft); font-size: 11px; font-weight: 700; cursor: pointer; }
#ui .fk-pick-s.sel { border-color: var(--primary); background: #EEEDFF; }

/* ---------- Technik ---------- */
#ui .tv-over { display: flex; align-items: center; gap: 14px; padding: 10px 12px; background: #fff; border-radius: 18px; box-shadow: var(--shadow-soft); }
#ui .tv-over .ring-wrap { position: relative; flex: none; }
#ui .tv-over .ring .ring-fg { stroke: var(--primary); }
#ui .tv-level { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
#ui .tv-level small { font-size: 9px; font-weight: 700; color: var(--ink2); text-transform: uppercase; }
#ui .tv-level b { font-size: 24px; }
#ui .tv-stufe { font-weight: 800; font-size: 17px; }
#ui .tv-xp { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; font-size: 12px; font-weight: 700; }
#ui .tv-xp .bar { flex: 1 1 auto; }
#ui .tv-ladder { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
#ui .tv-step { flex: 1 0 120px; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 14px; background: var(--card2); border: 2px solid transparent; }
#ui .tv-step.done { background: #DDF0E0; }
#ui .tv-step.cur { border-color: var(--primary); background: #EEEDFF; }
#ui .tv-step.locked { opacity: .6; }
#ui .tv-step-no { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; }
#ui .tv-step.done .tv-step-no { background: var(--success); }
#ui .tv-step.cur .tv-step-no { background: var(--primary); }
#ui .tv-step-name { font-weight: 800; font-size: 14px; }
#ui .tv-step-sub { font-size: 11px; color: var(--ink2); }
#ui .tv-techbar { display: grid; grid-template-columns: repeat(21, 1fr); gap: 2px; margin-top: 10px; }
#ui .tv-techbar span { height: 10px; border-radius: 3px; background: var(--card3); }
#ui .tv-techbar span.on { background: var(--primary); }
#ui .tv-group { font-size: 12px; font-weight: 800; color: var(--primary); margin: 10px 0 4px; text-transform: uppercase; letter-spacing: .04em; }
#ui .tv-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 14px; background: #fff; box-shadow: var(--shadow-soft); margin-bottom: 6px; }
#ui .tv-row.frei { background: var(--card2); box-shadow: none; }
#ui .tv-no { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; flex: none; }
#ui .tv-row.frei .tv-no { background: var(--success); }
#ui .tv-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
#ui .tv-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 6px; border-radius: 999px; background: #EEEDFF; color: var(--ink); font-size: 12px; font-weight: 700; }
#ui .tv-chip.frei { background: var(--card3); color: var(--ink2); }
#ui .tv-quellen { padding: 8px 2px 14px; }

/* ---------- Level-Karte ---------- */
#ui .lv-card { text-align: center; }
#ui .lv-rings { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 10px 0 4px; }
#ui .lv-ring { display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative; }
#ui .lv-ring .ring-wrap { position: relative; }
#ui .lv-ring .ring .ring-fg { stroke: var(--primary); }
#ui .lv-ring .ring.big .ring-fg { stroke: var(--gold); }
#ui .lv-ring small { font-size: 11px; font-weight: 700; color: var(--ink2); text-transform: uppercase; }
#ui .lv-no { position: absolute; left: 0; right: 0; top: 0; height: 64px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; }
#ui .lv-no.big { height: 84px; font-size: 32px; color: #7A4E00; }
#ui .lv-arrow { color: var(--ink3); }
#ui .lv-title { margin: 6px 0 2px; font-size: 22px; }
#ui .lv-sub { margin: 0 0 8px; font-size: 13px; }
#ui .lv-unlocks { text-align: left; background: var(--card2); border-radius: 14px; padding: 10px 12px; margin: 6px 0 10px; display: flex; flex-direction: column; gap: 6px; }
#ui .lv-unl { display: flex; align-items: center; gap: 8px; font-size: 14px; }
#ui .lv-unl small { color: var(--ink2); font-weight: 600; }

/* ---------- Schiff ---------- */
#ui .sp-status { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: var(--shadow-soft); margin-bottom: 8px; }
#ui .sp-hint { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: #E6EDF8; color: #26456E; font-size: 13px; font-weight: 600; margin-top: 8px; }
#ui .sp-choose { margin-top: 8px; padding: 10px; border-radius: 14px; background: var(--card2); display: flex; flex-direction: column; gap: 6px; }
#ui .sp-choose .line { background: #fff; margin: 0; }
#ui .sp-choose .row .btn-small { min-width: 44px; min-height: 40px; padding: 0 8px; }

/* ---------- Brücken ---------- */
#ui .bp-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 8px 10px; border: 2px solid transparent; border-radius: 14px; background: #fff; box-shadow: var(--shadow-soft); cursor: pointer; text-align: left; margin-bottom: 8px; }
#ui .bp-row.bau { border-color: var(--warn); }
#ui .bp-row.fertig { border-color: var(--v2-bridge); }
#ui .bp-row.gesperrt { opacity: .7; }
#ui .bp-ic { width: 44px; height: 44px; border-radius: 14px; background: var(--card2); display: flex; align-items: center; justify-content: center; flex: none; }
#ui .bp-row.fertig .bp-ic { background: var(--v2-bridge); color: #fff; }
#ui .bp-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#ui .bp-name { font-weight: 800; font-size: 15px; }
#ui .bp-sub { font-size: 12px; color: var(--ink2); }
#ui .bp-status { font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--card3); color: var(--ink2); flex: none; }
#ui .bp-status.bau { background: #FBE7CF; color: #9A4D00; }
#ui .bp-status.fertig { background: var(--v2-bridge); color: #fff; }
#ui .bp-status.gesperrt { background: #E4E6EA; color: #6B6F78; }
#ui .bp-info { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--ink2); padding: 6px 2px; }
#ui .bp-info b { color: var(--ink); }

/* ---------- Neues Spiel ---------- */
#ui .ng-opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 10px 12px; border: 2px solid transparent; border-radius: 14px; background: #fff; box-shadow: var(--shadow-soft); cursor: pointer; text-align: left; margin-bottom: 6px; }
#ui .ng-opt.sel { border-color: var(--primary); background: #EEEDFF; }
#ui .ng-opt.sel .o-check { background: var(--primary); border-color: var(--primary); }
#ui .ng-opt-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#ui .ng-opt-title { font-weight: 800; font-size: 15px; }
#ui .ng-opt-sub { font-size: 12px; color: var(--ink2); line-height: 1.3; }
#ui .ng-stufen { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
#ui .ng-seg button { min-height: 40px; min-width: 40px; }
#ui .ng-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
#ui .ng-summary { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; padding: 10px 12px; border-radius: 14px; background: #E6EDF8; color: #26456E; font-weight: 700; font-size: 13px; }

/* ---------- Vorkommen ---------- */
#ui .np-amount { font-size: 22px; font-weight: 800; margin: 2px 0 6px; }
#ui .np-amount .muted { font-size: 14px; font-weight: 600; }
#ui .np-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
#ui .np-chips .chip { min-height: 30px; padding: 4px 10px; }
#ui .np-chips .chip.success { background: #DDF0E0; color: #1F6B33; }
#ui .np-rate { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: var(--shadow-soft); margin-bottom: 8px; }
#ui .np-rate.muted { background: var(--card2); box-shadow: none; }

/* ---------- Baumenü: Technik-Sperre, Sofortkauf, Kurbeln; Lager: Gruppen, Funde ---------- */
#ui .bcard .b-lock.tech { color: var(--primary); }
#ui .b-buy { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 4px 10px; border: 0; border-radius: 999px; background: #FBF0C9; color: #6A4A00; font-weight: 800; font-size: 12px; cursor: pointer; min-height: 32px; }
#ui .b-buy:disabled { opacity: .5; }
#ui .b-buy .ic .a { fill: var(--v2-coin); }
#ui .b-buy.crank { background: #FBE7CF; color: #9A4D00; }
#ui .b-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
#ui .buy-missing { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px 12px; border-radius: 14px; background: #FBF0C9; }
#ui .buy-missing .bm-main { flex: 1 1 auto; min-width: 0; font-size: 13px; }
#ui .buy-missing .bm-main b { display: block; font-size: 14px; }
#ui .buy-missing .btn { flex: none; min-height: 48px; }
#ui .stock-group { font-size: 12px; font-weight: 800; color: var(--ink2); text-transform: uppercase; letter-spacing: .04em; margin: 10px 0 2px; display: flex; align-items: center; gap: 6px; }
#ui .stock-group:first-child { margin-top: 0; }
#ui .stock .st-sell { flex: none; min-height: 36px; min-width: 44px; padding: 0 8px; }
#ui .stock .st-wert { font-size: 11px; color: #6A4A00; font-weight: 700; }
#ui .recipe-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

/* ---------- Routen-Editor: Reiter Waren/Personen, Fahrzeug Karren ---------- */
#ui .rt-mode { display: flex; gap: 6px; margin-bottom: 8px; }
#ui .rt-persons { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; background: var(--card2); }
#ui .rt-persons .row .val { min-width: 60px; text-align: right; font-weight: 800; }

/* ---------- Einstellungen V2 ---------- */
#ui .set-summary { font-size: 12px; color: var(--ink2); padding: 0 2px 8px; }
/* HUD-Karte als Bezug für Flugtexte; XP-Zeile */
#ui .hud-card { position: relative; }
#ui .hud-xp { display: flex; align-items: center; gap: 6px; min-width: 0; }
#ui .hud-xp .bar { flex: 1 1 auto; min-width: 40px; }
#ui .hud-xp .bar.hud-xpbar .bar-fill { background: var(--primary); }
#ui .hud-xptxt { font-size: 10px; font-weight: 700; color: var(--ink2); white-space: nowrap; }
#ui .hud-fly.minus { color: var(--danger); }
#ui .hud-level .num { font-size: 12px; }

/* ---------- QA-013: Trefferflächen ≥ 44 px ohne optische Änderung (unsichtbare Pseudo-Elemente) ---------- */
#ui .hud-chip, #ui .hud-expand, #ui .seg button, #ui .tab, #ui .sm-dot, #ui .btn-small, #ui .fchip, #ui .mk-src, #ui .b-buy { position: relative; }
#ui .hud-chip::after, #ui .hud-expand::after, #ui .seg button::after, #ui .tab::after, #ui .sm-dot::after, #ui .btn-small::after, #ui .b-buy::after { content: ""; position: absolute; left: -3px; right: -3px; top: -6px; bottom: -6px; }
#ui .ch-gains { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; margin: 6px 0 12px; }
#ui .ch-gain { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; background: var(--card2); font-weight: 800; font-size: 14px; }
#ui .wm-tgrid { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1px; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; pointer-events: none; }
/* Optionszeilen: Titel und Untertitel untereinander (Angriff, Schiff, Rekrutieren); Technikband in der HUD-Zeile kürzt bei Platzmangel */
#ui .opt .o-title, #ui .opt .o-sub { display: block; }
#ui .hud-row-v2 .hud-tech { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#ui .hud-row-v2 .hud-tech span { overflow: hidden; text-overflow: ellipsis; }
/* HUD-Zeile 3 kompakt: Ring trägt die Level-Zahl, Wort „Level“ nur ab Tablet; XP-Text unter 375 px weg. Weltkarte auf Tablet vollflächig. */
#ui .hud-level .hud-level-txt { display: none; }
#ui .hud-level { padding-right: 6px; }
@media (max-width: 374px) { #ui .hud-xptxt { display: none; } }
@media (min-width: 700px) { #ui .hud-level .hud-level-txt { display: inline; } #ui .full.wm-full { left: 0; right: 0; width: auto; margin-left: 0; } }

/* V8 (Doku/20_BRUECKEN_STEIN.md): Einstieg im Baumenü, Stein-Abschnitt der Baustelle */
#ui .bp-einstieg { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; margin: 0 0 10px; padding: 8px 12px; border: 2px solid var(--v2-bridge); border-radius: 16px; background: var(--card); color: var(--ink); text-align: left; cursor: pointer; }
#ui .bp-e-ic { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: var(--card2); display: flex; align-items: center; justify-content: center; }
#ui .bp-e-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#ui .bp-e-main b { font-size: 15px; font-weight: 800; }
#ui .bp-e-sub { font-size: 12px; color: var(--ink2); }
#ui .bp-grund { margin-top: 6px; color: var(--ink2); }
#ui .bp-grund.warn { color: #9A4D00; font-weight: 700; }
#ui .bp-quellen { margin-top: 4px; }
#ui .bp-statustext { font-weight: 700; }