:root{--pink: #ff6b9d;--blue: #4ecdc4;--green: #45b7d1;--purple: #a855f7;--orange: #f97316;--teal: #14b8a6;--yellow: #eab308;--red: #ef4444;--bg: #fdf6ff;--card-bg: #ffffff;--text: #2d1b4e;--text-light: #6b5b7b;--radius: 1rem}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh}#root{min-height:100vh}.app{max-width:900px;margin:0 auto;padding:1rem}.hero{text-align:center;padding:3rem 1rem 2rem;background:linear-gradient(135deg,#fce4ec,#e8f5e9,#e3f2fd,#f3e5f5);border-radius:var(--radius);margin-bottom:2rem;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 20% 50%,rgba(255,107,157,.15),transparent 50%),radial-gradient(circle at 80% 50%,rgba(78,205,196,.15),transparent 50%);pointer-events:none}.hero-badge{display:inline-block;background:var(--purple);color:#fff;font-size:.85rem;font-weight:600;padding:.3rem 1rem;border-radius:2rem;margin-bottom:1rem;letter-spacing:.05em;text-transform:uppercase;position:relative}.hero-title{font-size:clamp(2rem,6vw,3.5rem);font-weight:800;color:var(--text);margin-bottom:.75rem;position:relative}.hero-emoji{font-size:.9em}.hero-subtitle{font-size:1.15rem;color:var(--text-light);max-width:500px;margin:0 auto 1.5rem;position:relative}.hero-stars{display:flex;justify-content:center;gap:.5rem}.star{font-size:1.5rem;display:inline-block;animation:bounce 1.2s ease-in-out infinite alternate}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-8px)}}.section-title{font-size:1.75rem;font-weight:800;text-align:center;margin-bottom:.5rem;color:var(--text)}.section-desc{text-align:center;color:var(--text-light);margin-bottom:1.5rem;font-size:1rem}.rules-section{margin-bottom:2.5rem}.rules-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}.rule-card{perspective:800px;cursor:pointer;height:240px}.rule-card-inner{position:relative;width:100%;height:100%;transition:transform .5s ease;transform-style:preserve-3d}.rule-card.flipped .rule-card-inner{transform:rotateY(180deg)}.rule-card-front,.rule-card-back{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;border-radius:var(--radius);padding:1.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:2px solid color-mix(in srgb,var(--accent) 30%,transparent);background:var(--card-bg)}.rule-card-front{box-shadow:0 4px 20px #0000000f}.rule-card-back{transform:rotateY(180deg);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,white),#fff);box-shadow:0 4px 20px #0000000f}.rule-emoji{font-size:2.5rem;margin-bottom:.5rem;display:block}.rule-title{font-size:1.1rem;font-weight:700;margin-bottom:.4rem;color:var(--text)}.rule-desc{font-size:.9rem;color:var(--text-light);line-height:1.5}.flip-hint{margin-top:auto;padding-top:.5rem;font-size:.75rem;color:color-mix(in srgb,var(--accent) 60%,var(--text-light));font-weight:600}.tip-label{display:inline-block;background:var(--accent);color:#fff;font-size:.8rem;font-weight:700;padding:.2rem .75rem;border-radius:2rem;margin-bottom:.75rem}.tip-text{font-size:.95rem;color:var(--text);line-height:1.6}.quiz-section{margin-bottom:2.5rem}.quiz-card{background:var(--card-bg);border-radius:var(--radius);padding:2rem;box-shadow:0 4px 20px #0000000f;border:2px solid #e9d5ff}.quiz-progress{font-size:.8rem;font-weight:600;color:var(--purple);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem}.quiz-question{font-size:1.2rem;font-weight:700;margin-bottom:1.25rem;color:var(--text)}.quiz-options{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1rem}.quiz-option{background:#f8f4ff;border:2px solid #e9d5ff;border-radius:.75rem;padding:.9rem 1.25rem;font-size:.95rem;text-align:left;cursor:pointer;transition:all .2s;color:var(--text);font-family:inherit}.quiz-option:hover:not(:disabled){background:#f0e6ff;border-color:var(--purple)}.quiz-option.correct{background:#dcfce7;border-color:#22c55e;color:#166534}.quiz-option.wrong{background:#fee2e2;border-color:#ef4444;color:#991b1b}.quiz-feedback{background:#f0f9ff;border-radius:.75rem;padding:1.25rem;border:2px solid #bae6fd}.quiz-feedback p{color:var(--text);margin-bottom:1rem;line-height:1.6}.quiz-btn{display:inline-block;background:var(--purple);color:#fff;border:none;border-radius:2rem;padding:.65rem 1.75rem;font-size:.95rem;font-weight:700;cursor:pointer;transition:background .2s;font-family:inherit}.quiz-btn:hover{background:#9333ea}.quiz-result{text-align:center;background:var(--card-bg);border-radius:var(--radius);padding:2.5rem 2rem;box-shadow:0 4px 20px #0000000f;border:2px solid #e9d5ff}.result-emoji{font-size:4rem;display:block;margin-bottom:1rem}.result-score{font-size:1.3rem;font-weight:700;color:var(--purple);margin-bottom:.5rem}.result-msg{color:var(--text-light);margin-bottom:1.5rem}.pledge-section{margin-bottom:2.5rem}.pledge-card{background:var(--card-bg);border-radius:var(--radius);padding:2rem;box-shadow:0 4px 20px #0000000f;border:2px solid #bbf7d0}.pledge-list{list-style:none;display:flex;flex-direction:column;gap:.5rem}.pledge-item label{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:.75rem;cursor:pointer;transition:background .2s;font-size:.95rem}.pledge-item label:hover{background:#f0fdf4}.pledge-item.checked label{background:#dcfce7}.pledge-item input[type=checkbox]{display:none}.pledge-check{font-size:1.3rem;flex-shrink:0}.pledge-complete{margin-top:1.5rem;text-align:center;padding:1.5rem;background:linear-gradient(135deg,#fef9c3,#dcfce7);border-radius:var(--radius);border:2px solid #fde047;animation:pop .4s ease}@keyframes pop{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.trophy{font-size:3rem;display:block;margin-bottom:.5rem}.pledge-complete p{color:var(--text);font-size:1rem;line-height:1.6}.footer{text-align:center;padding:2rem 1rem;color:var(--text-light);font-size:.95rem}.footer-small{font-size:.8rem;margin-top:.25rem;opacity:.7}@media(max-width:600px){.app{padding:.5rem}.hero{padding:2rem 1rem 1.5rem}.rules-grid{grid-template-columns:1fr}.quiz-card,.pledge-card{padding:1.25rem}}