/* UI-V5c · Münzen (ui/coins.js coinHTML, Vertrag Doku/12_ARCHITEKTUR_V5.md §13). Besitzer: MUENZEN-V7 (vorher UI-V5c).
   V7 §16 (Doku/16_ARCHITEKTUR_V7.md): Beträge als Bronze (eine Bronzemünze + Zahl), Tresor-Symbole (Schmal-/Mittel-/Barren als Balken je Metallfarbe), Tresor-Abschnitt und Wechseln-Blatt
   im Kassen-Ausklapp, HUD-Hinweis „▮ 12,5k“ – Abschnitt am Dateiende.
   Gezeichnete Münzen statt Buchstabenkürzel: Bronze #B87333 (dunkler Rand), Silber #C9CDD3 (Glanz), Gold #F2C14E (Prägung: Innenring + Stern), Goldbarren = goldener Balken.
   Hülle wie V3 (.coins > .cseg > .coin-dot + b) – Größen/Abstände anderer Panels (z. B. #ui .of-inc-c .coin-dot) bleiben gültig, alle Maße hier in em.
   Eingebunden per <link data-sb="ui-coins"> aus ui/coins.js (ensureCoinsCss), bis index.html die Zeile führt (ANFRAGEN_UI-V5c.md). */

#ui .coins { display: inline-flex; align-items: center; gap: .45em; font-variant-numeric: tabular-nums; white-space: nowrap; }
#ui .coins .cseg { display: inline-flex; align-items: center; gap: .2em; }
#ui .coins .cseg b { font-weight: 800; letter-spacing: -.01em; }
#ui .coins .cneg { font-weight: 800; margin-right: -.2em; }

/* ---- Münze (gemeinsam) ---- */
#ui .coin-dot { position: relative; display: inline-block; flex: none; box-sizing: border-box; width: 1em; height: 1em; border-radius: 50%; vertical-align: -.14em; }
#ui .coin-dot::before, #ui .coin-dot::after { content: ''; position: absolute; pointer-events: none; }

/* Bronze: Kupferton, dunkler Rand, schlichter Innenring */
#ui .coin-dot.b {
  background: radial-gradient(circle at 34% 28%, #F0B78A 0, #CF8A55 24%, #B87333 52%, #87491B 100%);
  box-shadow: inset 0 0 0 .08em #5C3210, inset 0 -.11em .05em rgba(70, 30, 0, .32), 0 .05em .09em rgba(0, 0, 0, .25);
}
#ui .coin-dot.b::after { inset: 20%; border-radius: 50%; box-shadow: inset 0 0 0 .06em rgba(92, 50, 16, .55), 0 0 0 .045em rgba(255, 210, 170, .35); }

/* Silber: hell, Glanzstreif */
#ui .coin-dot.s {
  background: radial-gradient(circle at 34% 28%, #FFFFFF 0, #E8EAEE 24%, #C9CDD3 54%, #8C929C 100%);
  box-shadow: inset 0 0 0 .08em #646A74, inset 0 -.11em .05em rgba(40, 46, 58, .28), 0 .05em .09em rgba(0, 0, 0, .25);
}
#ui .coin-dot.s::before { inset: .08em; border-radius: 50%; background: linear-gradient(128deg, transparent 26%, rgba(255, 255, 255, .95) 40%, rgba(255, 255, 255, .25) 50%, transparent 58%); }
#ui .coin-dot.s::after { inset: 20%; border-radius: 50%; box-shadow: inset 0 0 0 .06em rgba(88, 94, 106, .5), 0 0 0 .045em rgba(255, 255, 255, .55); }

/* Gold: warmes Gelb, Prägung (Innenring + Stern) */
#ui .coin-dot.g {
  background: radial-gradient(circle at 34% 28%, #FFF4C6 0, #F9D97C 24%, #F2C14E 52%, #B47E14 100%);
  box-shadow: inset 0 0 0 .08em #87590A, inset 0 -.11em .05em rgba(110, 70, 0, .32), 0 .05em .09em rgba(0, 0, 0, .25);
}
#ui .coin-dot.g::after { inset: 18%; border-radius: 50%; box-shadow: inset 0 0 0 .06em rgba(135, 89, 10, .6), 0 0 0 .05em rgba(255, 247, 214, .6); }
#ui .coin-dot.g::before { inset: 31%; background: linear-gradient(180deg, #A8740E, #D9A22E); clip-path: polygon(50% 0, 62% 34%, 98% 35%, 69% 57%, 79% 92%, 50% 71%, 21% 92%, 31% 57%, 2% 35%, 38% 34%); }

