/* UI-V3 (Besitzer: UI-V3) · Startmenü, Kasse (Münzen: UI-V5c, css/ui-coins.css), Siedler-/Meisterkarte, Wohnen, Forschung, Territorien, Wege, Tippstufen, Versetzen, Ereigniskarten.
   Teilbereiche der Mitarbeiter liegen während der Arbeit in eigenen Dateien und werden zum Abschluss hier hineingeführt. */
@import url('ui-v3-karte.css');
@import url('ui-v3-forschung.css');
@import url('ui-v3-wohnen.css');
@import url('ui-v3-routen.css');
@import url('ui-v4-buero.css');
@import url('ui-v4-boerse.css');

/* ===== UI-V3 Kern ===== */
/* Münzen (ui/coins.js coinHTML) – Hülle + schlichter Rückfall; gezeichnete Münzen (Bronze · Silber · Gold · Goldbarren) in css/ui-coins.css (UI-V5c, 12_ARCHITEKTUR_V5 §13) */
#ui .coins { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#ui .coins .cseg { display: inline-flex; align-items: center; gap: 2px; }
#ui .coins .cseg b { font-weight: 800; }
#ui .coin-dot { display: inline-block; width: .9em; height: .9em; border-radius: 50%; box-shadow: inset 0 -1.5px 0 rgba(0,0,0,.22), 0 0 0 1px rgba(43,42,51,.55); flex: none; }
#ui .coin-dot.g { background: radial-gradient(circle at 35% 30%, #FFF4C6, #F2C14E 55%, #B47E14); }
#ui .coin-dot.s { background: radial-gradient(circle at 35% 30%, #FFFFFF, #C9CDD3 55%, #8C929C); }
#ui .coin-dot.b { background: radial-gradient(circle at 35% 30%, #F0B78A, #B87333 55%, #87491B); }
#ui .coin-dot.gb { width: 1.4em; height: .8em; border-radius: 2px; background: linear-gradient(180deg, #FFF3C2, #F2C14E 55%, #C38A1C); }
#ui .coins.neg { color: var(--danger); }
#ui .cost.coin-cost { gap: 4px; }

