:root{color-scheme:dark;font-family:Segoe UI,ui-sans-serif,system-ui,-apple-system,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:#0a0a1a;color:#fafafa;overflow-x:hidden}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes glow{0%,to{filter:brightness(1) drop-shadow(0 0 4px currentColor)}50%{filter:brightness(1.3) drop-shadow(0 0 12px currentColor)}}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.9}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes rainbow{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes starTwinkle{0%,to{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}@keyframes laserShoot{0%{width:0}to{width:100%}}@keyframes celebrate{0%{transform:scale(1)}25%{transform:scale(1.1) rotate(-2deg)}50%{transform:scale(1.15) rotate(2deg)}75%{transform:scale(1.1) rotate(-1deg)}to{transform:scale(1)}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.app{min-height:100vh;display:flex;flex-direction:column}.header{background:linear-gradient(135deg,#1a1a3e,#2a1a4e);border-bottom:2px solid rgba(255,255,255,.1);padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.header-left{display:flex;align-items:center;gap:1rem}.logo{font-size:2rem;animation:glow 2s ease-in-out infinite}.header h1{font-size:1.4rem;font-weight:700;background:linear-gradient(90deg,#ff6b6b,#ffd93d,#6bcb77,#4d96ff,#9b59b6);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 3s linear infinite}.header-stats{display:flex;gap:1.5rem;align-items:center}.stat{display:flex;align-items:center;gap:.4rem;font-size:.95rem;color:#fffc}.stat-icon{font-size:1.2rem}.stat-value{font-weight:700;color:#ffd93d}.back-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:.5rem 1rem;border-radius:.5rem;cursor:pointer;font-size:.9rem;transition:all .2s;display:flex;align-items:center;gap:.4rem}.back-btn:hover{background:#fff3;transform:translate(-2px)}.main-menu{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;background:radial-gradient(ellipse at center,#1a1a3e,#0a0a1a 70%)}.menu-title{text-align:center;margin-bottom:.5rem;animation:fadeIn .8s ease-out}.menu-title h2{font-size:2.8rem;font-weight:800;background:linear-gradient(135deg,#ff6b6b,#ffd93d,#6bcb77,#4d96ff,#9b59b6,#ff6b6b);background-size:300% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 4s linear infinite;text-shadow:0 0 40px rgba(255,215,0,.3)}.menu-subtitle{color:#fff9;font-size:1.1rem;margin-top:.5rem;margin-bottom:2.5rem}.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;max-width:1000px;width:100%;animation:fadeIn 1s ease-out .2s both}.game-card{background:linear-gradient(145deg,#ffffff14,#ffffff05);border:1px solid rgba(255,255,255,.1);border-radius:1rem;padding:1.5rem;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.game-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:1rem 1rem 0 0}.game-card:hover{transform:translateY(-4px);border-color:#ffffff40;box-shadow:0 12px 40px #0006}.game-card-icon{font-size:2.5rem;margin-bottom:.8rem;display:block}.game-card h3{font-size:1.2rem;font-weight:700;margin-bottom:.4rem;color:#fff}.game-card p{font-size:.85rem;color:#ffffff8c;line-height:1.5}.game-card-difficulty{display:inline-block;margin-top:.8rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;padding:.2rem .6rem;border-radius:1rem;font-weight:600}.diff-easy{background:#6bcb7733;color:#6bcb77}.diff-medium{background:#ffd93d33;color:#ffd93d}.diff-hard{background:#ff6b6b33;color:#ff6b6b}.card-sunlight:before{background:linear-gradient(90deg,#ffd93d,#ff9a3c)}.card-sunlight:hover{border-color:#ffd93d66}.card-rainbow:before{background:linear-gradient(90deg,#ff6b6b,#ffd93d,#6bcb77,#4d96ff,#9b59b6)}.card-rainbow:hover{border-color:#9b59b666}.card-laser:before{background:linear-gradient(90deg,red,#0f0,#00f)}.card-laser:hover{border-color:#f006}.card-neon:before{background:linear-gradient(90deg,#f0f,#0ff,#f0f)}.card-neon:hover{border-color:#f0f6}.card-stars:before{background:linear-gradient(90deg,#fff,gold,#fff)}.card-stars:hover{border-color:#ffd70066}.game-container{flex:1;display:flex;flex-direction:column;align-items:center;padding:2rem;animation:fadeIn .5s ease-out}.game-header{text-align:center;margin-bottom:1.5rem}.game-header h2{font-size:1.8rem;font-weight:700;margin-bottom:.3rem}.game-header p{color:#fff9;font-size:.95rem}.game-area{max-width:700px;width:100%}.color-match-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.5rem}.color-swatch{aspect-ratio:1;border-radius:.75rem;cursor:pointer;border:3px solid transparent;transition:all .3s ease;display:flex;align-items:center;justify-content:center;font-size:2rem;position:relative}.color-swatch:hover{transform:scale(1.05);box-shadow:0 8px 25px #0006}.color-swatch.selected{border-color:#fff;transform:scale(1.08);box-shadow:0 0 20px #ffffff4d}.color-swatch.matched{opacity:.4;pointer-events:none;transform:scale(.95)}.color-swatch.correct-flash{animation:celebrate .5s ease}.color-swatch.wrong-flash{animation:shake .4s ease}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}.match-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding:1rem;background:#ffffff0d;border-radius:.75rem}.match-info span{font-size:.95rem;color:#ffffffb3}.laser-grid{display:grid;gap:0;margin-bottom:1.5rem;border:2px solid rgba(255,255,255,.15);border-radius:.75rem;overflow:hidden;background:#0d0d2b}.laser-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid rgba(255,255,255,.05);transition:all .2s;font-size:1.4rem;position:relative}.laser-cell:hover{background:#ffffff14}.laser-cell .mirror{font-size:1.6rem;transition:transform .3s ease}.laser-cell.laser-path{background:#ff000026;box-shadow:inset 0 0 15px #f003}.laser-cell.laser-path:after{content:"";position:absolute;width:60%;height:60%;background:radial-gradient(circle,rgba(255,0,0,.6),transparent);border-radius:50%}.laser-cell.target-hit{background:#0f03;box-shadow:inset 0 0 20px #00ff004d;animation:pulse 1s ease infinite}.laser-controls{display:flex;gap:1rem;justify-content:center;margin-bottom:1rem}.laser-btn{background:linear-gradient(135deg,#f003,#ff00001a);border:1px solid rgba(255,0,0,.3);color:#ff6b6b;padding:.6rem 1.5rem;border-radius:.5rem;cursor:pointer;font-size:.9rem;font-weight:600;transition:all .2s}.laser-btn:hover{background:linear-gradient(135deg,#ff00004d,#f003);transform:translateY(-2px)}.neon-grid{display:grid;gap:.5rem;margin-bottom:1.5rem}.neon-cell{aspect-ratio:1;border-radius:.5rem;cursor:pointer;border:2px solid rgba(255,255,255,.1);transition:all .3s ease;display:flex;align-items:center;justify-content:center;font-size:1.8rem;background:#0000004d}.neon-cell.lit{border-color:#ffffff80;box-shadow:0 0 15px var(--glow-color),inset 0 0 10px var(--glow-color)}.neon-cell:hover{transform:scale(1.05)}.star-field{position:relative;width:100%;aspect-ratio:16/9;background:radial-gradient(ellipse at center,#0d0d2b,#050510);border-radius:1rem;border:1px solid rgba(255,255,255,.1);overflow:hidden;margin-bottom:1.5rem;cursor:crosshair}.star-field svg{position:absolute;top:0;left:0;width:100%;height:100%}.star-point{position:absolute;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle,gold,#fa0);transform:translate(-50%,-50%);cursor:pointer;transition:all .3s;z-index:2;box-shadow:0 0 10px #ffd70080}.star-point:hover{transform:translate(-50%,-50%) scale(1.4);box-shadow:0 0 20px #ffd700cc}.star-point.connected{background:radial-gradient(circle,#0f8,#0c6);box-shadow:0 0 15px #0f89}.star-point.selected{background:radial-gradient(circle,#ff6b6b,#f44);box-shadow:0 0 20px #ff6b6bcc;transform:translate(-50%,-50%) scale(1.3)}.constellation-line{stroke:#ffd70066;stroke-width:2;stroke-dasharray:5,5}.constellation-line.complete{stroke:#0f89;stroke-dasharray:none;stroke-width:2.5}.path-grid{display:grid;gap:0;margin-bottom:1.5rem;border:2px solid rgba(255,255,255,.1);border-radius:.75rem;overflow:hidden}.path-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:1.2rem;border:1px solid rgba(255,255,255,.05);transition:all .3s;cursor:pointer;background:#0a0a1a}.path-cell.dark{background:#050510}.path-cell.lit{background:#ffd70026;box-shadow:inset 0 0 20px #ffd70033}.path-cell.path{background:#64c8ff1a}.path-cell.player{background:#00c8ff4d;box-shadow:0 0 15px #00c8ff66}.path-cell.goal{background:#ffd70033;animation:pulse 1.5s ease infinite}.path-cell.wall{background:#1a1a2e;cursor:default}.btn{padding:.7rem 1.5rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.2);background:#ffffff1a;color:#fff;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s}.btn:hover{background:#fff3;transform:translateY(-2px)}.btn-primary{background:linear-gradient(135deg,#4d96ff,#3a7bd5);border-color:#4d96ff66}.btn-primary:hover{background:linear-gradient(135deg,#5ea0ff,#4d96ff)}.btn-success{background:linear-gradient(135deg,#6bcb77,#5ab86a);border-color:#6bcb7766}.btn-danger{background:linear-gradient(135deg,#ff6b6b,#e55a5a);border-color:#ff6b6b66}.fact-box{background:linear-gradient(135deg,#4d96ff1a,#9b59b61a);border:1px solid rgba(77,150,255,.2);border-radius:.75rem;padding:1.2rem;margin-top:1.5rem;display:flex;gap:.8rem;align-items:flex-start}.fact-icon{font-size:1.5rem;flex-shrink:0}.fact-text{font-size:.9rem;color:#fffc;line-height:1.6}.fact-text strong{color:#4d96ff}.victory-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:200;animation:fadeIn .3s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.victory-card{background:linear-gradient(145deg,#1a1a3e,#2a1a4e);border:2px solid rgba(255,215,0,.3);border-radius:1.5rem;padding:2.5rem;text-align:center;max-width:400px;width:90%;animation:celebrate .6s ease}.victory-card h2{font-size:2rem;margin-bottom:.5rem;color:#ffd93d}.victory-card .stars{font-size:2.5rem;margin:1rem 0;letter-spacing:.3rem}.victory-card p{color:#ffffffb3;margin-bottom:1.5rem}.victory-card .score-display{font-size:1.3rem;color:#ffd93d;font-weight:700;margin-bottom:1.5rem}.progress-bar{width:100%;height:8px;background:#ffffff1a;border-radius:4px;overflow:hidden;margin-bottom:1rem}.progress-fill{height:100%;border-radius:4px;transition:width .5s ease;background:linear-gradient(90deg,#6bcb77,#ffd93d)}@media(max-width:640px){.header{padding:.8rem 1rem;flex-wrap:wrap;gap:.5rem}.header h1{font-size:1rem}.menu-title h2{font-size:1.8rem}.games-grid{grid-template-columns:1fr}.color-match-grid{grid-template-columns:repeat(3,1fr)}.game-container{padding:1rem}}