*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#07070c;--surface:#ffffff06;--surface2:#ffffff0a;--surface3:#ffffff12;--border:#ffffff0f;--text:#ecedf4;--text2:#6e7092;--accent:#7c6cf0;--accent2:#a8a0ff;--accent-glow:#7c6cf02e;--green:#34d399;--orange:#fbbf24;--pink:#f472b6;--red:#f87171;--radius:18px;--radius-sm:12px}html{scroll-behavior:smooth}body{color:var(--text);background:#07070c;min-height:100vh;font-family:Outfit,sans-serif;overflow-x:hidden}body:after{content:"";z-index:-1;pointer-events:none;background:radial-gradient(55% 45% at 12% 15%,#7c6cf00f 0%,#0000 70%),radial-gradient(45% 55% at 85% 75%,#f472b60b 0%,#0000 65%),radial-gradient(60% 35% at 55% 95%,#34d39909 0%,#0000 55%),radial-gradient(30% 30% at 70% 10%,#fbbf2406 0%,#0000 50%);position:fixed;inset:0}body.grid-theme{background:#040806}body.grid-theme:after{background:repeating-linear-gradient(0deg,#0000,#0000 49px,#22c55e0f 49px 50px) 0 0/50px 50px,repeating-linear-gradient(90deg,#0000,#0000 49px,#22c55e0f 49px 50px) 0 0/50px 50px,repeating-linear-gradient(0deg,#0000,#0000 199px,#ffffff09 199px 200px) 0 0/200px 200px,repeating-linear-gradient(90deg,#0000,#0000 199px,#ffffff09 199px 200px) 0 0/200px 200px,repeating-linear-gradient(0deg,#0000,#0000 199px,#22c55e1a 199px 200px) 0 0/200px 200px,repeating-linear-gradient(90deg,#0000,#0000 199px,#22c55e1a 199px 200px) 0 0/200px 200px,radial-gradient(60% 50% at 50% 35%,#22c55e0d 0%,#0000 65%) 0 0/100% 100%,radial-gradient(80% 80%,#0000 40%,#0000004d 100%) 0 0/100% 100%}body.grid-theme .hero:before{background:radial-gradient(circle,#22c55e14 0%,#ffffff05 40%,#0000 65%)}body.grid-theme .cat-pill.active{background:#22c55e;border-color:#22c55e;box-shadow:0 4px 18px #22c55e40}body.grid-theme .game-card:hover{border-color:#22c55e4d;box-shadow:0 20px 50px #0000004d,0 0 0 1px #22c55e26}body.grid-theme .game-over-overlay h3{background:linear-gradient(135deg,#22c55e,#86efac);-webkit-text-fill-color:transparent;-webkit-background-clip:text}body.grid-theme .game-over-overlay button,body.grid-theme .level-select .diff-btn:hover{background:#22c55e}body.grid-theme .hero h1 em{background:linear-gradient(135deg,#86efac 0%,#22c55e 50%,#fff 100%);-webkit-text-fill-color:transparent;background-size:200%;-webkit-background-clip:text;animation:5s ease-in-out infinite alternate titleShimmer}body.grid-theme .logo{background:linear-gradient(135deg,#86efac,#fff);-webkit-text-fill-color:transparent;-webkit-background-clip:text}body.grid-theme .game-hud .score{color:#22c55e}body.grid-theme .tag.t-puzzle{color:#34d399;border-color:#34d39926}body.grid-theme .tag.t-arcade{color:#86efac;border-color:#86efac1f}body.grid-theme .card-body h3{color:#e8f5e9}body.grid-theme .game-card:after{background:linear-gradient(160deg,#22c55e0f 0%,#0000 40%)}body.light-theme{--bg:#f0f0f8;--surface:#0000000a;--surface2:#0000000f;--surface3:#00000017;--border:#00000017;--text:#18181f;--text2:#6b6d8a;--accent:#6c5ce7;--accent2:#8b7cf8;--accent-glow:#6c5ce726;--green:#059669;--orange:#d97706;--pink:#db2777;--red:#dc2626;color:var(--text);background:#f0f0f8}body.light-theme:before{opacity:.009}body.light-theme:after{background:radial-gradient(55% 45% at 12% 15%,#6c5ce70f 0%,#0000 70%),radial-gradient(45% 55% at 85% 75%,#db27770a 0%,#0000 65%)}body.light-theme header{background:#f0f0f8e0;border-bottom-color:#00000014}body.light-theme .logo{background:linear-gradient(135deg,#6c5ce7,#059669);-webkit-text-fill-color:transparent;-webkit-background-clip:text}body.light-theme .logo span{-webkit-text-fill-color:var(--text2)}body.light-theme .theme-switcher{background:#0000000d;border-color:#0000001a}body.light-theme .theme-btn:hover{background:#00000014}body.light-theme .theme-btn.active{background:var(--accent);color:#fff}body.light-theme .sound-btn{color:var(--text2);background:#0000000a;border-color:#00000017}body.light-theme .sound-btn:hover{background:#00000014}body.light-theme .game-card{background:#ffffffbf;border-color:#00000014;box-shadow:0 2px 12px #00000012}body.light-theme .game-card:hover{border-color:#6c5ce74d;box-shadow:0 20px 50px #0000001f,0 0 0 1px #6c5ce726}body.light-theme .game-card:after{background:linear-gradient(160deg,#fff9 0%,#0000 40%)}body.light-theme .card-thumb:before{background:linear-gradient(#0000 50%,#ffffff26 100%)}body.light-theme .card-emoji{filter:drop-shadow(0 0 6px #ffffffe6)drop-shadow(0 2px 10px #00000080)}body.light-theme .card-body h3{color:var(--text)}body.light-theme .card-body p{color:var(--text2)}body.light-theme .tag.t-puzzle{color:#059669;background:#05966912;border-color:#05966926}body.light-theme .tag.t-arcade{color:#db2777;background:#db277712;border-color:#db27771f}body.light-theme .tag.t-strategy{color:#d97706;background:#d9770612;border-color:#d977061f}body.light-theme .tag.t-classic{color:#6c5ce7;background:#6c5ce712;border-color:#6c5ce71f}body.light-theme .cat-pill{color:var(--text);background:#00000012;border-color:#0000002e}body.light-theme .cat-pill:hover{color:var(--text);background:#0000001f;border-color:#0000004d}body.light-theme .hero p{color:var(--text2)}body.light-theme .hero h1{color:var(--text)}body.light-theme footer{color:var(--text2);border-top-color:#00000012}body.light-theme footer button{color:var(--text2);background:#0000000a;border-color:#0000001a}body.light-theme .modal{background:#f7f7fc;border-color:#00000017}body.light-theme .modal-header{border-bottom-color:#00000012}body.light-theme .modal-footer{border-top-color:#0000000f}body.light-theme .modal-footer kbd{background:#0000000d;border-color:#0000001a}body.light-theme .modal-close{color:var(--text2);background:#0000000d;border-color:#00000017}body.light-theme .modal-game{background:#ececf5}body.light-theme .game-over-overlay,.light-theme .level-select{background:#f0f0f8f0}body.light-theme .level-select .diff-btn{color:var(--text);background:#0000000a;border-color:#00000014}body.light-theme .level-select .diff-btn:hover{background:#00000012}body.light-theme ::-webkit-scrollbar-thumb{background:#0000001f}body.light-theme ::-webkit-scrollbar-thumb:hover{background:#0003}.grid-theme-bg{display:none}body:before{content:"";z-index:9999;pointer-events:none;opacity:.018;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#ffffff24}header{z-index:100;-webkit-backdrop-filter:blur(20px);background:#07070cd9;border-bottom:1px solid #ffffff0f;justify-content:space-between;align-items:center;height:58px;padding:0 2rem;display:flex;position:sticky;top:0}.logo{background:linear-gradient(135deg,#b8b0ff,#34d399);-webkit-text-fill-color:transparent;letter-spacing:3px;-webkit-background-clip:text;font-family:Space Mono,monospace;font-size:1.15rem;font-weight:700}.logo span{-webkit-text-fill-color:var(--text2);letter-spacing:1.5px;margin-left:.5rem;font-size:.68rem;font-weight:400}.header-actions{align-items:center;gap:.5rem;display:flex}.theme-switcher{background:#ffffff0a;border:1px solid #ffffff12;border-radius:10px;align-items:center;gap:1px;padding:2px;display:flex}.theme-btn{color:var(--text2);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:8px;align-items:center;gap:5px;padding:5px 11px;font-family:Outfit;font-size:.8rem;transition:all .2s;display:flex}.theme-btn:hover{color:var(--text);background:#ffffff12}.theme-btn.active{background:var(--accent);color:#fff;box-shadow:0 2px 10px #7c6cf04d}.theme-icon{font-size:.85rem;line-height:1}@media (width<=600px){.theme-label{display:none}.theme-btn{padding:6px 8px}}.sound-btn{color:var(--text2);cursor:pointer;background:#ffffff0a;border:1px solid #ffffff0f;border-radius:9px;align-items:center;gap:5px;padding:5px 12px;font-family:Outfit;font-size:.8rem;transition:all .2s;display:flex}.sound-btn:hover{color:var(--text);background:#ffffff14;border-color:#ffffff1a}.hero{text-align:center;padding:2.5rem 2rem 1.5rem;position:relative}.hero:before{content:"";pointer-events:none;background:radial-gradient(circle,#7c6cf00d 0%,#f472b606 35%,#0000 65%);width:600px;height:600px;animation:10s ease-in-out infinite alternate heroPulse;position:absolute;top:-250px;left:50%;transform:translate(-50%)}@keyframes heroPulse{0%{transform:translate(-50%)scale(1)}to{transform:translate(-50%)scale(1.12)}}.hero h1{letter-spacing:-1.5px;margin-bottom:.6rem;font-size:clamp(1.6rem,4vw,2.6rem);font-weight:800;line-height:1.1;position:relative}.hero h1 em{background:linear-gradient(135deg,#b8b0ff 0%,#f472b6 45%,#fbbf24 100%);-webkit-text-fill-color:transparent;background-size:200%;-webkit-background-clip:text;font-style:normal;animation:5s ease-in-out infinite alternate titleShimmer}@keyframes titleShimmer{0%{background-position:0%}to{background-position:100%}}.hero p{color:var(--text2);letter-spacing:.2px;max-width:400px;margin:0 auto 1.2rem;font-size:.88rem;font-weight:300;line-height:1.5}.categories{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:2.5rem;padding:0 1rem;display:flex}.cat-pill{color:var(--text);cursor:pointer;letter-spacing:.2px;background:#ffffff14;border:1px solid #ffffff2e;border-radius:100px;padding:8px 20px;font-family:Outfit;font-size:.85rem;font-weight:500;transition:all .2s cubic-bezier(.16,1,.3,1)}.cat-pill:hover{color:#fff;background:#ffffff24;border-color:#ffffff4d;transform:translateY(-1px);box-shadow:0 4px 12px #0000004d}.cat-pill.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 4px 20px var(--accent-glow);font-weight:600}.grid-section{max-width:1200px;margin:0 auto;padding:0 1.5rem 5rem}.game-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;display:grid}.game-card{border-radius:var(--radius);cursor:pointer;background:#ffffff08;border:1px solid #ffffff0f;transition:all .35s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}.game-card:after{content:"";border-radius:var(--radius);pointer-events:none;opacity:0;background:linear-gradient(160deg,#ffffff0d 0%,#0000 40%);transition:opacity .35s;position:absolute;inset:0}.game-card:hover:after{opacity:1}.game-card:hover{border-color:#7c6cf040;transform:translateY(-6px);box-shadow:0 20px 50px #0000004d,0 0 0 1px #7c6cf01a}.card-thumb{justify-content:center;align-items:center;height:140px;font-size:3.5rem;display:flex;position:relative;overflow:hidden}.card-thumb:before{content:"";z-index:1;background:linear-gradient(#0000 30%,#07070cd9 100%);position:absolute;inset:0}.card-emoji{z-index:2;filter:drop-shadow(0 2px 8px #000000b3);line-height:1;transition:transform .35s cubic-bezier(.16,1,.3,1);display:block;position:relative}.game-card:hover .card-emoji{transform:scale(1.12)}.card-body{z-index:2;padding:1.1rem 1.2rem;position:relative}.card-body h3{letter-spacing:-.2px;margin-bottom:.25rem;font-size:1rem;font-weight:700}.card-body p{color:var(--text2);margin-bottom:.65rem;font-size:.78rem;line-height:1.45}.card-tags{flex-wrap:wrap;gap:.35rem;display:flex}.tag{border:1px solid #0000;border-radius:100px;padding:2px 9px;font-size:.66rem;font-weight:500}.tag.t-puzzle{color:var(--green);background:#34d3990f;border-color:#34d3991a}.tag.t-arcade{color:var(--pink);background:#f472b60f;border-color:#f472b61a}.tag.t-strategy{color:var(--orange);background:#fbbf240f;border-color:#fbbf241a}.tag.t-classic{color:var(--accent2);background:#a8a0ff0f;border-color:#a8a0ff1a}.modal-overlay{z-index:200;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:0;background:#000000b3;justify-content:center;align-items:center;padding:1rem;transition:opacity .3s;display:none;position:fixed;inset:0}.modal-overlay.open{opacity:1;display:flex}.modal{background:#0e0e16;border:1px solid #ffffff0f;border-radius:22px;flex-direction:column;width:100%;max-width:720px;max-height:95vh;animation:.4s cubic-bezier(.16,1,.3,1) modalIn;display:flex;overflow:hidden;box-shadow:0 40px 100px #00000080}@keyframes modalIn{0%{opacity:0;transform:scale(.94)translateY(14px)}to{opacity:1;transform:none}}.modal-header{border-bottom:1px solid #ffffff0d;justify-content:space-between;align-items:center;padding:.9rem 1.4rem;display:flex}.modal-header h2{letter-spacing:-.3px;font-size:1.1rem;font-weight:700}.modal-close{width:32px;height:32px;color:var(--text2);cursor:pointer;background:#ffffff0a;border:1px solid #ffffff0f;border-radius:50%;justify-content:center;align-items:center;font-size:1rem;transition:all .2s;display:flex}.modal-close:hover{background:var(--red);border-color:var(--red);color:#fff}.modal-game{background:var(--bg);flex:1;justify-content:center;align-items:center;min-height:400px;display:flex;position:relative}.modal-game canvas{object-fit:contain;max-width:100%;max-height:70vh;image-rendering:pixelated;border-radius:6px;margin:0 auto;display:block;box-shadow:0 4px 18px #00000080}.modal-footer{color:var(--text2);border-top:1px solid #ffffff0a;align-items:center;gap:.8rem;padding:.65rem 1.4rem;font-size:.78rem;display:flex}.modal-footer kbd{background:#ffffff0a;border:1px solid #ffffff12;border-radius:5px;padding:2px 7px;font-family:Space Mono,monospace;font-size:.7rem;display:inline-block}.game-hud{color:var(--text2);pointer-events:none;z-index:5;justify-content:space-between;font-family:Space Mono,monospace;font-size:.85rem;display:flex;position:absolute;top:10px;left:12px;right:12px}.game-hud .score{color:var(--green)}.game-hud .level{color:var(--orange)}.game-over-overlay,.level-select{z-index:10;background:#07070ce6;flex-direction:column;justify-content:center;align-items:center;gap:1rem;display:flex;position:absolute;inset:0}.level-select{gap:1rem;padding:2rem;overflow-y:auto}.level-select h3{margin-bottom:.5rem;font-size:1.4rem;font-weight:700}.level-select .diff-sub{color:var(--text2);margin-bottom:.75rem;font-size:.8rem}.level-select .diff-buttons{flex-direction:column;gap:.6rem;width:100%;max-width:300px;display:flex}.level-select .diff-btn{border-radius:var(--radius-sm);color:var(--text);cursor:pointer;background:#ffffff06;border:2px solid #ffffff0d;justify-content:space-between;align-items:center;padding:16px 24px;font-family:Outfit;font-size:1rem;font-weight:600;transition:all .25s;display:flex}.level-select .diff-btn:hover{background:#ffffff0a;transform:translateY(-2px);box-shadow:0 8px 24px #0000004d}.level-select .diff-btn .diff-progress{opacity:.5;font-size:.75rem;font-weight:400}.game-over-overlay h3{background:linear-gradient(135deg,var(--accent),var(--pink));-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.8rem;font-weight:800}.game-over-overlay p{color:var(--text2)}.game-over-overlay button{border-radius:var(--radius-sm);background:var(--accent);color:#fff;cursor:pointer;border:none;padding:10px 28px;font-family:Outfit;font-size:.95rem;font-weight:600;transition:all .2s}.game-over-overlay button:hover{background:var(--accent2);transform:scale(1.04)}.mobile-controls{border-top:1px solid #ffffff0a;justify-content:center;gap:.5rem;padding:.7rem 1.4rem .9rem;display:none}@media (width<=768px){.mobile-controls{display:flex}}.mobile-controls button{width:48px;height:48px;color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:#ffffff0a;border:1px solid #ffffff0f;border-radius:10px;justify-content:center;align-items:center;font-size:1.2rem;transition:all .15s;display:flex}.mobile-controls button:active{background:var(--accent);border-color:var(--accent);transform:scale(.9)}.mobile-controls .spacer{width:10px}footer{text-align:center;color:var(--text2);letter-spacing:.3px;border-top:1px solid #ffffff08;padding:3rem 2rem;font-size:.8rem}.footer-links{flex-wrap:wrap;justify-content:center;gap:1.5rem;display:flex}.footer-btn{color:var(--text2);cursor:pointer;background:0 0;border:none;font-family:Outfit;font-size:.85rem;transition:all .25s}.footer-btn:hover{color:var(--text);transform:translateY(-1px)}@keyframes fadeUp{0%{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}.game-card{animation:.55s cubic-bezier(.16,1,.3,1) both fadeUp}.game-card:nth-child(2){animation-delay:40ms}.game-card:nth-child(3){animation-delay:80ms}.game-card:nth-child(4){animation-delay:.12s}.game-card:nth-child(5){animation-delay:.16s}.game-card:nth-child(6){animation-delay:.2s}.game-card:nth-child(7){animation-delay:.24s}.game-card:nth-child(8){animation-delay:.28s}.game-card:nth-child(9){animation-delay:.32s}.game-card:nth-child(10){animation-delay:.36s}.game-card:nth-child(11){animation-delay:.4s}.game-card:nth-child(12){animation-delay:.44s}.game-card:nth-child(13){animation-delay:.48s}.game-card:nth-child(14){animation-delay:.52s}@media (width<=768px){header{height:50px;padding:0 1rem}.hero{padding:2rem 1rem 1rem}.hero h1{letter-spacing:-1.5px;font-size:3.5rem;line-height:1.1}.hero p{margin-bottom:1rem;font-size:.82rem}.categories{gap:.35rem;margin-bottom:2rem;padding:0 .5rem}.cat-pill{padding:6px 14px;font-size:.78rem}.grid-section{padding:0 .75rem 3rem}.game-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.7rem}.card-thumb{height:110px;font-size:2.5rem}.card-body{padding:.85rem}.card-body h3{font-size:.95rem}.card-body p{font-size:.75rem}.modal{border-radius:16px;max-height:98vh}.modal-overlay{padding:.5rem}.modal-header,.modal-footer{padding:.7rem 1rem}.modal-game{min-height:300px}}@media (width<=400px){.game-grid{grid-template-columns:1fr}.hero h1{font-size:2.8rem}.theme-btn,.sound-btn{padding:4px 8px;font-size:.75rem}.logo{font-size:1rem}}