html, body { height: 100%; }
body { margin: 0; font-family: 'Baloo 2', system-ui, sans-serif; }
* { box-sizing: border-box; -webkit-user-select: none; user-select: none; }

#app { min-height: 100vh; background: linear-gradient(160deg,#fff3e0,#ffe3ee 60%,#e3f3ff); color: #3b2a52; }

@keyframes pp-pop { 0% { transform: scale(0.6) rotate(-6deg); } 55% { transform: scale(1.18) rotate(3deg); } 100% { transform: scale(1) rotate(0deg); } }
@keyframes pp-in { 0% { opacity: 0; transform: translateY(14px) scale(0.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes pp-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pp-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes pp-burst { 0% { opacity: 1; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: translate(var(--bx), var(--by)) scale(0.3); } }
@keyframes pp-fall { 0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(110vh) rotate(360deg); opacity: 0.9; } }
@keyframes pp-streak-in { 0% { opacity: 0; transform: translateY(-24px) scale(0.7); } 18% { opacity: 1; transform: translateY(0) scale(1.08); } 26% { transform: scale(1); } 82% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px) scale(1.02); } }
@keyframes pp-flash { 0%, 100% { opacity: 0; } 15%, 35% { opacity: 0.35; } }
@keyframes pp-shatter { 0% { opacity: 0; transform: scale(1.3) skewX(-6deg); } 12% { opacity: 1; transform: scale(1) skewX(0deg); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(0.9); } }
@keyframes pp-flame-glow { 0%, 100% { filter: drop-shadow(0 0 6px var(--flamec1)) drop-shadow(0 0 14px var(--flamec2)); } 50% { filter: drop-shadow(0 0 12px var(--flamec1)) drop-shadow(0 0 22px var(--flamec2)); } }
@keyframes pp-ember { 0% { opacity: 0.9; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-38px) scale(0.3); } }
@keyframes pp-explode { 0% { opacity: 0; transform: scale(0.2) rotate(-8deg); } 35% { opacity: 1; transform: scale(1.5) rotate(4deg); } 55% { transform: scale(0.92) rotate(-2deg); } 70% { transform: scale(1.12) rotate(1deg); } 85% { transform: scale(1); } 100% { opacity: 1; transform: scale(1); } }
@keyframes pp-shockwave { 0% { opacity: 0.9; transform: scale(0.2); border-width: 10px; } 100% { opacity: 0; transform: scale(3.2); border-width: 1px; } }

.pp-btn { cursor: pointer; border: none; font-family: 'Baloo 2', system-ui, sans-serif; }
.pp-btn:active { transform: translate(3px,3px) !important; box-shadow: none !important; }
.pp-chip:active, .pp-swatch:active { transform: scale(0.94); }