@import"https://fonts.googleapis.com/css2?family=Bangers&family=Nunito:wght@400;600;700;800;900&display=swap";:root{--cream: #FDF6EC;--ink: #1A1A2E;--ink-light: #2D2D4E;--border: 3px solid var(--ink);--shadow: 4px 4px 0px var(--ink);--shadow-lg: 6px 6px 0px var(--ink);--shadow-hover: 2px 2px 0px var(--ink);--radius: 12px;--radius-lg: 20px;--cc: #E94E8A;--cc-light: #FFF0F6;--cc-dark: #B5205E;--dd: #00C8D7;--dd-light: #E8FAFB;--dd-dark: #007A85;--rr: #4CAF50;--rr-light: #F0FBF0;--rr-dark: #2E7D32;--mm: #FF9800;--mm-light: #FFF8E1;--mm-dark: #E65100;--font-comic: "Bangers", "Impact", cursive;--font-body: "Nunito", "Arial Rounded MT Bold", sans-serif}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:var(--font-body);background-color:var(--cream);color:var(--ink);min-height:100dvh;overflow-x:hidden;position:relative}body:before{content:"";position:fixed;inset:0;background-image:radial-gradient(circle,rgba(0,0,0,.06) 1px,transparent 1px);background-size:20px 20px;pointer-events:none;z-index:0}.comic-card{background:#fff;border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease}.comic-card:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg)}h1,h2,h3{font-family:var(--font-comic);letter-spacing:.03em;line-height:1.1}h1{font-size:clamp(2.2rem,8vw,4rem)}h2{font-size:clamp(1.6rem,6vw,2.8rem)}h3{font-size:clamp(1.2rem,4vw,1.8rem)}p{font-size:clamp(.95rem,3vw,1.05rem);line-height:1.6}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font-comic);font-size:clamp(1.1rem,4vw,1.4rem);letter-spacing:.05em;padding:.75rem 2rem;border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow);cursor:pointer;text-decoration:none;transition:transform .1s ease,box-shadow .1s ease;white-space:nowrap;user-select:none}.btn:active{transform:translate(4px,4px);box-shadow:none}.btn-primary{background:var(--ink);color:#fff}.btn-secondary{background:#fff;color:var(--ink)}.btn-hero{background:var(--cc);color:#fff;font-size:clamp(1.3rem,5vw,1.8rem);padding:1rem 2.5rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}.burst{display:inline-block;font-family:var(--font-comic);font-size:.85rem;letter-spacing:.05em;padding:.2rem .6rem;border-radius:50px;border:2px solid var(--ink);transform:rotate(-2deg);animation:burst-wiggle 2s ease-in-out infinite}@keyframes burst-wiggle{0%,to{transform:rotate(-2deg) scale(1)}50%{transform:rotate(2deg) scale(1.05)}}.progress-track{background:#e0e0e0;border:2px solid var(--ink);border-radius:50px;overflow:hidden;height:10px}.progress-fill{height:100%;border-radius:50px;transition:width .5s cubic-bezier(.34,1.56,.64,1);background:linear-gradient(90deg,var(--cc),var(--mm))}.stat-bar-track{background:#e8e8e8;border:2px solid var(--ink);border-radius:50px;overflow:hidden;height:20px;position:relative}.stat-bar-fill{height:100%;border-radius:50px;position:relative;overflow:hidden;transition:width 1.2s cubic-bezier(.34,1.56,.64,1)}.stat-bar-fill:after{content:"";position:absolute;top:3px;left:8px;right:8px;height:5px;background:#fff6;border-radius:50px}.container{width:100%;max-width:480px;margin:0 auto;padding:1rem 1.25rem;position:relative;z-index:1}@keyframes slide-in{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:translate(0)}}@keyframes fade-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pop-in{0%{opacity:0;transform:scale(.7) rotate(-5deg)}70%{transform:scale(1.08) rotate(1deg)}to{opacity:1;transform:scale(1) rotate(0)}}.animate-slide-in{animation:slide-in .4s ease forwards}.animate-fade-up{animation:fade-up .5s ease forwards}.animate-pop-in{animation:pop-in .6s cubic-bezier(.34,1.56,.64,1) forwards}.hero-bg-CC{background:radial-gradient(circle at 40% 50%,#fff0f6,#ffd6eb)}.hero-bg-DD{background:radial-gradient(circle at 40% 50%,#e8fafb,#b3f0f5)}.hero-bg-RR{background:radial-gradient(circle at 40% 50%,#f0fbf0,#c8e6c9)}.hero-bg-MM{background:radial-gradient(circle at 40% 50%,#fff8e1,#ffe082)}@keyframes confetti-fall{0%{transform:translateY(-20px) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}@media (min-width: 640px){.container{padding:1.5rem 2rem}}