/* Kursiv nur in Großbuchstaben (CI, Purix 2026-11-02); Info-„i“ in Barlow aufrecht.
   Münz-Boost (coin-boost.js, User 2026-11-06): stehende Akkus je Produkt (D1c), Gesamtbonus in Prozent; Adventure flach über den Coins (D1b); Shop S1.
   Farben CI (Purix 2026-11-06 12:23: Blau, Orange, Rot): klein Stufe-I-Orange, groß Stufe-II-Rot, Freundes-Boost später Basis-Blau. */
@property --f { syntax: "<number>"; inherits: true; initial-value: 0; }
.cbk-small { --k: var(--tier-stage1); } .cbk-big { --k: var(--tier-stage2); } .cbk-friend { --k: var(--tier-base); }

.cbx { display: none; align-items: center; gap: 5px; cursor: pointer; }
.cb-on > .cbx { display: inline-flex; }
.coinchip > .cbx { margin-left: 2px; padding-left: 8px; height: 60%; border-left: 1.5px solid color-mix(in srgb, var(--fx-gold) 45%, transparent); }
.cbpct { font: italic 700 15px/1 var(--font-display); text-transform: uppercase; color: var(--fx-gold); white-space: nowrap; transform: translateY(calc(-1 * var(--type-lift, 0px))); }
.cbg { display: inline-flex; align-items: center; gap: 3px; }

/* D1c: stehender Akku, füllt sich von unten */
.cbatt { position: relative; display: block; flex: none; width: 7px; height: 15px; margin-top: 2px; border-radius: 2px; box-shadow: inset 0 0 0 1.2px color-mix(in srgb, var(--k) 85%, transparent); }
.cbfill { position: absolute; left: 1.8px; right: 1.8px; bottom: 1.8px; height: calc((100% - 3.6px) * var(--f)); border-radius: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--k) 70%, white), var(--k)); box-shadow: 0 0 5px color-mix(in srgb, var(--k) 60%, transparent); transition: height .35s ease-in-out; }
.cbnub { position: absolute; left: 2px; top: -2px; width: 3px; height: 1.5px; border-radius: 1px 1px 0 0; background: color-mix(in srgb, var(--k) 85%, transparent); }
.cbg-big { gap: 8px; } .cbg-big .cbatt { width: 34px; height: 64px; border-radius: 7px; margin-top: 6px; box-shadow: inset 0 0 0 3px var(--k), 0 6px 14px rgba(0,0,0,.4); }
.cbg-big .cbfill { left: 5px; right: 5px; bottom: 5px; height: calc((100% - 10px) * var(--f)); border-radius: 3px; }
.cbg-big .cbnub { left: 11px; top: -6px; width: 12px; height: 5px; border-radius: 2px 2px 0 0; }

/* Leuchtrahmen (H3, zusätzlich zu den Akkus): Rand der Münzanzeige in Abschnitten je Akku */
.cbframe { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
.cbframe rect { fill: none; stroke-width: 2.5; }
.cbframe .trk { stroke: color-mix(in srgb, var(--fx-gold) 14%, transparent); }
.cbframe .val { stroke: var(--k); stroke-linecap: round; filter: drop-shadow(0 0 3px var(--k)); transition: stroke-dasharray .35s ease-in-out; }
.cboffer .cbart { position: relative; padding: 18px 0; } .cbartframe { position: absolute; inset: 4px; border-radius: 16px; pointer-events: none; } .cbartframe .cbframe rect { stroke-width: 3; }

/* Adventure: Münzleiste; flache Akkus übereinander (D1b) */
.advriver .advcoins > .cbx-hud { gap: 2px; }
.cbx-hud .cbg { flex-direction: column; gap: 1.5px; }
.cbx-hud .cbatt { width: 18px; height: 5.5px; margin: 0 3px 0 0; border-radius: 1.5px; }
.cbx-hud .cbfill { left: 1.3px; top: 1.3px; bottom: 1.3px; right: auto; height: auto; width: calc((100% - 2.6px) * var(--f)); transition: width .35s ease-in-out; }
.cbx-hud .cbnub { left: auto; right: -2.5px; top: 1.5px; width: 1.5px; height: 2.5px; border-radius: 0 1px 1px 0; }
.cbx-hud .cbpct { font-size: 13px; }
.advriver .advcoins > .cbx-hud { padding-right: 8px; margin-right: 2px; border-right: 1.5px solid color-mix(in srgb, var(--fx-gold) 45%, transparent); }
@media not ((min-width: 1100px) and (min-height: 600px)) {
  .advriver .advcoins > .cbx-hud { flex-direction: column; padding: 0 0 3px; margin: 0 0 2px; border-right: 0; border-bottom: 1.5px solid color-mix(in srgb, var(--fx-gold) 45%, transparent); }
  .cbx-hud .cbpct { font-size: 12.5px; }
  /* die Leiste wächst nur nach oben: Münze und Zahl bleiben, wo sie ohne Boost stehen (darunter ist am kleinen Handy kein Platz) */
  .advriver .advcoins.cb-on { transform: translateY(calc(-100% + 24px)); }
}

/* Shop S1: Akku, darunter der Bonus */
.cboffer { position: relative; grid-template-columns: 112px minmax(0, 1fr) !important; }
.cboffer .cbart { width: 112px; grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; gap: 6px; }
.cboffer .shoptxt { grid-column: 2; grid-row: 1 / span 2; padding-right: 30px; }
.cbbig { font: italic 700 24px/1 var(--font-display); text-transform: uppercase; color: var(--k); text-shadow: 0 2px 8px rgba(0,0,0,.6); white-space: nowrap; transform: translateY(calc(-1 * var(--type-lift, 0px))); }
.cboffer .cbline { font: 600 14px/1.3 var(--font-body); color: var(--surface-ink); }
.cboffer .cbsub { font: 500 12px/1.3 var(--font-body); color: var(--surface-muted); }
.cboffer .beyebrow { color: var(--k); }
.cboffer { background: linear-gradient(140deg, color-mix(in srgb, var(--k) 22%, var(--surface-panel)) 0%, var(--surface-panel) 100%); }
.cbbuyrow { display: flex; margin-top: 8px; } .cbbuyrow .shopbuy { min-width: 120px; }
.cbinfo { position: absolute; top: 12px; right: 12px; appearance: none; border: 0; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font: 600 15px/1 var(--font-body); color: var(--fx-gold); background: color-mix(in srgb, var(--fx-gold) 16%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fx-gold) 60%, transparent); }
.cbinfo:focus-visible, .cbx:focus-visible { outline: 2px solid var(--brand-sky); outline-offset: 2px; }