/* Goldbarren: goldener Balken (Trapez mit dunklem Rand und Lichtkante) */
#ui .coin-dot.gb { width: 1.5em; height: .86em; border-radius: 0; box-shadow: none; background: #7A4E05; clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%); vertical-align: -.08em; }
#ui .coin-dot.gb::before { inset: .075em .09em; clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, #FFF3C2 0, #F9D97C 24%, #F2C14E 56%, #C38A1C 100%); }
#ui .coin-dot.gb::after { left: 27%; right: 27%; top: 22%; height: .07em; border-radius: .05em; background: rgba(255, 255, 255, .8); }

/* „…“-Punkt im Kompaktmodus (mehr Stufen als gezeigt; genauer Wert im Tooltip/aria-label) */
#ui .coins .cmore { display: inline-block; flex: none; width: .78em; height: .5em; margin-left: -.18em; opacity: .55;
  background: radial-gradient(circle, currentColor 0 .065em, transparent .08em) 0 50% / .26em .26em repeat-x; }

#ui .coins.neg { color: var(--danger); }
#ui .cost.coin-cost { gap: 4px; }
#ui .cost.coin-cost .coins { gap: .35em; }

/* ---- HUD-Kassenchip (ui/kasse.js createKasseChip): kompakt, feste Mindestbreite, Inhalt links → keine Sprünge beim Hochzählen ----
   V7 §16 Nachbesserung: Bronze-Modus (Standard) braucht nur Platz für „◯ 999 999“ / „◯ 1,23 Mio“ (5.4em); die breitere V5-Mindestbreite (bis „999 S · 999 B“) nur mit
   anzeigeStufen (Klasse .kasse-stufen, setzt kasse.js). So bleibt Platz für den Tresor-Hinweis, ohne Level-Ring und Technikband zu quetschen. */
#ui .hud-kasse { justify-content: flex-start; }
#ui .hud-kasse .kasse-num { display: inline-flex; align-items: center; min-width: 5.4em; font-size: 13px; }
#ui .hud-kasse.kasse-stufen .kasse-num { min-width: 6.9em; }
#ui .hud-kasse .coins { font-size: 13px; gap: .4em; }
#ui .hud-kasse .coins .cseg b { min-width: 0; }
@media (max-width: 379px) { #ui .hud-kasse.kasse-stufen .kasse-num { min-width: 6.75em; } #ui .hud-kasse .coins { gap: .3em; } }

/* ---- Kassen-Ausklapp (createKassePop) ---- */
#ui .kp-big .coins { font-size: 22px; gap: .4em; flex-wrap: wrap; row-gap: 2px; white-space: normal; }
#ui .kp-big .coins .cseg { white-space: nowrap; }
#ui .kp-val .coins { font-size: 14px; }
#ui .kp-acts .btn { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; }   /* drei Knöpfe (Markt · Einnahmen-Buch · Wohnen) passen ab 360 px ohne Überstand */
#ui .kp-chips .chip .coins { font-size: 12px; }
#ui .kp-rule { display: flex; flex-direction: column; gap: 3px; margin: 8px 0 2px; padding: 7px 10px; border-radius: 12px; background: #FBF4E2; color: #5B4A2A; font-size: 12px; font-weight: 600; }
#ui .kp-rule-sep { display: none; }   /* nur für Text/Vorlesen; jede Umrechnung steht in eigener Zeile */
#ui .kp-rule-i b { font-weight: 800; }
#ui .kp-rule-i { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
#ui .kp-rule-i .coin-dot { font-size: 14px; }
#ui .kp-rule-i .eq { opacity: .6; font-weight: 600; }

/* ---- Siedler-Geldbeutel / große Anzeigen ---- */
#ui .purse-big .coins { font-size: 22px; gap: .4em; }

/* ==== V7 §16 (MUENZEN-V7): Tresor mit Handwechsel ==================================================================================================== */
/* Barren-Symbole: Trapez mit dunklem Rand, Verlauf in Metallfarbe (Bronze #B87333, Silber #C9CDD3, Gold #F2C14E) und Lichtkante. Größe zeigt die Stufe:
   Schmalbarren = schmaler flacher Balken, Mittelbarren = breiterer Balken, Barren = großer Balken (Goldbarren bleibt .coin-dot.gb). */
#ui .bar-dot { --bh: #F0B78A; --bm: #B87333; --bd: #87491B; --br: #5C3210;
  position: relative; display: inline-block; flex: none; box-sizing: border-box; width: 1.5em; height: .86em; vertical-align: -.08em;
  background: var(--br); clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%); }
