/* ⌖ solidruck · soli-topf als glas – passt sich jeder ansicht an */

.potjar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }
.potjar__svg { flex: none; width: 7.5rem; height: auto; overflow: visible; }
.potjar--small .potjar__svg { width: 3.4rem; }

/* :: glas :: */
.potjar__glass { fill: color-mix(in srgb, var(--sheet) 55%, transparent); stroke: var(--ink); stroke-width: 3; }
.potjar__shine { stroke: color-mix(in srgb, var(--sheet) 80%, #fff); stroke-width: 4; stroke-linecap: round; opacity: .7; }
.potjar__lid { fill: var(--ink); }
.potjar__thread { stroke: var(--sheet); stroke-width: 1.4; opacity: .45; }
.potjar__tag rect { fill: var(--sheet); stroke: var(--ink); stroke-width: 2; }
.potjar__tag text { font: 700 11px var(--f-mono, monospace); letter-spacing: .14em; fill: var(--ink); }

/* :: münzen :: */
.potjar__heap { opacity: .95; }
.potjar__coinfill { fill: var(--yellow); stroke: color-mix(in srgb, var(--ink) 55%, var(--yellow)); stroke-width: 1; }
.potjar__surface { fill: color-mix(in srgb, var(--yellow) 70%, #fff); }
.potjar__level { transition: transform .55s cubic-bezier(.3, 1.3, .5, 1); }
.potjar__coin { fill: var(--yellow); stroke: var(--ink); stroke-width: 2; }
.potjar.is-clink .potjar__svg { animation: potjar-clink .35s ease-out; }
@keyframes potjar-clink { 30% { rotate: -2.5deg; } 65% { rotate: 1.5deg; } }

/* :: knöpfe & betrag :: */
.potjar__ui { display: grid; gap: .6rem; min-width: min(100%, 15rem); flex: 1; }
.potjar__out { font: 800 1.9rem/1 var(--f-display, sans-serif); font-stretch: 75%; }
.potjar__btns { display: flex; flex-wrap: wrap; gap: .4rem; }
.potjar__btn {
  min-width: 44px; min-height: 44px; padding: .45rem .8rem; border: 2px solid var(--ink); background: var(--yellow); color: #17151a;
  font: 700 .9rem var(--f-mono, monospace); box-shadow: 3px 3px 0 var(--ink); cursor: pointer; transition: translate .12s, box-shadow .12s;
}
.potjar__btn:hover { translate: -1px -1px; box-shadow: 4px 4px 0 var(--ink); }
.potjar__btn:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--ink); }
.potjar__btn--less { background: var(--sheet); color: var(--ink); }
.potjar__own { display: grid; gap: .25rem; font: 400 .8rem var(--f-mono, monospace); }
.potjar__own input { max-width: 9rem; min-height: 44px; padding: .4rem .6rem; border: 2px solid var(--ink); background: var(--sheet); color: var(--ink); font: 700 1rem var(--f-mono, monospace); }

@media (prefers-reduced-motion: reduce) {
  .potjar__level, .potjar__btn { transition: none; }
  .potjar.is-clink .potjar__svg { animation: none; }
}
@media (forced-colors: active) {
  .potjar__btn { border-color: ButtonText; }
  .potjar__glass, .potjar__tag rect { stroke: CanvasText; }
}