:root{--font-headers:"Fredoka", system-ui, -apple-system, sans-serif;--font-body:"Outfit", system-ui, -apple-system, sans-serif;--color-bg:#f5fcf6;--color-card-bg:#fff;--color-text:#2d3b45;--color-text-light:#5a6e7f;--color-water:#3498db;--color-water-hover:#2980b9;--color-water-bg:#eaf2f8;--color-recycle:#9b59b6;--color-recycle-hover:#8e44ad;--color-recycle-bg:#f4ecf7;--color-green:#2ecc71;--color-green-hover:#27ae60;--color-green-bg:#eafaf1;--color-energy:#f39c12;--color-energy-hover:#d35400;--color-energy-bg:#fef5e7;--color-age-3:#9b59b6;--color-age-4:#3498db;--color-age-5:#2ecc71;--shadow-sm:0 4px 6px -1px #0000000d;--shadow-md:0 10px 15px -3px #00000014, 0 4px 6px -2px #0000000d;--shadow-lg:0 20px 25px -5px #0000001a, 0 10px 10px -5px #0000000a;--radius-sm:12px;--radius-md:20px;--radius-lg:32px;--transition-fast:.15s ease;--transition-normal:.3s cubic-bezier(.4, 0, .2, 1);--transition-slow:.5s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{font-family:var(--font-body);background-color:var(--color-bg);color:var(--color-text);line-height:1.5;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-headers);font-weight:700}button,input,select{font-family:inherit}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.flex-shrink-0{flex-shrink:0}.flex-wrap{flex-wrap:wrap}.flex-grow{flex-grow:1}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.sticky{position:sticky}.top-0{top:0}.z-50{z-index:50}.relative{position:relative}.absolute{position:absolute}.overflow-hidden{overflow:overflow}.select-none{-webkit-user-select:none;user-select:none}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.w-full{width:100%}.h-full{height:100%}.w-10{width:2.5rem}.h-10{height:2.5rem}.w-12{width:3rem}.h-12{height:3rem}.w-16{width:4rem}.h-16{height:4rem}.w-20{width:5rem}.h-20{height:5rem}.w-24{width:6rem}.h-24{height:6rem}.w-32{width:8rem}.h-32{height:8rem}.w-48{width:12rem}.h-48{height:12rem}.w-64{width:16rem}.h-64{height:16rem}.min-h-\[300px\]{min-height:300px}.min-h-\[400px\]{min-height:400px}.min-h-screen{min-height:100vh}.mx-auto{margin-left:auto;margin-right:auto}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.my-8{margin-top:2rem;margin-bottom:2rem}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.p-12{padding:3rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.m-0{margin:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-20{margin-top:5rem}.mr-2{margin-right:.5rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}@media (width>=640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width>=768px){.md\:flex-row{flex-direction:row}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:w-32{width:8rem}.md\:h-32{height:8rem}.md\:w-20{width:5rem}.md\:h-20{height:5rem}.md\:text-left{text-align:left}.md\:text-xl{font-size:1.25rem}.md\:text-2xl{font-size:1.5rem}.md\:text-5xl{font-size:3rem}.md\:p-12{padding:3rem}.hidden{display:none}}@media (width>=1024px){.lg\:flex-row{flex-direction:row}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:col-span-2{grid-column:span 2/span 2}}.bg-white{background-color:#fff}.bg-white\/95{background-color:#fffffff2}.bg-white\/80{background-color:#fffc}.bg-white\/15{background-color:#ffffff26}.bg-slate-50{background-color:#f8fafc}.bg-slate-100{background-color:#f1f5f9}.bg-slate-200{background-color:#e2e8f0}.bg-slate-900{background-color:#0f172a}.bg-emerald-50{background-color:#ecfdf5}.bg-emerald-100{background-color:#d1fae5}.bg-emerald-500{background-color:#10b981}.bg-emerald-600{background-color:#059669}.bg-purple-50{background-color:#faf5ff}.bg-purple-100{background-color:#f3e8ff}.bg-purple-600{background-color:#9333ea}.bg-sky-50{background-color:#f0f9ff}.bg-sky-100{background-color:#e0f2fe}.bg-sky-500{background-color:#0ea5e9}.bg-amber-50{background-color:#fffbeb}.bg-amber-100{background-color:#fef3c7}.bg-amber-400{background-color:#fbbf24}.bg-lime-100{background-color:#f7fee7}.bg-teal-100{background-color:#f0fdfa}.bg-red-50{background-color:#fef2f2}.bg-red-100{background-color:#fee2e2}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right, var(--tw-gradient-stops))}.from-emerald-400{--tw-gradient-from:#34d399;--tw-gradient-to:#34d39900;--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-teal-400{--tw-gradient-to:#2dd4bf00;--tw-gradient-stops:var(--tw-gradient-from), #2dd4bf var(--tw-gradient-to)}.to-sky-400{--tw-gradient-to:#38bdf8}.from-emerald-500{--tw-gradient-from:#10b981;--tw-gradient-to:#10b98100;--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-teal-500{--tw-gradient-to:#14b8a6}.to-teal-600{--tw-gradient-to:#0d9488}.border{border:1px solid #e2e8f0}.border-2{border-style:solid;border-width:2px}.border-3{border-style:solid;border-width:3px}.border-4{border-style:solid;border-width:4px}.border-dashed{border-style:dashed}.border-slate-200{border-color:#e2e8f0}.border-slate-300{border-color:#cbd5e1}.border-emerald-100{border-color:#d1fae5}.border-emerald-200{border-color:#a7f3d0}.border-emerald-400{border-color:#34d399}.border-emerald-500\/50{border-color:#10b98180}.border-purple-200{border-color:#e9d5ff}.border-purple-400{border-color:#c084fc}.border-sky-100{border-color:#e0f2fe}.border-sky-400{border-color:#38bdf8}.border-amber-200{border-color:#fde68a}.border-amber-400{border-color:#fbbf24}.border-lime-400{border-color:#a3e635}.border-teal-400{border-color:#2dd4bf}.border-red-200{border-color:#fecaca}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.text-white{color:#fff}.text-slate-300{color:#cbd5e1}.text-slate-400{color:#94a3b8}.text-slate-500{color:#64748b}.text-slate-600{color:#475569}.text-slate-700{color:#334155}.text-slate-800{color:#1e293b}.text-emerald-50{color:#ecfdf5}.text-emerald-600{color:#059669}.text-emerald-700{color:#047857}.text-emerald-800{color:#065f46}.text-purple-700{color:#7e22ce}.text-purple-800{color:#6b21a8}.text-sky-600{color:#0284c7}.text-sky-700{color:#0369a1}.text-sky-800{color:#075985}.text-amber-800{color:#92400e}.text-amber-950{color:#451a03}.text-red-500{color:#ef4444}.text-red-600{color:#dc2626}.text-teal-700{color:#0f766e}.text-lime-700{color:#4d7c0f}.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-base{font-size:1rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}.text-4xl{font-size:2.25rem}.text-5xl{font-size:3rem}.text-6xl{font-size:3.75rem}.text-7xl{font-size:4.5rem}.text-8xl{font-size:6rem}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-black{font-weight:900}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.uppercase{text-transform:uppercase}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.tracking-widest{letter-spacing:.1em}.leading-none{line-height:1}.leading-tight{line-height:1.25}.leading-relaxed{line-height:1.625}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.shadow-inner{box-shadow:inset 0 2px 4px #0000000f}.backdrop-blur{-webkit-backdrop-filter:blur(8px)}.backdrop-blur-sm{-webkit-backdrop-filter:blur(4px)}.transition-all{transition:all var(--transition-normal)}.transition-colors{transition:background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast)}.hover\:scale-102:hover{transform:scale(1.02)}.hover\:scale-105:hover{transform:scale(1.05)}.hover\:scale-110:hover{transform:scale(1.1)}.active\:translate-y-0\.5:active{transform:translateY(2px)}.active\:translate-y-1:active{transform:translateY(4px)}.hover\:bg-slate-50:hover{background-color:#f8fafc}.hover\:bg-slate-100:hover{background-color:#f1f5f9}.hover\:bg-slate-200:hover{background-color:#e2e8f0}.hover\:bg-emerald-700:hover{background-color:#047857}.hover\:bg-emerald-600:hover{background-color:#059669}.hover\:text-slate-800:hover{color:#1e293b}.hover\:text-emerald-400:hover{color:#34d399}.hover\:-translate-y-1:hover{transform:translateY(-4px)}.blur-2xl{filter:blur(40px)}.blur-3xl{filter:blur(64px)}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-80{opacity:.8}.grayscale{filter:grayscale()}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}@keyframes bounce-gentle{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-8px)scale(1.02)}}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pop-in{0%{opacity:0;transform:scale(.8)}70%{opacity:1;transform:scale(1.05)}to{transform:scale(1)}}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.anim-float{animation:4s ease-in-out infinite float}.anim-bounce{animation:3s ease-in-out infinite bounce-gentle}.anim-spin-slow{animation:12s linear infinite spin-slow}.anim-pop{animation:.4s cubic-bezier(.34,1.56,.64,1) forwards pop-in}.anim-slide-up{animation:.5s forwards slide-up}@keyframes pulse-glow{0%,to{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}.scale-95{transform:scale(.95)}.scale-102{transform:scale(1.02)}.scale-105{transform:scale(1.05)}.scale-110{transform:scale(1.1)}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--color-bg)}::-webkit-scrollbar-thumb{border:2px solid var(--color-bg);background:#cbd5e1;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#94a3b8}.glass{-webkit-backdrop-filter:blur(10px);background:#ffffffd9;border:1px solid #fff6}.game-card{background:var(--color-card-bg);border-radius:var(--radius-md);box-shadow:var(--shadow-md);transition:all var(--transition-normal);border:3px solid #0000}.game-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-5px)}.game-btn{font-family:var(--font-headers);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);border:none;justify-content:center;align-items:center;gap:.5rem;padding:.8rem 1.8rem;font-size:1.1rem;display:inline-flex;box-shadow:0 4px #00000026}.game-btn:active{transform:translateY(3px);box-shadow:0 1px #00000026}.game-btn-green{background:var(--color-green);color:#fff}.game-btn-green:hover{background:var(--color-green-hover)}.game-btn-blue{background:var(--color-water);color:#fff}.game-btn-blue:hover{background:var(--color-water-hover)}.game-btn-orange{background:var(--color-energy);color:#fff}.game-btn-orange:hover{background:var(--color-energy-hover)}.game-btn-purple{background:var(--color-recycle);color:#fff}.game-btn-purple:hover{background:var(--color-recycle-hover)}.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}.badge{border-radius:50px;align-items:center;padding:.35rem .8rem;font-size:.85rem;font-weight:600;display:inline-flex}.speaker-wave{background-color:currentColor;width:4px;height:12px;margin:0 1px;animation:1s ease-in-out infinite alternate wave;display:inline-block}@keyframes wave{0%{height:4px}to{height:16px}}