#ui .bar-dot::before { content: ''; position: absolute; inset: .07em .085em; clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, var(--bh) 0, var(--bm) 55%, var(--bd) 100%); pointer-events: none; }
#ui .bar-dot::after { content: ''; position: absolute; left: 28%; right: 28%; top: 24%; height: .065em; border-radius: .05em; background: rgba(255, 255, 255, .75); pointer-events: none; }
#ui .bar-dot.schmal { width: 1.05em; height: .44em; vertical-align: .05em; }
#ui .bar-dot.schmal::after { top: 30%; height: .05em; }
#ui .bar-dot.mittel { width: 1.3em; height: .64em; vertical-align: -.02em; }
#ui .bar-dot.barren { width: 1.5em; height: .86em; }
#ui .bar-dot.m-b { --bh: #F0B78A; --bm: #B87333; --bd: #87491B; --br: #5C3210; }
#ui .bar-dot.m-s { --bh: #FFFFFF; --bm: #C9CDD3; --bd: #8C929C; --br: #646A74; }
#ui .bar-dot.m-g { --bh: #FFF3C2; --bm: #F2C14E; --bd: #C38A1C; --br: #7A4E05; }

/* Kompaktanzeige ab 1 Mio („1,23 Mio“) – Zahl etwas enger */
#ui .coins.kurz .cseg b { letter-spacing: -.02em; }

/* HUD-Chip: Tresor-Hinweis „▮ 12,5k“ neben den Münzen (kasse.js chip.setTresor). Unter 420 px nur das Barren-Symbol (Wert im Tooltip/Vorlesetext des Chips) –
   Prüfbefund: „▮ 1,32Mrd“ machte den Chip bei 360/390 px 90 px breiter, Level-Ring und Technikband wurden zusammengedrückt. Der Level-Knopf schrumpft nie. */
#ui .hud-kasse .kasse-tresor { display: inline-flex; align-items: center; margin-left: 6px; flex: none; }
#ui .hud-kasse .kasse-tresor.hidden { display: none; }
#ui .tresor-k { display: inline-flex; align-items: center; gap: .3em; padding: 1px 6px 1px 5px; border-radius: 8px; background: rgba(43, 42, 51, .08); font-size: 11px; font-weight: 800;
  font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.5; }
#ui .tresor-k .bar-dot { font-size: 12px; }
#ui .hud-row-v2 .hud-level { flex-shrink: 0; }
@media (max-width: 419px) {
  #ui .hud-kasse .kasse-tresor { margin-left: 4px; }
  #ui .hud-kasse .tresor-k { padding: 1px 3px; }
  #ui .hud-kasse .tresor-k b { display: none; }
}

/* Kassen-Ausklapp: wird mit Tresor und Wechseln-Blatt höher → scrollt in sich. Nachbesserung (Prüfbefund: Ausklapp beginnt bei ~210 px, nicht 120 px – Knopfzeile unerreichbar):
   Höhe = Bildhöhe − echte Oberkante (--kp-top, setzt kasse.js beim Öffnen/Größenwechsel; Rückfall: HUD-Höhe --hud-top-h aus ui/index.js) − Sicherheitsabstand unten − 8 px. */