/* ---------- Startmenü (start-menu.js) ---------- */
#ui .stm-full { padding: 0; background: linear-gradient(180deg, #7FC4F2 0%, #CFE9F7 38%, #F7F2EA 62%); }
#ui .stm-full .full-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: calc(var(--sat) + 12px) calc(var(--sar) + 12px) calc(var(--sab) + 16px) calc(var(--sal) + 12px); }
#ui .stm-stage { width: 100%; max-width: 980px; margin: 0 auto; }
#ui .stm-card { background: var(--card); border-radius: 22px; box-shadow: var(--shadow); padding: 14px; }
#ui .stm-title-card { padding: 0; overflow: hidden; max-width: 560px; margin: 4vh auto 0; }
#ui .stm-art-wrap { position: relative; aspect-ratio: 400 / 220; background: #7FC4F2; }
#ui .stm-art { width: 100%; height: 100%; display: block; }
#ui .stm-logo { padding: 14px 18px 4px; text-align: center; }
#ui .stm-logo-t { font: 900 34px/1.05 system-ui, sans-serif; letter-spacing: -.5px; color: var(--ink); text-shadow: 0 2px 0 #fff; }
#ui .stm-logo-s { margin-top: 6px; font-size: 14px; color: var(--ink2); font-weight: 600; }
#ui .stm-actions { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 10px; }
#ui .stm-title-card > .small { padding: 0 18px 16px; }
#ui .stm-go { min-height: 60px; font-size: 18px; }
#ui .stm-skip { min-height: 48px; }
#ui .stm-full .btn-round.btn-small { width: 48px; height: 48px; min-width: 48px; }
#ui .stm-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
#ui .stm-head-t { flex: 1; min-width: 0; }
#ui .stm-dots { display: flex; gap: 6px; }
#ui .stm-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--card3); }
#ui .stm-dots span.on { background: var(--primary); width: 22px; border-radius: 6px; }
#ui .stm-dots span.done { background: #A9A7F7; }
#ui .stm-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
#ui .stm-col { min-width: 0; }
#ui .stm-col-preview { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#ui .stm-preview { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 10px 6px; }
#ui .stm-preview .avatar { filter: drop-shadow(0 6px 10px rgba(30,20,60,.18)); animation: stm-bob 3.2s ease-in-out infinite; }
@keyframes stm-bob { 50% { transform: translateY(-3px); } }
#ui .stm-preview-name { font: 800 20px/1.1 system-ui, sans-serif; text-align: center; }
#ui .stm-preview-name .stm-pn-sep { color: var(--ink3); }
#ui .stm-preview-name .stm-pn-rolle { color: #C0392B; }
#ui .stm-dice { min-height: 48px; }
#ui .stm-sec { margin-top: 12px; }
#ui .stm-sec .section-title { margin-bottom: 6px; }
#ui .stm-namerow { display: flex; gap: 8px; align-items: center; }
#ui .stm-name { flex: 1; min-width: 0; min-height: 50px; border-radius: 14px; border: 2px solid var(--card3); background: #fff; padding: 0 14px; font: 700 18px system-ui, sans-serif; color: var(--ink); outline: none; -webkit-user-select: text; user-select: text; }
#ui .stm-name:focus { border-color: var(--primary); }
#ui .stm-seg { flex-wrap: wrap; }
#ui .stm-seg button { flex: 1 1 auto; min-height: 46px; font-size: 14px; }
#ui .stm-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
#ui .stm-sw { width: 48px; height: 48px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1.5px rgba(43,42,51,.35), var(--shadow-soft); cursor: pointer; padding: 0; }
#ui .stm-sw.sel { box-shadow: 0 0 0 3px var(--primary), var(--shadow-soft); transform: scale(1.06); }
#ui .stm-looks { display: flex; flex-wrap: wrap; gap: 8px; }
#ui .stm-look { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; min-height: 72px; padding: 6px 6px 5px; border-radius: 14px; border: 2px solid transparent; background: #fff; box-shadow: var(--shadow-soft); font-size: 11px; font-weight: 700; color: var(--ink2); cursor: pointer; }
#ui .stm-look.sel { border-color: var(--primary); color: var(--primary); }
#ui .stm-opt { min-height: 64px; }
#ui .stm-meter { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; }
#ui .stm-meter i { width: 14px; height: 8px; border-radius: 3px; background: var(--card3); }
#ui .stm-meter i.on { background: var(--success); }
#ui .stm-meter small { margin-left: 6px; color: var(--ink2); font-weight: 700; }
#ui .stm-full .full-body { padding-bottom: calc(var(--sab) + 16px + var(--kb, 0px)); scroll-padding-bottom: 90px; }
#ui .stm-foot { position: sticky; bottom: 0; margin: 14px -14px -14px; padding: 12px 14px calc(14px); background: var(--card); box-shadow: 0 -14px 14px -4px var(--card); border-radius: 0 0 22px 22px; z-index: 2; }
#ui .stm-card .ng-summary { margin-top: 12px; }
@media (min-width: 720px) {
  #ui .stm-grid { grid-template-columns: minmax(260px, 1fr) 1.4fr; gap: 20px; }
  #ui .stm-full[data-step="2"] .stm-grid { grid-template-columns: 1fr 1fr; }
  #ui .stm-col-preview { position: sticky; top: 0; align-self: start; }
  #ui .stm-title-card { margin-top: 10vh; }
  #ui .stm-logo-t { font-size: 42px; }
}

