:root{--yellow: #FFD200;--yellow-border: #E5B800;--yellow-light: #FFF8CC;--yellow-text: #92400e;--bg: #f5f5f7;--surface: #ffffff;--surface-2: #f2f2f7;--border: #e5e5ea;--border-thick: #c7c7cc;--text: #1c1c1e;--text-2: #3a3a3c;--text-3: #6b7280;--green: #34c759;--green-bg: #d1fae5;--green-text: #065f46;--red: #ff3b30;--red-bg: #fee2e2;--red-text: #7f1d1d;--radius: 20px;--font: "Fredoka", -apple-system, sans-serif;--shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);--shadow-md: 0 4px 16px rgba(0,0,0,.08);--shadow-lg: 0 10px 40px rgba(0,0,0,.12)}:root[data-theme=light]{--bg: #f5f5f7;--surface: #ffffff;--surface-2: #f2f2f7;--border: #e5e5ea;--border-thick: #c7c7cc;--text: #1c1c1e;--text-2: #3a3a3c;--text-3: #6b7280;--yellow-light: #FFF8CC;--yellow-text: #92400e;--green-bg: #d1fae5;--green-text: #065f46;--red-bg: #fee2e2;--red-text: #7f1d1d;--shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);--shadow-md: 0 4px 16px rgba(0,0,0,.08)}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--bg: #000000;--surface: #1c1c1e;--surface-2: #2c2c2e;--border: #38383a;--border-thick: #48484a;--text: #ffffff;--text-2: #ebebf5cc;--text-3: #ebebf599;--yellow-light: #2d2200;--yellow-text: #fbbf24;--green-bg: #052e16;--green-text: #86efac;--red-bg: #450a0a;--red-text: #fca5a5;--shadow-sm: 0 1px 3px rgba(0,0,0,.3);--shadow-md: 0 4px 16px rgba(0,0,0,.5)}}:root[data-theme=dark]{--bg: #000000;--surface: #1c1c1e;--surface-2: #2c2c2e;--border: #38383a;--border-thick: #48484a;--text: #ffffff;--text-2: #ebebf5cc;--text-3: #ebebf599;--yellow-light: #2d2200;--yellow-text: #fbbf24;--green-bg: #052e16;--green-text: #86efac;--red-bg: #450a0a;--red-text: #fca5a5;--shadow-sm: 0 1px 3px rgba(0,0,0,.3);--shadow-md: 0 4px 16px rgba(0,0,0,.5)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:manipulation}body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100dvh;overflow-x:hidden;padding-top:env(safe-area-inset-top);overscroll-behavior-y:contain}button{font-family:var(--font);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}input,textarea,select{font-family:var(--font);font-size:max(16px,1em)}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}@keyframes fadeSlideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}@keyframes livePulse{0%{box-shadow:0 0 #34c75980}70%{box-shadow:0 0 0 8px #34c75900}to{box-shadow:0 0 #34c75900}}@keyframes fireShake{0%,80%,to{transform:rotate(0) scale(1)}85%{transform:rotate(-8deg) scale(1.15)}90%{transform:rotate(8deg) scale(1.15)}95%{transform:rotate(-4deg) scale(1.1)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes bounceIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{transform:scale(1);opacity:1}}@keyframes xpPop{0%{transform:translate(-50%) translateY(0) scale(.8);opacity:0}20%{transform:translate(-50%) translateY(-10px) scale(1.1);opacity:1}80%{transform:translate(-50%) translateY(-20px) scale(1);opacity:1}to{transform:translate(-50%) translateY(-30px) scale(.9);opacity:0}}.animate-in{animation:fadeSlideUp .3s ease both}.animate-scale{animation:scaleIn .25s ease both}.animate-bounce{animation:bounceIn .5s cubic-bezier(.68,-.55,.265,1.55) both}.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--border) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px}button{transition:transform .12s ease,opacity .12s ease}button:active{opacity:.8;transform:scale(.97)}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes xp-count-glow{0%,to{text-shadow:none}50%{text-shadow:0 0 12px #FFD20088}}@keyframes streak-danger{0%,to{opacity:.6}50%{opacity:1}}@keyframes streak-orange-pulse{0%,to{box-shadow:0 0 #fb923c40}50%{box-shadow:0 0 0 8px #fb923c00}}@keyframes hue-shift{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(30deg)}}@keyframes correct-text-bounce{0%{transform:translate(-50%) scale(0);opacity:0}60%{transform:translate(-50%) scale(1.3);opacity:1}to{transform:translate(-50%) scale(1);opacity:1}}@keyframes particle-0{0%{transform:translate(0);opacity:1}to{transform:translateY(-72px);opacity:0}}@keyframes particle-1{0%{transform:translate(0);opacity:1}to{transform:translate(62px,-36px);opacity:0}}@keyframes particle-2{0%{transform:translate(0);opacity:1}to{transform:translate(62px,36px);opacity:0}}@keyframes particle-3{0%{transform:translate(0);opacity:1}to{transform:translateY(72px);opacity:0}}@keyframes particle-4{0%{transform:translate(0);opacity:1}to{transform:translate(-62px,36px);opacity:0}}@keyframes particle-5{0%{transform:translate(0);opacity:1}to{transform:translate(-62px,-36px);opacity:0}}@keyframes shake-wrong{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}@keyframes dot-pop{0%{transform:scale(.8)}60%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes dot-current-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes greeting-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes cta-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes corner-breathe{0%,to{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}@keyframes laser-scan{0%{top:-2%}to{top:102%}}@keyframes scan-text-fade{0%{opacity:0;transform:translateY(4px)}15%{opacity:1;transform:translateY(0)}85%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}@keyframes match-drop-in{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes stagger-in{0%{transform:translate(-20px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes scanner-badge-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.25)}}@keyframes danger-zone-pulse{0%,to{box-shadow:0 0 #ef444480}50%{box-shadow:0 0 0 8px #ef444400}}@keyframes badge-glow{0%,to{box-shadow:0 0 4px #ffd20080}50%{box-shadow:0 0 16px 2px #ffd20080}}@keyframes badge-unlock{0%{transform:scale(0);opacity:0}60%{transform:scale(1.4);opacity:1}to{transform:scale(1);opacity:1}}@keyframes badge-radial{0%{clip-path:circle(0% at 50% 50%);opacity:1}to{clip-path:circle(80% at 50% 50%);opacity:0}}@keyframes xp-boost-drop{0%{transform:translate(-50%) translateY(-60px);opacity:0}25%{transform:translate(-50%) translateY(4px);opacity:1}80%{transform:translate(-50%) translateY(0);opacity:1}to{transform:translate(-50%) translateY(-8px);opacity:0}}@keyframes modal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes modal-scale-in{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}@keyframes offline-slide-in{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes sticky-slide-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #ffffff inset!important;-webkit-text-fill-color:#1e293b!important;caret-color:#1e293b;border-color:#ffd200!important;-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s}@media (prefers-color-scheme: dark){:root:not([data-theme=light]) input:-webkit-autofill,:root:not([data-theme=light]) input:-webkit-autofill:hover,:root:not([data-theme=light]) input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #1e293b inset!important;-webkit-text-fill-color:#f8fafc!important}}:root[data-theme=dark] input:-webkit-autofill,:root[data-theme=dark] input:-webkit-autofill:hover,:root[data-theme=dark] input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #1e293b inset!important;-webkit-text-fill-color:#f8fafc!important}