#ui .kasse-pop { --kp-top-r: var(--kp-top, calc(var(--sat, 0px) + var(--hud-top-h, 112px) + 4px));
  max-height: calc(100vh - var(--kp-top-r) - var(--sab, 0px) - 8px); max-height: calc(100dvh - var(--kp-top-r) - var(--sab, 0px) - 8px);
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* Tresor-Abschnitt */
#ui .kp-tresor { margin: 2px 0 8px; padding: 8px; border-radius: 14px; background: #F3ECDD; }
#ui .kp-t-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
#ui .kp-t-head .kicker { flex: 1 1 auto; min-width: 0; }
#ui .kp-t-btn { flex: none; min-height: 44px; }   /* Trefferfläche wie die Blatt-Knöpfe (Prüfbefund: 40 px) */
#ui .tresor { display: flex; flex-direction: column; gap: 6px; }
#ui .tresor .tz-list { display: flex; flex-direction: column; gap: 4px; }
#ui .tresor .tz { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 8px; border-radius: 10px; background: #fff; border-left: 4px solid #B87333; font-size: 14px; font-weight: 600; }
#ui .tresor .tz.m-s { border-left-color: #A9AEB6; }
#ui .tresor .tz.m-g { border-left-color: #E2AE2E; }
#ui .tresor .tz-m { flex: none; width: 3.9em; font-size: 12px; font-weight: 800; color: var(--ink2); }
#ui .tresor .tz-st { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }
#ui .tresor .tz-s { display: inline-flex; align-items: center; gap: .3em; white-space: nowrap; font-variant-numeric: tabular-nums; }
#ui .tresor .tz-s .coin-dot, #ui .tresor .tz-s .bar-dot { font-size: 16px; }
#ui .tresor .tz-s b { font-weight: 800; }
#ui .tresor .tz-k { font-size: 11px; font-weight: 700; color: var(--ink3); }
#ui .tresor .tz-leer { padding: 6px 8px; border-radius: 10px; background: #fff; font-size: 13px; color: var(--ink2); }
#ui .tresor .tz-sum { display: flex; flex-wrap: wrap; gap: 2px 6px; font-size: 12px; color: var(--ink2); padding: 0 2px; }
#ui .tresor .tz-sum b { color: var(--ink); font-weight: 800; white-space: nowrap; }
#ui .tresor .tz-dot { opacity: .6; }

/* Wechseln-Blatt */
#ui .kw-blatt { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 10px; border-radius: 12px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
#ui .kw-blatt.hidden { display: none; }
#ui .kw-head { display: flex; align-items: center; gap: 8px; }
#ui .kw-title { font-size: 15px; font-weight: 800; }
#ui .kw-sub { flex: 1 1 auto; min-width: 0; }
#ui .kw-close { flex: none; }
#ui .kw-l { margin-top: 2px; font-size: 12px; font-weight: 800; color: var(--ink2); }
#ui .kw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#ui .kw-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 44px; padding: 4px 10px; border: 2px solid transparent; border-radius: 12px;
  background: var(--card); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-align: left; }
#ui .kw-chip.on { border-color: var(--primary); background: #EEEDFF; }
#ui .kw-chip.leer { opacity: .55; }
#ui .kw-chip .kw-sym { display: inline-flex; align-items: center; font-size: 16px; flex: none; }
#ui .kw-chip .kw-c-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ui .kw-chip .kw-c-x { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink2); }
#ui .kw-n-row { display: flex; align-items: center; gap: 6px; }
#ui .kw-n-row .btn { flex: none; min-width: 44px; min-height: 44px; padding: 0 10px; font-size: 18px; font-weight: 800; }
#ui .kw-n-row .kw-max { font-size: 13px; }
#ui .kw-n { flex: 1 1 auto; width: 0; min-width: 3.5em; height: 44px; box-sizing: border-box; padding: 0 8px; border: 1px solid #D8CBB0; border-radius: 10px; background: #fff;
  color: var(--ink); font: inherit; font-size: 16px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
#ui .kw-prev { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 1.6em; font-size: 14px; font-weight: 700; }
#ui .kw-prev .coin-dot, #ui .kw-prev .bar-dot { font-size: 16px; }
#ui .kw-prev .kw-pfeil { padding: 0 2px; opacity: .6; }
#ui .kw-prev.warn { color: #9E1F24; font-size: 13px; }
#ui .kw-go { min-height: 48px; }
#ui .kw-done { padding: 6px 8px; border-radius: 10px; background: #DDF3E2; color: #23743A; font-size: 13px; font-weight: 700; }
#ui .kw-done.hidden { display: none; }

/* Erklärung (coinRule): Tresor-Regel mit Symbolen, je Umrechnung eine Zeile */
#ui .kp-trule { display: flex; flex-direction: column; gap: 3px; margin: 8px 0 2px; padding: 7px 10px; border-radius: 12px; background: #FBF4E2; color: #5B4A2A; font-size: 12px; font-weight: 600; }
#ui .kp-trule .kp-tr-i { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }
#ui .kp-trule .kp-tr-i b { font-weight: 800; }
#ui .kp-trule .coin-dot, #ui .kp-trule .bar-dot { font-size: 14px; }
#ui .kp-trule .eq { opacity: .6; }
#ui .kp-trule .kp-tr-hand { font-weight: 700; }
#ui .kp-rule.hidden { display: none; }