/* Übersicht und Info */
.cbsheet .cbhead { flex-wrap: wrap; row-gap: 2px; } .cbsheet .cbhead .display { white-space: nowrap; }
.cbsheet .cbsec { display: flex; flex-direction: column; gap: 4px; } .cbsheet .cbsec p { margin: 0; font: 400 14px/1.45 var(--font-body); color: var(--surface-ink); }
.cbsheet .eyebrow { color: var(--fx-gold); }
.cbsrc { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--k) 12%, transparent); box-shadow: inset 3px 0 0 var(--k); }
.cbsic { display: grid; place-items: center; } .cbsic .cbatt { width: 10px; height: 20px; }
.cbsn { font: italic 700 17px/1.1 var(--font-display); text-transform: uppercase; color: var(--surface-ink); }
.cbsd { font: 500 12px/1.3 var(--font-body); color: var(--surface-muted); }
.cbsl { font: italic 700 18px/1 var(--font-display); text-transform: uppercase; color: var(--k); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cbstair { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.cbbars { display: flex; align-items: flex-end; gap: 3px; height: 112px; }
.cbstep { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.cbbar { display: flex; flex-direction: column; gap: 1.5px; width: 100%; height: calc(var(--hh) * 76px); border-radius: 6px 6px 2px 2px; overflow: hidden; }
.cbseg { display: block; flex-basis: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--k) 85%, white), var(--k)); }
.cbseg.one { background: color-mix(in srgb, var(--surface-muted) 40%, transparent); }
.cbstep b { font: italic 700 16px/1 var(--font-display); text-transform: uppercase; color: var(--k, var(--surface-muted)); white-space: nowrap; }
.cbstep small { font: 500 11px/1.1 var(--font-body); color: var(--surface-muted); white-space: nowrap; }
.cbnote { margin: 0; font: 400 12px/1.4 var(--font-body); color: var(--surface-muted); }
.cbbtns { display: flex; gap: 8px; justify-content: flex-end; }
@media (prefers-reduced-motion: reduce) { .cbfill, .cbframe .val { transition: none; } }

/* Ergebnis (adventure.js coinBlock, Purix 2026-11-08): Summe vor Boost, eine Zeile je Akku, Akku-Symbol beim Betrag; Beschriftung bleibt in der Spalte der Nachbarzeilen */
.advres .advcoins .coinrow.coinsub { margin-top: 2px; padding-top: 6px; border-top: 1.5px solid color-mix(in srgb, var(--brand-indigoDeep) 35%, transparent); }
.advres .advcoins .coinrow.coinsub b { font-style: normal; font-family: var(--font-body); font-size: 15px; }
.advres .advcoins .coinrow.cbafter { margin-top: 6px; }
/* D Boost-Leiste (Purix 2026-11-09): dunkle Leiste über die volle Breite der Goldplatte, Oberkante und Schein in Akkufarbe, flache Akkus wie im Adventure-Fluss, Betrag größer in Gold */
.advres .advcoins:has(.cbpart) { overflow: hidden; }
.advres .advcoins .coinrow.cbpart { position: relative; align-items: center; margin: 4px -14px; padding: 8px 14px; background: color-mix(in srgb, var(--brand-indigoDeep) 92%, transparent); box-shadow: inset 0 1.5px 0 var(--k), inset 0 12px 16px -12px color-mix(in srgb, var(--k) 70%, transparent); }
.advres .advcoins .coinrow.cbpart + .coinrow.cbpart { margin-top: -7px; box-shadow: none; }
.advres .advcoins .coinrow.cbpart > span:first-child { color: #fff; }
.advres .advcoins .coinrow.cbpart .cbrr > b { font-size: 22px; color: var(--fx-gold); text-shadow: 0 0 12px color-mix(in srgb, var(--fx-gold) 55%, transparent); }
.advres .advcoins .coinrow.cbpart.rvin .cbrr > b { animation: cbFlare .4s ease-in-out 1; }
@keyframes cbFlare { 0%, 100% { filter: brightness(1); } 45% { filter: brightness(1.35); } }
@media (prefers-reduced-motion: reduce) { .advres .advcoins .coinrow.cbpart .cbrr > b { animation: none; } }
.cbpart .cbrr { display: inline-flex; align-items: center; gap: 7px; flex: none; }
.cbg-bar { flex-direction: column; gap: 2px; } .cbg-bar .cbatt { width: 22px; height: 7px; margin: 0; border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--k); }
.cbg-bar .cbfill { left: 1.5px; top: 1.5px; bottom: 1.5px; right: auto; height: auto; width: calc((100% - 3px) * var(--f)); transition: width .35s ease-in-out; }
.cbg-bar .cbnub { left: auto; right: -2.5px; top: 2px; width: 2px; height: 3px; border-radius: 0 1px 1px 0; background: var(--k); }