/* Personal Finance Fundamentals. All rules scoped under .pfn-* */

/* the car */
.pfn-car { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; }
.pfn-car { padding-bottom: 14px; }
.pfn-car img { width: min(78%, 300px); max-height: 28vh; object-fit: contain; height: auto; animation: pfnRoll .8s cubic-bezier(.3,1.2,.5,1) backwards; }
.pfn-ticket { display: flex; flex-direction: column; align-items: center; padding: 10px 22px 12px; border-radius: 14px; background: #FFF8E8; color: #1d1405; box-shadow: 0 6px 14px rgba(0,0,0,.35); transform: rotate(-4deg); animation: pfnSlam .45s cubic-bezier(.3,1.6,.5,1) .85s backwards; }
.pfn-ticket small { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #6b5a3a; }
.pfn-ticket b { font: 700 40px var(--mono); line-height: 1.05; }
.pfn-ticket span { font-size: 13px; font-weight: 700; color: #6b5a3a; }
@keyframes pfnRoll { from { transform: translateX(-70px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pfnSlam { from { transform: translateY(-80px) rotate(-14deg) scale(1.4); opacity: 0; } to { transform: rotate(-4deg); opacity: 1; } }

/* the year */
.pfn-yr { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 16px; }
.pfn-top { display: flex; justify-content: center; gap: 14px; width: 100%; }
.pfn-hold { display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 118px; min-height: 44px; padding: 6px 10px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); color: var(--text); font: inherit; }
.pfn-hold .pfn-pic { position: relative; height: 54px; display: flex; align-items: flex-end; justify-content: center; }
.pfn-hold img { height: 54px; width: auto; position: relative; }
.pfn-hold span { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.pfn-hold b { font: 700 22px var(--mono); color: var(--text); }
.pfn-jar { border-color: rgba(252,192,80,.6); }
.pfn-jar b { color: var(--gold); }
.pfn-cc.pfn-s-owe { border-color: var(--violet-bright); background: rgba(123,92,253,.16); }
.pfn-cc.pfn-s-owe b { color: var(--violet-bright); }
.pfn-fill { position: absolute; left: 22%; right: 22%; bottom: 8%; height: 0; border-radius: 3px 3px 8px 8px; background: linear-gradient(var(--gold), var(--gold-deep)); transition: height .4s ease; }
.pfn-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 360px; }
.pfn-m { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 58px; padding: 4px 2px; border-radius: 12px; background: rgba(123,92,253,.22); border: 2px solid rgba(169,155,255,.35); color: var(--text); font: inherit; }
.pfn-m b { font-size: 15px; font-weight: 800; }
.pfn-face { display: flex; flex-direction: column; align-items: center; }
.pfn-m em { font-style: normal; font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.pfn-m.pfn-s-next { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(252,192,80,.25); }
.pfn-m.pfn-s-flip { background: var(--surface); border-color: var(--line); animation: pfnFlip .3s ease backwards; }
.pfn-m.pfn-s-flip b { font-size: 12px; color: var(--dim); }
.pfn-m.pfn-s-hit { background: #FFF8E8; border-color: #FFF8E8; color: #1d1405; }
.pfn-m.pfn-s-hit b { color: #6b5a3a; }
.pfn-m .pfn-amt { font: 700 14px var(--mono); }
.pfn-zero { color: var(--dim); }
.pfn-plus { color: var(--gold); font-family: var(--mono) !important; }
@keyframes pfnFlip { from { transform: rotateY(90deg); } to { transform: none; } }
.pfn-chip { position: absolute; z-index: 5; transform: translate(-50%,-50%); padding: 4px 10px; border-radius: 999px; font: 700 13px var(--sans); white-space: nowrap; pointer-events: none; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.pfn-chip.pfn-coin { background: var(--gold); color: #1d1405; }
.pfn-chip.pfn-bill { background: #FFF8E8; color: #1d1405; }
.pfn-note { font-size: 12px; color: var(--faint); text-align: center; }

/* the plan */
.pfn-plan { display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; }
.pfn-plan .pfn-pic { position: relative; height: 130px; display: flex; align-items: flex-end; }
.pfn-plan img { height: 130px; width: auto; position: relative; }
.pfn-sum { display: flex; flex-direction: column; gap: 2px; }
.pfn-sum span { font-size: 13px; font-weight: 700; color: var(--dim); }
.pfn-sum b { font: 700 26px var(--mono); color: var(--gold); margin-bottom: 6px; }
.pfn-sum b.pfn-out { color: var(--text); }

/* the paycheck */
.pfn-stub { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 320px; }
.pfn-paycheck { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 10px; border-radius: 14px; background: #FFF8E8; color: #1d1405; }
.pfn-paycheck small, .pfn-split small { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.pfn-paycheck b { font: 700 28px var(--mono); }
.pfn-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; width: 100%; }
.pfn-split > div { display: flex; flex-direction: column; align-items: center; padding: 8px; border-radius: 12px; background: var(--surface); border: 2px solid var(--line); }
.pfn-split b { font: 700 22px var(--mono); }
.pfn-split .pfn-first { border-color: var(--gold); animation: pfnDrop .6s cubic-bezier(.3,1.5,.5,1) .4s backwards; }
.pfn-split .pfn-first b { color: var(--gold); }
@keyframes pfnDrop { from { transform: translateY(-30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* what first */
.pfn-cash { display: flex; flex-direction: column; align-items: center; padding: 14px 28px; border-radius: 16px; background: rgba(252,192,80,.12); border: 2px solid var(--gold); }
.pfn-cash b { font: 700 34px var(--mono); color: var(--gold); }
.pfn-cash small { font-size: 13px; font-weight: 700; color: var(--dim); }
.pfn-line { width: 110px; height: 80px; margin: 6px auto 0; display: block; }
.pfn-line polyline { fill: none; stroke: var(--mint); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.pfn-m.pfn-s-hit .pfn-plus { color: #8a5a00; }