@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Space+Mono:wght@400;700&display=swap";:root{--neon-pink: #ff00ff;--neon-cyan: #00ffff;--neon-purple: #bf00ff;--neon-green: #39ff14;--dark-bg: #0a0a0f;--darker-bg: #050508}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%}body{font-family:Space Mono,monospace;background:var(--dark-bg);color:#fff;overflow-x:hidden}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--darker-bg)}::-webkit-scrollbar-thumb{background:var(--neon-purple);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--neon-pink)}.home{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 0%,rgba(191,0,255,.15) 0%,transparent 50%),radial-gradient(ellipse at 0% 50%,rgba(0,255,255,.1) 0%,transparent 50%),radial-gradient(ellipse at 100% 50%,rgba(255,0,255,.1) 0%,transparent 50%),#0a0a0f}.grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,0,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,0,255,.03) 1px,transparent 1px);background-size:50px 50px;animation:gridMove 20s linear infinite;pointer-events:none}@keyframes gridMove{0%{transform:perspective(500px) rotateX(60deg) translateY(0)}to{transform:perspective(500px) rotateX(60deg) translateY(50px)}}.content{position:relative;z-index:10;text-align:center;padding:2rem}.name-container{position:relative;margin-bottom:2rem}.name{font-family:Orbitron,sans-serif;font-size:clamp(3rem,15vw,10rem);font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:#fff;text-shadow:0 0 10px var(--neon-pink),0 0 20px var(--neon-pink),0 0 40px var(--neon-pink),0 0 80px var(--neon-purple);position:relative}.name:before,.name:after{content:"LILY";position:absolute;top:0;left:0;right:0;overflow:hidden}.name:before{color:var(--neon-cyan);z-index:-1;animation:glitch-1 2s infinite linear alternate-reverse}.name:after{color:var(--neon-pink);z-index:-2;animation:glitch-2 3s infinite linear alternate-reverse}@keyframes flicker{0%,19%,21%,23%,25%,54%,56%,to{text-shadow:0 0 10px var(--neon-pink),0 0 20px var(--neon-pink),0 0 40px var(--neon-pink),0 0 80px var(--neon-purple)}20%,24%,55%{text-shadow:0 0 5px var(--neon-pink),0 0 10px var(--neon-pink)}}@keyframes glitch-1{0%{clip-path:inset(40% 0 61% 0);transform:translate(-2px,-2px)}20%{clip-path:inset(92% 0 1% 0);transform:translate(2px,2px)}40%{clip-path:inset(43% 0 1% 0);transform:translate(-2px,2px)}60%{clip-path:inset(25% 0 58% 0);transform:translate(2px,-2px)}80%{clip-path:inset(54% 0 7% 0);transform:translate(-2px,2px)}to{clip-path:inset(58% 0 43% 0);transform:translate(2px,-2px)}}@keyframes glitch-2{0%{clip-path:inset(65% 0 30% 0);transform:translate(2px,2px)}20%{clip-path:inset(10% 0 85% 0);transform:translate(-2px,-2px)}40%{clip-path:inset(80% 0 5% 0);transform:translate(2px,-2px)}60%{clip-path:inset(20% 0 70% 0);transform:translate(-2px,2px)}80%{clip-path:inset(45% 0 40% 0);transform:translate(2px,2px)}to{clip-path:inset(70% 0 25% 0);transform:translate(-2px,-2px)}}.tagline{font-family:Space Mono,monospace;font-size:clamp(.8rem,3vw,1.2rem);color:var(--neon-cyan);text-transform:uppercase;letter-spacing:.5em;margin-bottom:3rem;opacity:.9;text-shadow:0 0 10px var(--neon-cyan);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.7}50%{opacity:1}}.neon-line{width:200px;height:2px;background:linear-gradient(90deg,transparent,var(--neon-pink),var(--neon-cyan),transparent);margin:2rem auto;position:relative}.neon-line:before{content:"";position:absolute;inset:-4px 0;background:linear-gradient(90deg,transparent,var(--neon-pink),var(--neon-cyan),transparent);filter:blur(10px);opacity:.7}.links{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center;margin-top:2rem}.cyber-btn{font-family:Orbitron,sans-serif;font-size:.9rem;padding:1rem 2rem;background:transparent;border:1px solid var(--neon-pink);color:var(--neon-pink);text-transform:uppercase;letter-spacing:.2em;cursor:pointer;position:relative;overflow:hidden;transition:all .3s ease;text-decoration:none}.cyber-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,0,255,.3),transparent);transition:left .5s ease}.cyber-btn:hover:before{left:100%}.cyber-btn:hover{background:#ff00ff1a;box-shadow:0 0 10px var(--neon-pink),0 0 20px var(--neon-pink),inset 0 0 10px #ff00ff1a;transform:translateY(-2px)}.cyber-btn.cyan{border-color:var(--neon-cyan);color:var(--neon-cyan)}.cyber-btn.cyan:before{background:linear-gradient(90deg,transparent,rgba(0,255,255,.3),transparent)}.cyber-btn.cyan:hover{background:#00ffff1a;box-shadow:0 0 10px var(--neon-cyan),0 0 20px var(--neon-cyan),inset 0 0 10px #00ffff1a}.particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}.particle{position:absolute;width:4px;height:4px;background:var(--neon-pink);border-radius:50%;box-shadow:0 0 10px var(--neon-pink);animation:float 15s infinite;opacity:0}.particle:nth-child(odd){background:var(--neon-cyan);box-shadow:0 0 10px var(--neon-cyan)}@keyframes float{0%{transform:translateY(100vh) scale(0);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translateY(-100vh) scale(1);opacity:0}}.scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.1) 0px,rgba(0,0,0,.1) 1px,transparent 1px,transparent 2px);animation:scanlines .1s linear infinite;opacity:.1}@keyframes scanlines{0%{transform:translateY(0)}to{transform:translateY(2px)}}.corner{position:absolute;width:50px;height:50px;border:2px solid var(--neon-pink);opacity:.5}.corner-tl{top:20px;left:20px;border-right:none;border-bottom:none}.corner-tr{top:20px;right:20px;border-left:none;border-bottom:none}.corner-bl{bottom:20px;left:20px;border-right:none;border-top:none}.corner-br{bottom:20px;right:20px;border-left:none;border-top:none}.games-page{min-height:100vh;background:radial-gradient(ellipse at 50% 0%,rgba(191,0,255,.15) 0%,transparent 50%),radial-gradient(ellipse at 0% 50%,rgba(0,255,255,.1) 0%,transparent 50%),radial-gradient(ellipse at 100% 50%,rgba(255,0,255,.1) 0%,transparent 50%),#0a0a0f;padding:2rem}.games-header{display:flex;align-items:center;gap:2rem;margin-bottom:3rem}.games-title{font-family:Orbitron,sans-serif;font-size:clamp(2rem,8vw,4rem);font-weight:900;color:#fff;text-shadow:0 0 10px var(--neon-pink),0 0 20px var(--neon-pink),0 0 40px var(--neon-purple);margin:0}.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;max-width:1200px;margin:0 auto}.game-card{background:#0a0a0fcc;border:2px solid var(--neon-pink);padding:2rem;text-decoration:none;position:relative;overflow:hidden;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;text-align:center}.game-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,0,255,.1) 0%,transparent 50%,rgba(255,0,255,.05) 100%);opacity:0;transition:opacity .3s ease}.game-card:hover:before{opacity:1}.game-card:hover{transform:translateY(-5px);box-shadow:0 0 20px var(--neon-pink),0 0 40px #ff00ff4d}.game-card.cyan{border-color:var(--neon-cyan)}.game-card.cyan:hover{box-shadow:0 0 20px var(--neon-cyan),0 0 40px #00ffff4d}.game-card.cyan:before{background:linear-gradient(135deg,rgba(0,255,255,.1) 0%,transparent 50%,rgba(0,255,255,.05) 100%)}.game-card.purple{border-color:var(--neon-purple)}.game-card.purple:hover{box-shadow:0 0 20px var(--neon-purple),0 0 40px #bf00ff4d}.game-card.purple:before{background:linear-gradient(135deg,rgba(191,0,255,.1) 0%,transparent 50%,rgba(191,0,255,.05) 100%)}.game-card.green{border-color:var(--neon-green)}.game-card.green:hover{box-shadow:0 0 20px var(--neon-green),0 0 40px #39ff144d}.game-card.green:before{background:linear-gradient(135deg,rgba(57,255,20,.1) 0%,transparent 50%,rgba(57,255,20,.05) 100%)}.game-icon{font-size:4rem;margin-bottom:1rem;filter:drop-shadow(0 0 10px currentColor)}.game-name{font-family:Orbitron,sans-serif;font-size:1.5rem;font-weight:700;color:#fff;margin:0 0 .5rem;text-transform:uppercase;letter-spacing:.1em}.game-card.pink .game-name,.game-card:not(.cyan):not(.purple):not(.green) .game-name{text-shadow:0 0 10px var(--neon-pink)}.game-card.cyan .game-name{text-shadow:0 0 10px var(--neon-cyan)}.game-card.purple .game-name{text-shadow:0 0 10px var(--neon-purple)}.game-card.green .game-name{text-shadow:0 0 10px var(--neon-green)}.game-desc{font-family:Space Mono,monospace;font-size:.9rem;color:#ffffffb3;margin:0}.snake-game{height:100vh;background:radial-gradient(ellipse at 50% 0%,rgba(191,0,255,.15) 0%,transparent 50%),#0a0a0f;display:flex;flex-direction:column;align-items:center;overflow:hidden}.snake-header{display:flex;align-items:center;gap:2rem;padding:1rem 2rem;width:100%;justify-content:space-between;flex-shrink:0}.snake-title{font-family:Orbitron,sans-serif;font-size:clamp(1.2rem,4vw,2rem);font-weight:900;color:#fff;text-shadow:0 0 10px var(--neon-cyan),0 0 20px var(--neon-cyan);margin:0}.snake-score{font-family:Orbitron,sans-serif;font-size:1.2rem;color:var(--neon-pink);text-shadow:0 0 10px var(--neon-pink)}.snake-container{flex:1;display:flex;align-items:center;justify-content:center;position:relative}.snake-grid{position:relative;background:#00000080;border:2px solid var(--neon-cyan);box-shadow:0 0 20px #00ffff4d,inset 0 0 20px #00ffff1a}.snake-segment{position:absolute;background:var(--neon-cyan);border-radius:3px;box-shadow:0 0 10px var(--neon-cyan);transition:all .05s linear}.snake-segment.head{background:#fff;box-shadow:0 0 10px var(--neon-cyan),0 0 20px var(--neon-cyan)}.snake-food{position:absolute;background:var(--neon-pink);border-radius:50%;box-shadow:0 0 10px var(--neon-pink),0 0 20px var(--neon-pink);animation:pulse-food .5s ease-in-out infinite alternate}@keyframes pulse-food{0%{transform:scale(.8);opacity:.8}to{transform:scale(1);opacity:1}}.snake-overlay{position:absolute;inset:0;background:#0a0a0fe6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}.game-over-text{font-family:Orbitron,sans-serif;font-size:2rem;color:var(--neon-pink);text-shadow:0 0 10px var(--neon-pink),0 0 20px var(--neon-pink);margin:0;animation:glitch-text .3s infinite}@keyframes glitch-text{0%,to{transform:translate(0)}25%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,-1px)}}.final-score{font-family:Space Mono,monospace;font-size:1.2rem;color:var(--neon-cyan);margin:0}.start-text{font-family:Space Mono,monospace;font-size:1rem;color:#ffffffb3;margin:0}.snake-btn{font-family:Orbitron,sans-serif;font-size:1rem;padding:1rem 2rem;background:transparent;border:2px solid var(--neon-cyan);color:var(--neon-cyan);cursor:pointer;text-transform:uppercase;letter-spacing:.2em;transition:all .3s ease;margin-top:1rem}.snake-btn:hover{background:#00ffff1a;box-shadow:0 0 20px var(--neon-cyan),inset 0 0 20px #00ffff1a}.snake-controls{font-family:Space Mono,monospace;font-size:.9rem;color:#ffffff80;padding:1rem;flex-shrink:0;margin:0}.draw-game{min-height:100vh;background:radial-gradient(ellipse at 50% 0%,rgba(191,0,255,.15) 0%,transparent 50%),#0a0a0f;padding:2rem;display:flex;flex-direction:column;align-items:center}.draw-header{display:flex;align-items:center;gap:2rem;margin-bottom:1.5rem;width:100%;max-width:800px}.draw-title{font-family:Orbitron,sans-serif;font-size:clamp(1.5rem,5vw,2.5rem);font-weight:900;color:#fff;text-shadow:0 0 10px var(--neon-pink),0 0 20px var(--neon-pink);margin:0}.draw-toolbar{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:center;margin-bottom:1.5rem;padding:1rem;background:#0000004d;border:1px solid rgba(255,0,255,.3);max-width:800px;width:100%}.color-picker{display:flex;gap:.5rem}.color-btn{width:36px;height:36px;border:2px solid transparent;border-radius:50%;cursor:pointer;transition:all .2s ease}.color-btn:hover{transform:scale(1.1)}.color-btn.active{border-color:#fff;box-shadow:0 0 15px currentColor}.brush-picker{display:flex;gap:.5rem;align-items:center}.brush-btn{width:40px;height:40px;background:transparent;border:1px solid rgba(255,255,255,.3);border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.brush-btn:hover{border-color:var(--neon-cyan)}.brush-btn.active{border-color:var(--neon-cyan);background:#00ffff1a}.brush-preview{border-radius:50%;transition:all .2s ease}.action-btns{display:flex;gap:.5rem}.action-btn{font-family:Orbitron,sans-serif;font-size:.8rem;padding:.5rem 1rem;background:transparent;border:1px solid var(--neon-pink);color:var(--neon-pink);cursor:pointer;text-transform:uppercase;letter-spacing:.1em;transition:all .3s ease}.action-btn:hover{background:#ff00ff1a;box-shadow:0 0 10px var(--neon-pink)}.action-btn.save{border-color:var(--neon-cyan);color:var(--neon-cyan)}.action-btn.save:hover{background:#00ffff1a;box-shadow:0 0 10px var(--neon-cyan)}.canvas-container{border:2px solid var(--neon-pink);box-shadow:0 0 20px #ff00ff4d,inset 0 0 20px #ff00ff1a}.draw-canvas{display:block;cursor:crosshair;touch-action:none}.draw-hint{font-family:Space Mono,monospace;font-size:.9rem;color:#ffffff80;margin-top:1.5rem}.rhythm-game{min-height:100vh;background:radial-gradient(ellipse at 50% 0%,rgba(191,0,255,.15) 0%,transparent 50%),#0a0a0f;padding:2rem;display:flex;flex-direction:column;align-items:center}.rhythm-header{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;margin-bottom:1.5rem;width:100%;max-width:800px}.rhythm-title{font-family:Orbitron,sans-serif;font-size:clamp(1.2rem,4vw,2rem);font-weight:900;color:#fff;text-shadow:0 0 10px var(--neon-purple),0 0 20px var(--neon-purple);margin:0;flex:1}.rhythm-stats{display:flex;gap:1.5rem;font-family:Orbitron,sans-serif;font-size:.9rem}.stat{text-transform:uppercase}.stat.score{color:var(--neon-pink);text-shadow:0 0 10px var(--neon-pink)}.stat.combo{color:var(--neon-cyan);text-shadow:0 0 10px var(--neon-cyan)}.stat.time{color:var(--neon-purple);text-shadow:0 0 10px var(--neon-purple);min-width:50px}.rhythm-container{position:relative;width:100%;max-width:800px;height:500px;background:#00000080;border:2px solid var(--neon-purple);box-shadow:0 0 20px #bf00ff4d,inset 0 0 20px #bf00ff1a;overflow:hidden}.tap-circle{position:absolute;width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;transition:transform .1s ease;animation:pulse-circle .5s ease-in-out infinite alternate}.tap-circle:hover{transform:translate(-50%,-50%) scale(1.1)!important}.tap-circle:active{transform:translate(-50%,-50%) scale(.9)!important}@keyframes pulse-circle{0%{filter:brightness(1)}to{filter:brightness(1.3)}}.burst-effect{position:absolute;width:80px;height:80px;border-radius:50%;border:3px solid;transform:translate(-50%,-50%);animation:burst .5s ease-out forwards;pointer-events:none}@keyframes burst{0%{transform:translate(-50%,-50%) scale(.5);opacity:1}to{transform:translate(-50%,-50%) scale(2);opacity:0}}.rhythm-overlay{position:absolute;inset:0;background:#0a0a0ff2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}.game-over-text{font-family:Orbitron,sans-serif;font-size:2.5rem;color:var(--neon-purple);text-shadow:0 0 10px var(--neon-purple),0 0 20px var(--neon-purple),0 0 40px var(--neon-purple);margin:0}.final-stats{font-family:Space Mono,monospace;font-size:1.2rem;color:#fffc;text-align:center}.final-stats p{margin:.5rem 0}.final-stats .highlight{color:var(--neon-cyan);text-shadow:0 0 10px var(--neon-cyan)}.start-text{font-family:Space Mono,monospace;font-size:1.2rem;color:#ffffffe6;margin:0}.start-subtext{font-family:Space Mono,monospace;font-size:.9rem;color:#ffffff80;margin:0}.rhythm-btn{font-family:Orbitron,sans-serif;font-size:1rem;padding:1rem 2rem;background:transparent;border:2px solid var(--neon-purple);color:var(--neon-purple);cursor:pointer;text-transform:uppercase;letter-spacing:.2em;transition:all .3s ease;margin-top:1rem}.rhythm-btn:hover{background:#bf00ff1a;box-shadow:0 0 20px var(--neon-purple),inset 0 0 20px #bf00ff1a}.back-btn{font-family:Orbitron,sans-serif;font-size:.9rem;color:var(--neon-cyan);text-decoration:none;padding:.5rem 1rem;border:1px solid var(--neon-cyan);transition:all .3s ease}.back-btn:hover{background:#00ffff1a;box-shadow:0 0 10px var(--neon-cyan)}