/* SnoopyWap – ljubavni kalkulator */
.ljb { max-width: 520px; margin: 0 auto; text-align: center; }
.ljb-obrazac { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.ljb-polje { min-width: 0; width: 100%; min-height: 50px; padding: 0 12px; border-radius: 14px; border: 2px solid var(--ivica); background: var(--polje); color: var(--tekst); font-size: 17px; text-align: center; }
.ljb-polje:focus { outline: none; border-color: var(--akcent2); }
.ljb-plus { font-size: 26px; font-weight: 800; color: var(--akcent2-t); }
.ljb-racunaj { grid-column: 1 / -1; justify-self: center; margin-top: 6px; }
.ljb-ishod { margin-top: 18px; }
.ljb-srce { position: relative; width: 170px; margin: 0 auto; }
.ljb-srce svg { display: block; width: 100%; height: auto; }
.ljb-srce-pozadina { fill: var(--kartica2); stroke: var(--akcent2); stroke-width: 3; }
.ljb-srce-punjenje { fill: var(--akcent2); transition: none; }
.ljb-broj { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 10px; font-size: 38px; font-weight: 800; color: var(--tekst); text-shadow: 0 0 6px var(--kartica), 0 0 6px var(--kartica), 0 0 2px var(--kartica); }
.ljb-jako .ljb-srce { animation: ljb-otkucaj 1.1s ease-in-out 1.1s 3; }
@keyframes ljb-otkucaj { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.08); } 60% { transform: scale(.98); } }
.ljb-par { margin: 10px 0 2px; font-size: 20px; font-weight: 800; overflow-wrap: anywhere; min-height: 1.4em; }
.ljb-tekst { margin: 0 auto; max-width: 380px; color: var(--slabo); font-size: 16px; line-height: 1.5; min-height: 3em; }
.ljb-dugmad { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.ljb-dugmad[hidden] { display: none; }
.ljb-napomena { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--ivica); color: var(--slabo); font-size: 13px; }
@media (max-width: 420px) {
  .ljb-polje { font-size: 16px; padding: 0 8px; }
  .ljb-srce { width: 150px; }
  .ljb-broj { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) { .ljb-jako .ljb-srce { animation: none; } }