/* ---------- HUD: Kasse, Geschlechter, Wohnen ---------- */
#ui .hud-kasse { gap: 4px; padding: 0 8px 0 5px; }
#ui .hud-kasse .kasse-ic .ic { color: #8A5A00; }
#ui .hud-kasse .kasse-ic .ic .a { fill: #F2B134; }
#ui .hud-kasse .coins { font-size: 13px; gap: 4px; }
#ui .hud-kasse.flash-up { animation: v3-flash-up .5s; }
#ui .hud-kasse.flash-down { animation: v3-flash-down .5s; }
@keyframes v3-flash-up { 30% { background: #DDF3E2; transform: scale(1.06); } }
@keyframes v3-flash-down { 30% { background: #FBD9DA; transform: scale(.97); } }
#ui .hud-2l { display: inline-flex; flex-direction: column; line-height: 1.05; }
#ui .hud-sexes { display: inline-flex; gap: 5px; font-size: 10px; font-weight: 700; color: var(--ink2); }
#ui .hud-sexes .hs-w { color: #B5487F; } #ui .hud-sexes .hs-m { color: #3F6FB5; }
#ui .hud-sexes b { font-weight: 800; margin-left: 1px; }
#ui .hud-sexes .hs-k { display: inline-flex; align-items: center; gap: 1px; color: #8A6A00; }
#ui .hud-sexes .hs-k.hidden { display: none; }
#ui .hud-home { flex: 0 0 auto; }
#ui .hud-home.hidden { display: none; }
#ui .kasse-pop { position: absolute; top: calc(100% + 6px); left: 0; width: min(380px, calc(100vw - 16px - var(--sal) - var(--sar))); background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 12px; z-index: 5; animation: v3-pop .18s ease-out; }
#ui .kasse-pop.hidden { display: none; }
@keyframes v3-pop { from { opacity: 0; transform: translateY(-6px); } }
#ui .kp-head { display: flex; align-items: center; gap: 10px; }
#ui .kp-ic .ic { color: #8A5A00; } #ui .kp-ic .ic .a { fill: #F2B134; }
#ui .kp-big .coins { font-size: 22px; gap: 8px; }
#ui .kp-sub { font-size: 12px; color: var(--ink2); margin: 2px 0 8px 36px; }
#ui .kp-warn { background: #FBD9DA; color: #9E1F24; border-radius: 12px; padding: 8px 10px; font-weight: 700; font-size: 13px; margin-bottom: 8px; }
#ui .kp-warn.hidden { display: none; }
#ui .kp-rows { display: flex; flex-direction: column; gap: 4px; }
#ui .kp-row { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 8px; background: #fff; border-radius: 10px; font-size: 14px; font-weight: 600; }
#ui .kp-row.minus .kp-val { color: #9E1F24; } #ui .kp-row.plus .kp-val { color: #23743A; } #ui .kp-row.warn { background: #FBE7CF; }
#ui .kp-val { font-weight: 800; white-space: nowrap; }
#ui .kp-book { margin-top: 8px; }
#ui .kp-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
#ui .kp-chips .chip { background: #DDF3E2; color: #23743A; } #ui .kp-chips .chip.minus { background: #FBE2E3; color: #9E1F24; }
#ui .kp-hint { margin: 8px 2px; }
#ui .kp-acts { display: flex; gap: 8px; } #ui .kp-acts .btn { flex: 1; min-height: 48px; }
/* Hinweis-Ziel (STORY-V3 ziel kasse/wohnen/…) */
#ui .v3-target { animation: v3-target 1.4s ease-in-out infinite; }   /* QA-V3-08: kein z-index */
@keyframes v3-target { 0%, 100% { box-shadow: 0 0 0 0 rgba(82,79,254,.0), 0 0 0 2px var(--primary); } 50% { box-shadow: 0 0 0 7px rgba(82,79,254,.28), 0 0 0 2px var(--primary); } }

/* ---------- Ereigniskarten (event-cards.js) ---------- */
#ui .evc-stack { position: absolute; top: calc(var(--sat) + var(--hud-top-h) + 6px + var(--topstack-h, 0px)); left: 50%; transform: translateX(-50%); width: min(94%, 440px); pointer-events: none; display: flex; flex-direction: column; gap: 6px; z-index: 3; }
#ui .evc { pointer-events: auto; background: var(--card); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; transform: translateY(-14px) scale(.98); opacity: 0; transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .2s; cursor: pointer; border-left: 5px solid var(--primary); }
#ui .evc.in { transform: none; opacity: 1; }
#ui .evc.erfolg { border-left-color: var(--success); } #ui .evc.warn { border-left-color: var(--warn); } #ui .evc.danger { border-left-color: var(--danger); background: #FFF1F1; }
#ui .evc.band { border-left: 0; background: linear-gradient(135deg, #EDEBFF, #F7F2EA 60%); box-shadow: var(--shadow), 0 0 0 2px var(--primary) inset; }
#ui .evc-band { display: flex; align-items: center; gap: 6px; padding: 5px 12px; background: var(--primary); color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .3px; text-transform: uppercase; }
#ui .evc.erfolg .evc-band { background: var(--success); } #ui .evc.danger .evc-band { background: var(--danger); } #ui .evc.warn .evc-band { background: var(--warn); }
#ui .evc-band .ic { color: #fff; }
#ui .evc-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 10px; min-height: 60px; }
#ui .evc-pics { display: flex; align-items: center; flex: none; }
#ui .evc-pic { display: inline-flex; margin-right: -8px; border-radius: 50%; box-shadow: 0 0 0 2px var(--card); }
#ui .evc-pic.kind { align-self: flex-end; }
#ui .evc-heart { position: relative; z-index: 9; margin: 0 2px 0 -2px; display: inline-flex; animation: v3-heart 1s ease-in-out infinite; }
@keyframes v3-heart { 50% { transform: scale(1.25); } }
#ui .evc-pics + .evc-main { margin-left: 8px; }
#ui .evc-ic { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: #fff; }
#ui .evc-main { flex: 1; min-width: 0; }
#ui .evc-title { font-weight: 800; font-size: 15px; line-height: 1.2; }
#ui .evc-text { font-size: 13px; color: var(--ink2); line-height: 1.3; margin-top: 1px; }
#ui .evc-act { font-size: 12px; font-weight: 800; color: var(--primary); margin-top: 3px; }
#ui .evc-x { flex: none; width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink3); border-radius: 50%; cursor: pointer; display: grid; place-items: center; }

/* ---------- Kompakter Dialog kurz:true (Angespülte) ---------- */
#ui .dlgk { --sp: var(--primary); --sp-text: var(--primary); position: absolute; left: 50%; bottom: calc(var(--sab) + var(--bar-h) + 70px); transform: translate(-50%, 30px); width: min(94%, 460px); display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: 60px; background: var(--card); border-radius: 18px; box-shadow: var(--shadow), inset 4px 0 0 var(--sp); opacity: 0; visibility: hidden; transition: opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1), visibility 0s linear .25s; cursor: pointer; }
#ui .dlgk.open { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
#ui .dlgk-pic { flex: none; display: flex; } #ui .dlgk-pic .avatar { box-shadow: 0 0 0 2.5px var(--sp); border-radius: 50%; }
#ui .dlgk-narr { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #EADBB8; }
#ui .dlgk-main { flex: 1; min-width: 0; }
#ui .dlgk-name { font-weight: 800; font-size: 13px; color: var(--sp-text); }
#ui .dlgk-text { font-size: 14px; line-height: 1.3; }
#ui .dlgk-count { flex: none; font-size: 11px; font-weight: 700; color: var(--ink3); align-self: flex-end; }

/* ---------- Siedler-/Meisterkarte (settler-panel.js) ---------- */
#ui .settler.is-meister { background: linear-gradient(90deg, #FFF1DC, transparent 70%); border-radius: 14px; }
#ui .s-name .sx { margin-left: 4px; font-size: 13px; font-weight: 800; } #ui .s-name .sx.w { color: #B5487F; } #ui .s-name .sx.m { color: #3F6FB5; }
#ui .role-tag.kind { background: #FBF0C9; color: #8A6A00; }
#ui .sx-heart { margin-left: 4px; display: inline-flex; vertical-align: middle; }
#ui .meister-card { background: linear-gradient(135deg, #FFF1DC, #F7F2EA); border-radius: 16px; padding: 10px 12px; box-shadow: inset 0 0 0 2px rgba(192,57,43,.25); }
#ui .mc-aura { display: flex; align-items: center; gap: 10px; margin: 4px 0 6px; }
#ui .mc-aura b { display: block; font-size: 15px; } #ui .mc-aura small { display: block; color: var(--ink2); font-size: 12px; }
#ui .mc-ring { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(242,177,52,.45), rgba(242,177,52,0) 70%); box-shadow: 0 0 0 2px #F2B134 inset; animation: v3-aura 2.4s ease-in-out infinite; }
#ui .mc-ring .ic .a { fill: #F2B134; }
@keyframes v3-aura { 50% { box-shadow: 0 0 0 2px #F2B134 inset, 0 0 0 8px rgba(242,177,52,.18); } }
#ui .fact-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
#ui .fact { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 10px; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; box-shadow: var(--shadow-soft); }
#ui .fact.w { color: #B5487F; } #ui .fact.m { color: #3F6FB5; } #ui .fact.kind { color: #8A6A00; background: #FBF0C9; }
#ui .person-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
#ui .person-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 4px 12px 4px 4px; border: 0; border-radius: 999px; background: #fff; box-shadow: var(--shadow-soft); cursor: pointer; text-align: left; }
#ui .person-chip b { display: block; font-size: 13px; } #ui .person-chip small { display: block; font-size: 11px; color: var(--ink2); }
#ui .house-line { width: 100%; border: 0; background: #fff; border-radius: 12px; min-height: 52px; cursor: pointer; text-align: left; }
#ui .warn-line { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: #FBE7CF; color: #9A4D00; font-weight: 700; font-size: 13px; min-height: 48px; }
#ui .purse-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#ui .purse-big .coins { font-size: 22px; gap: 8px; }
#ui .purse-facts { display: flex; flex-direction: column; font-size: 13px; font-weight: 600; color: var(--ink2); }
#ui .purse-facts .debt { color: var(--danger); font-weight: 800; }
#ui .tool-row { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 8px 10px; }
#ui .tool-row.bad { background: #FBE7CF; }
#ui .tool-row b { display: block; font-size: 14px; } #ui .tool-row small { display: block; font-size: 12px; color: var(--ink2); margin-top: 3px; }
#ui .tool-row .bar { margin-top: 4px; }
#ui .tool-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--card2); flex: none; }

/* ---------- Baustelle: Tippstufen (building-panel.js) ---------- */
#ui .tap-stages { margin-top: 8px; }
#ui .ts-bar { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr; gap: 4px; }
#ui .ts-seg { position: relative; height: 12px; border-radius: 6px; background: var(--card3); overflow: hidden; }
#ui .ts-seg i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--success); border-radius: 6px; transition: width .15s; }
#ui .ts-seg.base i { background: #8FD19E; }
#ui .ts-seg.cur { box-shadow: 0 0 0 2px var(--primary); }
#ui .ts-seg.cur i { background: var(--primary); }
#ui .ts-text { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--ink2); font-variant-numeric: tabular-nums; }
#ui .tap-stages.phase2 .ts-text { color: var(--primary); }
#ui .tap-stages.pulse .ts-bar { animation: v3-stage .6s; }
@keyframes v3-stage { 30% { transform: scale(1.04); filter: brightness(1.15); } }
#ui .furnish-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
#ui .furnish-row .btn, #ui .furnish-row .chip { min-height: 48px; }
#ui .furnish-row .chip.ok { display: inline-flex; align-items: center; gap: 4px; background: #DDF3E2; color: #23743A; padding: 0 12px; }
#ui .btn-move .ic { color: var(--primary); }
#ui .place.moving { box-shadow: var(--shadow), 0 0 0 3px var(--primary) inset; }
#ui .reco-card.path-card { background: #EFE6D6; }
#ui .reco-card.path-card .cost-free { font-size: 12px; font-weight: 700; color: var(--success); }
#ui .stm-foot-2 { display: flex; flex-direction: column; gap: 8px; }

/* ---------- V4 §1: Fraktionsverhalten als drei Schalter (behaviour-switches.js) ---------- */
#ui .beh-switches { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
#ui .bs-head { display: flex; align-items: center; gap: 8px; padding: 6px 4px; }
#ui .bs-name { font-weight: 800; font-size: 15px; color: var(--primary); }
#ui .bs-row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 10px; background: #fff; border-radius: 12px; box-shadow: var(--shadow-soft); }
#ui .bs-title { font-weight: 700; font-size: 14px; }
#ui .beh-switches.kompakt .bs-row { min-height: 48px; }
/* V4 §2: Anwerben/Kaufen */
#ui .recruit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#ui .recruit-row .recruit-btn { min-height: 56px; flex-direction: row; justify-content: flex-start; text-align: left; }
#ui .recruit-row .recruit-btn .btn-label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
#ui .recruit-row .recruit-btn small { font-size: 11px; font-weight: 600; opacity: .85; }
#ui .recruit-hint { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; }
@media (max-width: 380px) { #ui .recruit-row { grid-template-columns: 1fr; } }
/* HUD-Zeile 3: Kasse hat Vorrang vor dem Technikband (Befund Screenshot 430 px) */
#ui .hud-row-v2 .hud-kasse { flex: none; }
#ui .hud-row-v2 .hud-xp { min-width: 44px; }
#ui .hud-row-v2 .hud-tech { flex: 0 1 auto; min-width: 0; overflow: hidden; }
#ui .hud-row-v2 .hud-tech span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 400px) { #ui .hud-row-v2 .hud-tech span:last-child { max-width: 52px; } }

/* ---------- QA-V3 (✔ UI-V4) ---------- */
/* QA-V3-03: Toasts rücken unter die Ereigniskarte */
#ui .toasts:not(.low) { top: calc(var(--sat) + var(--hud-top-h) + 8px + var(--topstack-h, 0px) + var(--evc-h, 0px)); }
/* QA-V3-06: Kontrast – Nebentexte ≥ 4,5 : 1 auf Creme, Erfolgs-Grün dunkler */
#ui { --ink3: #6B6878; }
#ui .cost-free, #ui .reco-card.path-card .cost-free { color: #23743A; }
#ui .toast.erfolg { background: #2E8A45; }
/* QA-V3-07: Schließen der Kassenkarte ≥ 44 px */
#ui .kasse-pop .kp-close { width: 48px; height: 48px; min-width: 48px; }
/* QA-V3-04: HUD-Zeilen bei 430 px – Reichweite/XP kürzer, nie unter den Nachbar-Chip */
#ui .hud-chip.grow { min-width: 0; overflow: hidden; }
#ui .hud-chip.grow small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#ui .hud-xptxt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
/* V4 §2: Nachtwarnung Licht */
#ui .hud-licht { display: inline-flex; align-items: center; gap: 3px; min-width: 48px; min-height: 40px; padding: 0 8px; border: 0; border-radius: 12px; background: #2B2A33; color: #FFD36E; font-weight: 800; box-shadow: var(--shadow-soft); cursor: pointer; animation: v3-licht 1.6s ease-in-out infinite; }
#ui .hud-licht.hidden { display: none; }
#ui .hud-licht .ic { color: #FFD36E; } #ui .hud-licht .ic .a { fill: #E8862E; }
/* B4-07: Warnung „Werkstätten warten auf Eingang“ (neben der Lichtwarnung) */
#ui .hud-eingang { display: inline-flex; align-items: center; gap: 3px; min-width: 48px; min-height: 40px; padding: 0 8px; border: 0; border-radius: 12px; background: #3A2B2B; color: #FFB4A8; font-weight: 800; font-size: 15px; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
#ui .hud-eingang.hidden { display: none; }
#ui .hud-eingang .ic { color: #FFB4A8; }
@keyframes v3-licht { 50% { box-shadow: 0 0 0 5px rgba(255,211,110,.25); } }
/* Fassungszeile (Einstellungen, Startmenü) – klein, Kontrast ≥ 4,5 : 1 */
#ui .build-line { text-align: center; font-size: 11px; font-weight: 600; color: #6B6878; padding: 6px 0 10px; }
/* Blatt-Größe „full“ als eigene Klasse (statt .full, die Vollbild-Regeln erbte) */
#ui .sheet.sheet-full { height: calc(100% - var(--hud-top-h) - var(--sat) - 20px); }

/* ---------- QA-V3 Runde 2 (✔ UI-V4) ---------- */
/* QA-V3-08: feste Ebenen-Reihenfolge – nichts aus dem HUD schwebt über Vollbildern */
#ui .layer[data-layer="bubbles"] { z-index: 1; } #ui .layer[data-layer="top"] { z-index: 2; } #ui .layer[data-layer="sheets"] { z-index: 3; }
#ui .layer[data-layer="bottom"] { z-index: 4; } #ui .layer[data-layer="full"] { z-index: 5; } #ui .layer[data-layer="dialog"] { z-index: 6; }
#ui .layer[data-layer="toasts"] { z-index: 7; } #ui .layer[data-layer="challenge"] { z-index: 8; } #ui .layer[data-layer="modal"] { z-index: 9; }
/* QA-V3-09: Toasts bei offenem Blatt oben (über der Welt), bei Vollbild unter dessen Kopf und nur der jüngste */
#ui .toasts.low { top: calc(var(--sat) + 8px); bottom: auto; }
#ui .toasts.over-full { top: calc(var(--sat) + 70px); }
#ui .toasts.over-full .toast:not(:last-child) { display: none; }
/* QA-V3-11: Dialog-Fußpille nie über der letzten Textzeile */
#ui .dlg-card:not(.journal) { padding-bottom: 42px; }
/* QA-V3-12: unter 400 px hat die Zahl Vorrang – Beschriftung/Reichweite/XP-Text weg */
@media (max-width: 400px) {
  #ui .hud-chip.grow > span:not([class]) { display: none; }
  #ui .hud-chip.grow small, #ui .hud-xptxt { display: none; }
  #ui .hud-chip.grow { justify-content: center; }
}
/* QA-V3-14: Trefferflächen ≥ 44 px */
#ui .hud-chip, #ui .hud-expand { min-height: 44px; }
#ui .hud-card { padding: 4px 6px; }
#ui .hud-row { gap: 5px; margin: 1px 0; }
#ui .panel-head .btn-round.btn-small, #ui .full-head .btn-round.btn-small, #ui .panel-close { width: 44px; height: 44px; min-width: 44px; }
#ui .seg button { min-height: 44px; }
#ui .seg { flex-wrap: wrap; }
/* QA-V3-19: breite Bildschirme – HUD-Oberteil, Auftragsleiste und Hinweis neben Vollbildern/vollen Blättern ausblenden, Schleier */
#ui.ui-full-open .layer[data-layer="top"] { visibility: hidden; }
#ui.ui-full-open .layer[data-layer="full"]::before, #ui.ui-full-open .layer[data-layer="sheets"]::before { content: ""; position: absolute; inset: 0; background: rgba(20, 18, 40, .32); pointer-events: none; }
/* QA-V3-04/12 Nachschärfung: Reichweite und XP-Text erst ab 480 px (sonst „36 · …“) */
@media (max-width: 480px) { #ui .hud-chip.grow small, #ui .hud-xptxt { display: none; } }
/* Ereigniskarten bei offenem Blatt ganz oben (über dem HUD), nie über dem Blattkopf; bei Vollbild unter dessen Kopf */
#ui.ui-sheet-open .evc-stack { top: calc(var(--sat) + 8px); }
#ui.ui-full-open .evc-stack { top: calc(var(--sat) + 70px); }
#ui .toasts.low { top: calc(var(--sat) + 8px + var(--evc-h, 0px)); }
#ui .toasts.over-full { top: calc(var(--sat) + 70px + var(--evc-h, 0px)); }
/* V4c-B U1: Forschung steht (research-panel.js) */
#ui .rp-warn { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 10px 12px; border-radius: 14px; background: #FBE7CF; color: #7A3E00; font-weight: 700; font-size: 14px; }
#ui .rp-warn.hidden { display: none; }
#ui .rp-warn .btn { min-height: 44px; flex: none; }

/* V6 §6: Wohnen-Chip – Zusatz „frei n“ / „fehlt m“ (rot), unter 400 px ausgeblendet (Chip selbst wird rot) */
#ui .hud-home .hud-home-x { font-weight: 700; font-size: 12px; opacity: .85; margin-left: 4px; white-space: nowrap; }
#ui .hud-home .hud-home-x.fehlt { color: #E5484D; opacity: 1; }
@media (max-width: 399px) { #ui .hud-home .hud-home-x { display: none; } }