/* piggy.css — КОПИЛКА (5.1, piggy.js): окно «Пока тебя не было», улучшение, кнопка 🐷 и плашка на главной */

/* окно живёт в DOM всегда: закрытое — невидимое и некликабельное (visibility выключается после затухания) */
.pb-overlay{ position: fixed; inset: 0; z-index: var(--z-modal-overlay, 20000); background: var(--modal-overlay-bg, rgba(0,0,0,.7));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; }
.pb-overlay.is-open{ opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .2s ease; }
.pb-modal{ position: fixed; left: 50%; top: 50%; z-index: var(--z-modal, 20001); width: min(340px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px); overflow-y: auto; transform: translate(-50%, -46%);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
.pb-modal.is-open{ opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%); transition: opacity .2s ease, transform .2s ease; }

.pb-card{ position: relative; border-radius: 28px; background: var(--bg-card, #23243a); border: 2px solid rgba(255,211,90,.55);
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 36px rgba(255,200,60,.25); overflow: hidden; color: #fff; }
.pb-x{ position: absolute; right: 12px; top: 12px; z-index: 2; width: 34px; height: 34px; border: none; border-radius: 50%;
  background: rgba(0,0,0,.35); color: #fff; font-size: 14px; cursor: pointer; }
.pb-top{ padding: 22px 16px 16px; text-align: center; background: radial-gradient(120% 90% at 50% 0%, #4a3c1c 0%, #2a2438 70%); }
.pb-top h3{ margin: 0; font-size: 18px; font-weight: 900; color: #ffe9a8; }
.pb-sub{ margin-top: 2px; font-size: 13px; font-weight: 700; color: #cfc6ad; }
.pb-pig{ position: relative; width: 120px; height: 104px; margin: 8px auto 2px; }
.pb-pig .pig{ display: inline-block; font-size: 80px; line-height: 104px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); animation: pbBob 2.4s ease-in-out infinite; }
.pb-pig .coin{ position: absolute; top: 0; font-size: 22px; opacity: 0; animation: pbCoin 2.2s ease-in infinite; }
.pb-pig .coin:nth-child(2){ left: 10px; animation-delay: .3s; } .pb-pig .coin:nth-child(3){ right: 6px; animation-delay: 1s; } .pb-pig .coin:nth-child(4){ left: 48px; animation-delay: 1.6s; }
@keyframes pbBob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-5px); } }
@keyframes pbCoin{ 0%{ opacity: 0; transform: translateY(-10px); } 20%{ opacity: 1; } 100%{ opacity: 0; transform: translateY(60px); } }
.pb-sum{ font-size: 32px; font-weight: 900; color: #ffd35a; text-shadow: 0 2px 10px rgba(255,190,40,.45); }

.pb-body{ padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.pb-fill{ padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.06); display: flex; flex-direction: column; gap: 7px; }
.pb-fill-h{ display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 800; color: #dfe2f3; }
.pb-fill-h b{ color: #fff; font-variant-numeric: tabular-nums; }
.pb-bar{ height: 10px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.pb-bar i{ display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f5b400, #ffd35a); }
.pb-fill.is-full .pb-bar i{ background: linear-gradient(90deg, #f97316, #ef4444); }
.pb-warn{ font-size: 12.5px; font-weight: 700; color: #fca5a5; line-height: 1.35; }
.pb-who{ display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: #b0b0c3; }
.pb-who img{ width: 30px; height: 30px; object-fit: contain; margin-left: -6px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.pb-who img:first-of-type{ margin-left: 0; }
.pb-btn{ height: 52px; border: none; border-radius: 16px; background: #22a95a; color: #fff; font: inherit; font-size: 17px; font-weight: 900; cursor: pointer; }
.pb-btn:disabled{ background: rgba(255,255,255,.08); color: var(--text-secondary, #b0b0c3); cursor: default; }
.pb-btn2{ height: 42px; border: 1px solid rgba(255,211,90,.4); border-radius: 14px; background: rgba(255,211,90,.1); color: #ffe39a; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }

.pb-up{ display: flex; flex-direction: column; gap: 10px; }
.pb-lvl{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.06); text-align: center; }
.pb-lvl small{ display: block; font-size: 11.5px; color: #b0b0c3; font-weight: 700; }
.pb-lvl b{ font-size: 20px; }
.pb-lvl .arrow{ font-size: 20px; color: #ffd35a; }
.pb-lvl .new b{ color: #7dffb0; }
.pb-list{ font-size: 12.5px; color: #cfd3ea; line-height: 1.6; padding: 0 4px; }
.pb-list span{ display: flex; justify-content: space-between; }
.pb-list em{ font-style: normal; }
.pb-list span.on{ color: #ffd35a; font-weight: 800; }

/* кнопка 🐷 в карточке профиля: мигает точкой, когда в копилке есть деньги */
.home-ico--piggy{ position: relative; }
.home-ico--piggy.has-money::after{ content: ""; position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%;
  background: #ffd35a; box-shadow: 0 0 0 2px rgba(0,0,0,.35); animation: pbDot 1.6s ease-in-out infinite; }
@keyframes pbDot{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.3); } }

/* плашка на главной, когда в копилке есть деньги */
.pb-chip{ display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; padding: 9px 10px 9px 12px; border-radius: 14px; cursor: pointer;
  background: linear-gradient(90deg, rgba(255,211,90,.18), rgba(255,255,255,.06)); border: 1px solid rgba(255,211,90,.35); color: #fff; font: inherit; text-align: left; }
.pb-chip[hidden]{ display: none; }
.pb-chip .p{ font-size: 26px; }
.pb-chip .t{ flex: 1; min-width: 0; font-size: 12px; font-weight: 700; color: #cfc6ad; }
.pb-chip .t b{ display: block; font-size: 16px; color: #ffd35a; font-weight: 900; }
.pb-chip .mini{ display: block; height: 5px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: 4px; }
.pb-chip .mini i{ display: block; height: 100%; background: linear-gradient(90deg, #f5b400, #ffd35a); }
.pb-chip .go{ padding: 9px 14px; border-radius: 11px; background: #22a95a; color: #fff; font-weight: 900; font-size: 14px; }

@media (prefers-reduced-motion: reduce){ .pb-pig .pig, .pb-pig .coin, .home-ico--piggy.has-money::after{ animation: none; } .pb-pig .coin{ display: none; } }
.home-ico[hidden]{ display: none; }