/* 🪙 Peněženka (penizky.js): 👛 + 🐷 vedle sebe, 🎯 cíl spoření s ukazatelem, výpis */
.wallet-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.wallet-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 16px 12px; border-radius: 18px; border: 3px solid var(--border); background: var(--card); }
.wallet-piggy { border-color: #f4a6c6; background: linear-gradient(160deg, color-mix(in srgb, #ffc6dd 35%, var(--card)), var(--card)); }
.wallet-tile-icon { font-size: 2.6rem; line-height: 1.1; }
.wallet-tile-label { font: 700 .9rem var(--font-head); color: var(--muted); }
.wallet-tile-value { font: 800 1.8rem var(--font-head); }
.wallet-tile-note { margin-top: 4px; font-size: .85rem; color: var(--muted); }
.wallet-buttons { margin: 14px 0 6px; }
.wallet-goal { margin: 16px 0 8px; padding: 14px 16px; border-radius: 18px; border: 3px dashed var(--border); }
.wallet-goal p { margin: 6px 0; }
.wallet-goal-name { font: 800 1.15rem var(--font-head); }
.wallet-bar { height: 16px; margin-top: 8px; border-radius: 999px; background: var(--primary-soft); overflow: hidden; }
.wallet-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f6c445, #f29f05); transition: width .4s ease; }
.wallet-goal-sum { margin-top: 4px; font-weight: 700; font-size: .9rem; }
.wallet-goal-buttons { margin-top: 6px; }
/* 🧮 kalkulačka spoření (v cíli) */
.wallet-calc { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--primary-soft); }
.wallet-calc-title { font: 800 1rem var(--font-head); margin-bottom: 6px; }
.wallet-calc-target { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 700; }
.wallet-calc-input { width: 6em; padding: 6px 10px; border-radius: 10px; border: 2px solid var(--border); font: inherit; background: var(--card); color: var(--text); }
.wallet-calc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wallet-calc-chips .muted { margin-right: 4px; font-size: .9rem; }
.wallet-chip { min-width: 38px; padding: 5px 10px; border-radius: 999px; border: 2px solid var(--primary); background: var(--card); color: var(--primary-dark); font: 800 .95rem var(--font-head); cursor: pointer; }
.wallet-chip.on { background: var(--primary); color: #fff; }
.wallet-calc-result { margin: 10px 0 0; font-weight: 700; }
.wallet-calc-tip { margin: 6px 0 0; font-size: .92rem; }
.wallet-today { margin: 10px 0; }
.wallet-how { margin: 8px 0; }
.wallet-how summary { cursor: pointer; font-weight: 700; }
.wallet-how ul { margin: 8px 0; padding-left: 1.2em; }
.wallet-how li { margin: 3px 0; }
.wallet-soon { margin: 12px 0; }
.wallet-log-title { margin: 18px 0 8px; font-size: 1.15rem; }
.wallet-log { list-style: none; margin: 0; padding: 0; }
.wallet-log li { display: grid; grid-template-columns: 4.5em 1fr auto; gap: 8px; align-items: baseline; padding: 6px 2px; border-bottom: 1px solid var(--border); }
.wallet-log-day { font-size: .82rem; color: var(--muted); }
.wallet-log-n { white-space: nowrap; color: #2e9b55; }
.wallet-move .wallet-log-n { color: #c2558a; }
.wallet-spent .wallet-log-n { color: #b8860b; }

/* 🎓 průvodce šetřením: Maty / Terezka vlevo, bublina s textem, obrázkem kroku a šipkami */
.wallet-guide { position: relative; display: flex; align-items: flex-end; gap: 10px; margin-bottom: 16px; animation: pop .35s ease; }
.wallet-guide-face { width: clamp(84px, 18vw, 130px); height: auto; flex: none; }
.wallet-guide-bubble { position: relative; flex: 1; padding: 14px 16px 10px; border: 3px solid var(--text); border-radius: 22px; background: var(--card); }
.wallet-guide-bubble::before { content: ''; position: absolute; left: -12px; bottom: 26px; width: 18px; height: 18px; background: var(--card); border-left: 3px solid var(--text); border-bottom: 3px solid var(--text); transform: rotate(45deg); }
.wallet-guide-text { margin: 0 24px 8px 0; font-size: 1.08rem; line-height: 1.45; }
.wallet-guide-show { margin: 4px 0 10px; text-align: center; font: 800 1.6rem var(--font-head); letter-spacing: .04em; animation: pop .45s ease; }
.wallet-guide-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.wallet-guide-dots { margin-right: auto; font-size: .7rem; letter-spacing: .1em; color: var(--muted); }
.wallet-guide-close { position: absolute; top: 4px; right: 6px; border: 0; background: none; font-size: 1.1rem; color: var(--muted); cursor: pointer; padding: 4px 8px; }
.wallet-guide-open { margin-bottom: 12px; }
.wallet-spot { box-shadow: 0 0 0 4px #f6c445, 0 0 22px rgba(246, 196, 69, .7); animation: wallet-spot 1.4s ease-in-out infinite; }
@keyframes wallet-spot { 50% { box-shadow: 0 0 0 6px #f6c445, 0 0 30px rgba(246, 196, 69, .9); } }
@media (max-width: 520px) {
  .wallet-guide { flex-direction: column; align-items: center; }
  .wallet-guide-bubble::before { left: 50%; top: -12px; bottom: auto; transform: translateX(-50%) rotate(135deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wallet-guide, .wallet-guide-show, .wallet-spot { animation: none; }
}

/* 🪙 v liště otevírá peněženku – na dotykovém displeji štítek po ťuknutí nezůstává viset */
@media (hover: none) {
  .brand-stat[data-stat="coins"]:hover .brand-tip { opacity: 0; }
}

/* ✨ „+4 🪙“ nad penízky v liště nahoře po dohraném kole */
.coin-gain { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); white-space: nowrap; font: 800 .9rem var(--font-head); color: #c48f00; pointer-events: none; animation: coin-fly 1.8s ease-out forwards; }
/* 🪙 u „Začít“: kolik penízků kolo může dát */
.coin-preview { display: inline-flex; align-items: center; align-self: center; padding: 4px 12px; border-radius: 999px; background: #fff4cf; color: #8a6400; font: 800 .9rem var(--font-head); white-space: nowrap; cursor: help; }
.coin-preview.coin-preview-off { background: var(--primary-soft); color: var(--muted); }
/* 🪙 penízky za kolo pod výsledkem (penizky.js showRoundCoins) */
.round-coins { display: table; margin: 4px 0 12px; padding: 6px 14px; border-radius: 999px; background: #fff4cf; color: #8a6400; font: 800 1rem var(--font-head); }
.round-coins.round-coins-off { background: var(--primary-soft); color: var(--muted); }
html.dark .coin-preview:not(.coin-preview-off) { background: #4a3a10; color: #ffd76a; }

/* 🔁 stejný test podruhé dnes: štítek pod penízky (nad lištou by přelezl název) */
.coin-gain.coin-repeat {
  top: calc(100% + 6px); bottom: auto; left: 0; transform: none; z-index: 40;
  padding: 5px 12px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark);
  box-shadow: 0 6px 16px rgba(40, 50, 110, .18); font-size: .85rem; animation: coin-note 3.2s ease forwards;
}
@keyframes coin-note { 0% { opacity: 0; } 8%, 85% { opacity: 1; } 100% { opacity: 0; } }
.brand-stat.coin-bump { animation: coin-bump .5s ease; }
@keyframes coin-fly { 0% { opacity: 0; transform: translate(-50%, 6px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -22px); } }
@keyframes coin-bump { 50% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) {
  .coin-gain, .brand-stat.coin-bump { animation: none; }
}