*{margin:0;padding:0;box-sizing:border-box}:root{--bg-dark: #050508;--bg-card: #0a0a12;--neon-cyan: #00f5ff;--neon-purple: #b400ff;--neon-pink: #ff00aa;--neon-green: #00ff88;--neon-yellow: #ffee00;--neon-orange: #ff6600;--rainbow-1: #ff0000;--rainbow-2: #ff8800;--rainbow-3: #ffff00;--rainbow-4: #00ff00;--rainbow-5: #00ffff;--rainbow-6: #0088ff;--rainbow-7: #8800ff;--text-primary: #ffffff;--text-secondary: #888899}@keyframes rainbow-bg{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse-glow{0%,to{filter:drop-shadow(0 0 20px var(--glow-color))}50%{filter:drop-shadow(0 0 40px var(--glow-color)) drop-shadow(0 0 60px var(--glow-color))}}@keyframes rotate-hue{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes border-dance{0%,to{border-color:var(--neon-cyan);box-shadow:0 0 20px var(--neon-cyan)}25%{border-color:var(--neon-purple);box-shadow:0 0 20px var(--neon-purple)}50%{border-color:var(--neon-pink);box-shadow:0 0 20px var(--neon-pink)}75%{border-color:var(--neon-green);box-shadow:0 0 20px var(--neon-green)}}@keyframes star-twinkle{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:var(--bg-dark);color:var(--text-primary);overflow:hidden;width:100vw;height:100vh}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at 20% 20%,rgba(0,245,255,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(180,0,255,.08) 0%,transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(255,0,170,.05) 0%,transparent 70%);pointer-events:none;z-index:0}#app{width:100%;height:100%;position:relative;z-index:1}#gameCanvas{display:block;width:100%;height:100%;background:transparent}#ui-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}#ui-overlay>*{pointer-events:auto}.menu-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:20px;position:relative}.menu-title{font-size:5rem;font-weight:900;background:linear-gradient(90deg,var(--rainbow-1),var(--rainbow-2),var(--rainbow-3),var(--rainbow-4),var(--rainbow-5),var(--rainbow-6),var(--rainbow-7),var(--rainbow-1));background-size:400% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:rainbow-bg 4s linear infinite,float 3s ease-in-out infinite;margin-bottom:60px;letter-spacing:8px;text-shadow:0 0 80px rgba(255,255,255,.3)}.game-cards{display:flex;gap:40px;flex-wrap:wrap;justify-content:center;max-width:1400px;perspective:1000px}.game-card{width:340px;height:420px;background:linear-gradient(145deg,#141423e6,#0a0a14f2);border-radius:28px;padding:35px;cursor:pointer;position:relative;overflow:hidden;transition:all .5s cubic-bezier(.175,.885,.32,1.275);border:2px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform-style:preserve-3d}.game-card:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent,var(--card-color-1) 10%,transparent 20%,var(--card-color-2) 30%,transparent 40%);animation:rotate-hue 8s linear infinite;opacity:0;transition:opacity .5s}.game-card:after{content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;background:linear-gradient(145deg,#141423fa,#0a0a14fc);border-radius:25px;z-index:0}.game-card:hover{transform:translateY(-15px) rotateX(5deg) scale(1.03);border-color:var(--card-color-1);box-shadow:0 30px 80px #00000080,0 0 50px var(--card-glow),inset 0 0 30px #ffffff0d}.game-card:hover:before{opacity:.3}.game-card.time-rewind{--card-color-1: var(--neon-cyan);--card-color-2: var(--neon-purple);--card-glow: rgba(0, 245, 255, .4)}.game-card.gravity-flip{--card-color-1: var(--neon-purple);--card-color-2: var(--neon-pink);--card-glow: rgba(180, 0, 255, .4)}.game-card.one-stroke{--card-color-1: var(--neon-green);--card-color-2: var(--neon-yellow);--card-glow: rgba(0, 255, 136, .4)}.card-icon{font-size:90px;margin-bottom:20px;display:block;text-align:center;position:relative;z-index:1;animation:float 2.5s ease-in-out infinite;filter:drop-shadow(0 0 20px var(--card-color-1))}.card-title{font-size:2rem;font-weight:800;margin-bottom:15px;text-align:center;position:relative;z-index:1;background:linear-gradient(135deg,var(--card-color-1),var(--card-color-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.card-desc{font-size:1rem;color:var(--text-secondary);line-height:1.7;text-align:center;position:relative;z-index:1}.card-levels{position:absolute;bottom:25px;left:50%;transform:translate(-50%);font-size:.95rem;font-weight:600;color:var(--card-color-1);background:linear-gradient(135deg,#ffffff1a,#ffffff0d);padding:10px 25px;border-radius:25px;border:1px solid rgba(255,255,255,.1);z-index:1}.level-select{display:flex;flex-direction:column;align-items:center;padding:40px;height:100%}.level-header{display:flex;align-items:center;gap:25px;margin-bottom:50px}.back-btn{background:linear-gradient(135deg,#ffffff26,#ffffff0d);border:2px solid rgba(255,255,255,.2);color:#fff;width:60px;height:60px;border-radius:50%;font-size:28px;cursor:pointer;transition:all .4s cubic-bezier(.175,.885,.32,1.275);display:flex;align-items:center;justify-content:center}.back-btn:hover{background:linear-gradient(135deg,#ffffff40,#ffffff1a);transform:scale(1.15) rotate(-10deg);border-color:var(--neon-cyan);box-shadow:0 0 30px #00f5ff66}.level-title{font-size:3rem;font-weight:800;background:linear-gradient(90deg,var(--neon-cyan),var(--neon-purple),var(--neon-pink));background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:rainbow-bg 3s linear infinite}.levels-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:25px;max-width:650px}.level-btn{width:100px;height:100px;background:linear-gradient(145deg,#141428e6,#0a0a19f2);border:2px solid rgba(255,255,255,.15);border-radius:20px;color:#fff;font-size:2rem;font-weight:800;cursor:pointer;transition:all .4s cubic-bezier(.175,.885,.32,1.275);position:relative;overflow:hidden}.level-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.level-btn:hover:not(.locked){transform:scale(1.15) rotate(3deg);border-color:var(--neon-cyan);box-shadow:0 0 40px #00f5ff66,inset 0 0 20px #00f5ff1a;animation:border-dance 2s linear infinite}.level-btn:hover:not(.locked):before{left:100%}.level-btn.locked{opacity:.3;cursor:not-allowed;filter:grayscale(1)}.level-btn.completed{background:linear-gradient(145deg,#00321ee6,#001e14f2);border-color:var(--neon-green);box-shadow:0 0 20px #0f83}.level-btn.completed:after{content:"★";position:absolute;top:-12px;right:-12px;font-size:28px;color:gold;filter:drop-shadow(0 0 10px gold);animation:star-twinkle 1.5s ease-in-out infinite}.game-ui{position:absolute;top:20px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:flex-start}.game-info{background:linear-gradient(135deg,#000000b3,#141428b3);padding:18px 30px;border-radius:16px;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,.1);font-size:1.1rem;font-weight:600}.game-controls{display:flex;gap:12px}.control-btn{background:linear-gradient(135deg,#ffffff1f,#ffffff0d);border:1px solid rgba(255,255,255,.15);color:#fff;padding:14px 24px;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.control-btn:hover{background:linear-gradient(135deg,#fff3,#ffffff1a);transform:translateY(-3px);box-shadow:0 10px 30px #0000004d}.win-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center,#000000d9,#000000f2);display:flex;flex-direction:column;align-items:center;justify-content:center;animation:fadeIn .5s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.win-title{font-size:5rem;font-weight:900;background:linear-gradient(90deg,gold,#ffec8b,gold,#ff8c00,gold);background-size:300% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:rainbow-bg 2s linear infinite,float 2s ease-in-out infinite;margin-bottom:40px;filter:drop-shadow(0 0 30px rgba(255,215,0,.5))}.win-buttons{display:flex;gap:25px}.win-btn{padding:18px 50px;font-size:1.3rem;font-weight:700;border:none;border-radius:16px;cursor:pointer;transition:all .4s cubic-bezier(.175,.885,.32,1.275);position:relative;overflow:hidden}.win-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}.win-btn.primary{background:linear-gradient(135deg,var(--neon-cyan),var(--neon-purple));color:#fff;box-shadow:0 10px 40px #00f5ff4d}.win-btn.secondary{background:linear-gradient(135deg,#ffffff26,#ffffff0d);color:#fff;border:2px solid rgba(255,255,255,.2)}.win-btn:hover{transform:scale(1.1) translateY(-5px)}.win-btn.primary:hover{box-shadow:0 20px 60px #00f5ff80}.instructions{position:absolute;bottom:25px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,#000000b3,#141428b3);padding:18px 35px;border-radius:16px;font-size:1rem;color:var(--text-secondary);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);text-align:center;border:1px solid rgba(255,255,255,.1)}.instructions kbd{background:linear-gradient(135deg,#00f5ff33,#b400ff33);padding:5px 12px;border-radius:8px;margin:0 5px;font-family:inherit;font-weight:600;color:var(--neon-cyan);border:1px solid rgba(0,245,255,.3)}.skin-selector{position:absolute;top:20px;right:20px;display:flex;gap:10px}.skin-btn{width:40px;height:40px;border-radius:50%;border:3px solid rgba(255,255,255,.3);cursor:pointer;transition:all .3s}.skin-btn:hover{transform:scale(1.2);border-color:#fff}.skin-btn.active{border-color:var(--neon-cyan);box-shadow:0 0 20px var(--neon-cyan)}.skin-btn.rainbow{background:conic-gradient(var(--rainbow-1),var(--rainbow-2),var(--rainbow-3),var(--rainbow-4),var(--rainbow-5),var(--rainbow-6),var(--rainbow-7),var(--rainbow-1));animation:rotate-hue 2s linear infinite}.skin-btn.neon-blue{background:linear-gradient(135deg,#00f5ff,#08f)}.skin-btn.neon-purple{background:linear-gradient(135deg,#b400ff,#f0a)}.skin-btn.neon-green{background:linear-gradient(135deg,#0f8,#8f0)}.particles-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}.particle{position:absolute;border-radius:50%;pointer-events:none;animation:particle-float 10s infinite}@keyframes particle-float{0%,to{transform:translateY(100vh) rotate(0);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translateY(-100vh) rotate(720deg);opacity:0}}.mobile-controls{display:none;position:absolute;bottom:100px;right:20px;flex-direction:column;align-items:center;gap:8px;z-index:100}.mobile-row{display:flex;gap:8px}.mobile-btn{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#00f5ff4d,#b400ff4d);border:2px solid rgba(255,255,255,.3);color:#fff;font-size:24px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-tap-highlight-color:transparent;touch-action:manipulation}.mobile-btn:active{background:linear-gradient(135deg,#00f5ff99,#b400ff99);transform:scale(.95)}.mobile-btn.action{width:80px;border-radius:20px;font-size:14px}@media (max-width: 768px){.menu-title{font-size:2.5rem;letter-spacing:4px;margin-bottom:30px}.game-cards{flex-direction:column;gap:20px;padding:0 15px}.game-card{width:100%;max-width:320px;height:auto;min-height:280px;padding:25px}.card-icon{font-size:60px;margin-bottom:15px}.card-title{font-size:1.5rem}.card-desc{font-size:.9rem;line-height:1.5}.card-levels{position:relative;bottom:auto;left:auto;transform:none;margin-top:15px;display:inline-block}.level-select{padding:20px}.level-header{margin-bottom:30px;gap:15px}.level-title{font-size:1.8rem}.back-btn{width:50px;height:50px;font-size:22px}.levels-grid{grid-template-columns:repeat(5,1fr);gap:12px;max-width:100%}.level-btn{width:55px;height:55px;font-size:1.3rem;border-radius:12px}.level-btn.completed:after{font-size:18px;top:-8px;right:-8px}.game-ui{flex-direction:column;gap:10px;top:10px;left:10px;right:10px}.game-info{padding:12px 20px;font-size:.95rem}.game-controls{gap:8px}.control-btn{padding:10px 16px;font-size:.85rem}.instructions{display:none}.mobile-controls{display:flex}.skin-selector{top:10px;right:10px;gap:6px}.skin-btn{width:32px;height:32px}.win-title{font-size:3rem;margin-bottom:25px}.win-buttons{flex-direction:column;gap:15px}.win-btn{padding:15px 40px;font-size:1.1rem}.particles-container{display:none}}@media (max-width: 480px){.menu-title{font-size:2rem;letter-spacing:2px}.game-card{min-height:240px;padding:20px}.card-icon{font-size:50px}.card-title{font-size:1.3rem}.levels-grid{grid-template-columns:repeat(5,1fr);gap:8px}.level-btn{width:48px;height:48px;font-size:1.1rem}.level-title{font-size:1.5rem}.mobile-btn{width:50px;height:50px;font-size:20px}.mobile-btn.action{width:70px;font-size:12px}}@media (max-height: 500px) and (orientation: landscape){.menu-container{padding:10px}.menu-title{font-size:1.8rem;margin-bottom:15px}.game-cards{flex-direction:row;gap:15px}.game-card{width:200px;min-height:200px;padding:15px}.card-icon{font-size:40px;margin-bottom:10px}.card-title{font-size:1.1rem}.card-desc{display:none}.mobile-controls{bottom:10px;right:10px}.mobile-btn{width:45px;height:45px;font-size:18px}}