*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}[hidden]{display:none!important}:root{--bg-primary: #1a1a1a;--bg-secondary: #222;--bg-card: #2a2a2a;--bg-hover: #333;--text-primary: #e8e8e8;--text-secondary: #999;--text-muted: #666;--accent: #ff5e5b;--accent-hover: #ff403c;--accent-dim: #cc4a48;--border: #333;--border-light: #444;--shadow-sm: 0 1px 3px rgba(0,0,0,.4);--shadow-md: 0 4px 12px rgba(0,0,0,.45);--shadow-lg: 0 12px 32px rgba(0,0,0,.5);--shadow-hover: 0 12px 28px rgba(0,0,0,.6);--radius: 8px;--radius-sm: 6px;--radius-lg: 10px;--radius-pill: 100px;--font-display: "DM Sans", "Segoe UI", sans-serif;--font-body: "Outfit", "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", monospace;--transition: .25s cubic-bezier(.16, 1, .3, 1);--transition-slow: .4s cubic-bezier(.16, 1, .3, 1);--max-width: 1200px;--bg: var(--bg-primary);--text: var(--text-primary);--accent-primary: var(--accent)}html{scroll-behavior:smooth}body{font-family:var(--font-body);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100dvh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::selection{background:#ff5e5b40;color:#fff}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}img{max-width:100%;display:block}button{cursor:pointer;font-family:inherit}a{color:var(--accent);text-decoration:none;transition:color .2s}a:hover{color:var(--accent-hover)}.container{max-width:var(--max-width);margin:0 auto;padding:0 20px}.nav{position:sticky;top:0;z-index:100;background:#141414;border-bottom:1px solid var(--border)}.nav-inner{display:flex;align-items:center;height:56px;max-width:var(--max-width);margin:0 auto;padding:0 20px;gap:24px}.nav-toggle{display:none;background:none;border:none;color:var(--text-secondary);font-size:22px;padding:4px}.nav-logo{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;font-family:var(--font-display);font-size:20px;font-weight:800;color:#fff;letter-spacing:-.5px;text-decoration:none}.nav-logo:hover{color:#fff}.nav-logo-mark{color:var(--accent);font-size:1.1em}.nav-links{display:flex;gap:20px;list-style:none;flex-shrink:0}.nav-links a{color:var(--text-secondary);font-size:14px;font-weight:500;transition:color .2s}.nav-links a:hover,.nav-links a.active{color:#fff}.nav-search{flex:1;max-width:360px;position:relative}.nav-search input{width:100%;height:34px;padding:0 12px 0 34px;border-radius:4px;border:1px solid var(--border);background:#1a1a1a;color:var(--text-primary);font-family:var(--font-body);font-size:13px;outline:none;transition:border-color .2s}.nav-search input::placeholder{color:var(--text-muted)}.nav-search input:focus{border-color:var(--accent)}.nav-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:14px;pointer-events:none}.nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.btn-ghost{color:var(--text-secondary);font-size:13px;font-weight:500;background:none;border:none;padding:6px 12px;border-radius:4px;transition:color .2s,background .2s}.btn-ghost:hover{color:#fff;background:var(--bg-hover)}.btn-primary{display:inline-flex;align-items:center;gap:6px;color:#fff;font-size:13px;font-weight:600;background:var(--accent);padding:6px 16px;border-radius:4px;border:none;transition:background .2s}.btn-primary:hover{background:var(--accent-hover);color:#fff}.sub-nav{position:sticky;top:56px;z-index:90;background:#1e1e1e;border-bottom:1px solid var(--border);overflow-x:auto;-webkit-overflow-scrolling:touch}.sub-nav::-webkit-scrollbar{height:0}.sub-nav-inner{display:flex;align-items:center;gap:6px;padding:8px 20px;max-width:var(--max-width);margin:0 auto;white-space:nowrap}.sub-nav-label{font-size:12px;color:var(--text-muted);font-weight:600;margin-right:4px;flex-shrink:0}.sub-nav-item{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--text-secondary);background:transparent;border:1px solid transparent;transition:all .2s;flex-shrink:0}.sub-nav-item:hover{background:var(--bg-hover);color:#fff}.sub-nav-item.active{background:var(--accent);color:#fff}.sub-nav-divider{width:1px;height:18px;background:var(--border-light);margin:0 6px;flex-shrink:0}.hero{padding:32px 0 24px;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,94,91,.08) 0%,transparent 50%,rgba(100,200,255,.05) 100%);pointer-events:none}.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;position:relative}.hero-featured{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-card);border:1px solid var(--border);transition:border-color .3s,box-shadow .3s;display:block}.hero-featured:hover{border-color:var(--accent-dim);box-shadow:var(--shadow-hover);color:inherit}.hero-featured-media{width:100%;aspect-ratio:16 / 9;overflow:hidden;background:var(--bg-secondary)}.hero-featured-media>*{width:100%;height:100%}.hero-featured:hover .hero-featured-media img,.hero-featured:hover .hero-featured-media svg{transform:scale(1.03);transition:transform .4s ease}.hero-featured-overlay{position:absolute;bottom:0;left:0;right:0;padding:24px;background:linear-gradient(transparent,#000000e0)}.hero-badge{display:inline-block;background:var(--accent);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:3px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.hero-featured-overlay h2{font-family:var(--font-display);font-size:22px;font-weight:700;margin-bottom:4px;line-height:1.2;color:#fff}.hero-featured-overlay p{font-size:14px;color:#ffffffb8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.hero-side{display:flex;flex-direction:column;gap:12px}.hero-side-item{display:grid;grid-template-columns:120px 1fr;gap:14px;background:var(--bg-card);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);transition:all .25s;color:inherit}.hero-side-item:hover{border-color:var(--accent-dim);background:var(--bg-hover);color:inherit}.hero-side-media{width:120px;height:80px;overflow:hidden;background:var(--bg-secondary)}.hero-side-media>*{width:100%;height:100%}.hero-side-info{padding:10px 12px 10px 0;display:flex;flex-direction:column;justify-content:center;min-width:0}.hero-side-info h3{font-family:var(--font-display);font-size:14px;font-weight:600;margin-bottom:2px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero-side-info p{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.game-grid-section{padding:24px 0}.game-grid-section+.game-grid-section{border-top:1px solid var(--border)}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-top:8px}.section-header h2{font-family:var(--font-display);font-size:20px;font-weight:700;color:#fff}.section-header .section-meta{font-size:13px;color:var(--text-secondary)}.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}.game-card{background:var(--bg-card);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);transition:all .25s;display:block;color:inherit}.game-card:hover{border-color:var(--accent-dim);transform:translateY(-3px);box-shadow:var(--shadow-hover);color:inherit}.game-card-img-wrap{position:relative;overflow:hidden;aspect-ratio:315 / 250;background:var(--bg-secondary)}.game-card-img-wrap>img,.game-card-img-wrap>svg{width:100%;height:100%;transition:transform .4s ease}.game-card:hover .game-card-img-wrap>img,.game-card:hover .game-card-img-wrap>svg{transform:scale(1.05)}.game-card-overlay{position:absolute;top:8px;left:8px;display:flex;gap:4px;flex-wrap:wrap}.game-card-tag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:3px;text-transform:uppercase;letter-spacing:.3px;color:#fff}.tag-free{background:#2d8a4e}.tag-new{background:var(--accent)}.tag-demo{background:#8a6d3b}.tag-default{background:#4a6fa5}.game-card-body{padding:12px}.game-card-title{font-family:var(--font-display);font-size:14px;font-weight:600;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}.game-card-badge{font-size:12px;color:var(--text-muted);margin-bottom:6px}.game-card-meta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary);margin-bottom:6px}.game-card-difficulty{color:var(--accent);font-weight:600}.game-card-sep{color:var(--text-muted)}.game-card-control{color:var(--text-secondary)}.game-card-desc{font-size:12px;color:var(--text-muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:8px;min-height:2.9em}.game-card-platforms{display:flex;gap:4px}.game-card-platforms span{font-size:10px;color:var(--text-muted);border:1px solid var(--border-light);padding:1px 6px;border-radius:3px}.footer{margin-top:48px;background:#111;border-top:1px solid var(--border);padding:48px 0 32px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:32px;margin-bottom:32px}.footer-brand .footer-logo{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:18px;font-weight:800;color:#fff;letter-spacing:-.5px}.footer-brand .nav-logo-mark{color:var(--accent)}.footer-brand p{font-size:13px;color:var(--text-muted);line-height:1.6;margin-top:8px}.footer-col h4{font-family:var(--font-display);font-size:13px;font-weight:600;color:#fff;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}.footer-col a{display:block;font-size:13px;color:var(--text-muted);padding:4px 0;transition:color .2s}.footer-col a:hover{color:#fff}.footer-bottom{border-top:1px solid var(--border);padding-top:20px;margin-top:20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}.footer-bottom p,.footer-record{font-size:12px;color:var(--text-muted)}.footer-record:hover{color:var(--accent)}.footer-social{display:flex;gap:12px}.footer-social a{color:var(--text-muted);font-size:14px;transition:color .2s}.footer-social a:hover{color:var(--accent)}.home-empty{padding:60px 20px;text-align:center;color:var(--text-secondary)}.game-page{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}.game-page-header{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;border-bottom:1px solid var(--border-light);background:var(--bg-card);flex-shrink:0}.game-page-back{display:inline-flex;align-items:center;gap:.25rem;font-size:.8125rem;font-weight:500;color:var(--text-secondary);text-decoration:none;padding:.375rem .75rem;border-radius:8px;border:1px solid var(--border-light);transition:all var(--transition)}.game-page-back:hover{background:var(--bg);color:var(--text)}.game-page-title{font-family:var(--font-display);font-weight:600;font-size:1rem;letter-spacing:-.01em;color:var(--text);flex:1}.game-page-actions{display:flex;gap:.375rem}.modal-btn{background:transparent;border:1px solid var(--border-light);color:var(--text-secondary);width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition)}.modal-btn:hover{background:var(--bg);color:var(--text)}.modal-restart:hover{background:var(--bg-hover);border-color:var(--border-light);color:var(--accent)}.game-page-body{flex:1;overflow-y:auto;padding:1.25rem;display:flex;justify-content:center}.game-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;height:280px;color:var(--text-muted);font-size:.8125rem}.loading-spinner{width:28px;height:28px;border:2px solid var(--border-light);border-top-color:var(--accent-primary);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.game-container{width:100%;min-height:380px;display:flex;align-items:center;justify-content:center}.game-page-fullscreen{position:fixed;inset:0;z-index:1000;background:#000}.game-page-fullscreen .game-page-body{padding:0}.game-page-fullscreen .game-container{width:100%;height:100%;min-height:100%}.fullscreen-close{position:fixed;top:12px;right:12px;z-index:1001;width:40px;height:40px;border-radius:50%;background:#00000080;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s,transform .2s}.fullscreen-close:hover{background:#fff3;transform:scale(1.1)}.game-page-404{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg)}.game-page-404-inner{text-align:center;color:var(--text)}.game-page-404-icon{font-size:3rem;margin-bottom:1rem}.game-page-404 h2{font-family:var(--font-display);font-size:1.5rem;margin-bottom:.5rem}.game-page-404 p{color:var(--text-secondary);font-size:.875rem;margin-bottom:1.5rem}.game-wrapper{width:100%;height:100%;display:flex;flex-direction:column;align-items:center}.game-canvas{border-radius:var(--radius-sm);border:1px solid var(--border-light);background:var(--bg-secondary);max-width:100%}.game-hud{display:flex;align-items:center;gap:1.5rem;margin-bottom:.75rem;font-family:var(--font-mono);font-size:.8125rem;color:var(--text-secondary)}.game-hud-item{display:flex;align-items:center;gap:.375rem}.game-hud-label{color:var(--text-muted)}.game-hud-value{color:var(--text);font-weight:600}.game-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#1a1a1aeb;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:var(--radius-sm);z-index:10;gap:.75rem}.game-overlay-title{font-family:var(--font-display);font-size:1.375rem;font-weight:700;color:var(--text)}.game-overlay-score{font-family:var(--font-mono);font-size:2rem;color:var(--accent-primary)}.game-overlay-sub{color:var(--text-secondary);font-size:.875rem}.game-overlay-btn{padding:.625rem 1.75rem;border-radius:var(--radius-pill);background:var(--accent-primary);border:none;color:#fff;font-family:var(--font-display);font-weight:600;font-size:.8125rem;letter-spacing:.02em;cursor:pointer;transition:all var(--transition);margin-top:.25rem}.game-overlay-btn:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.sd-joystick{display:none}@media(max-width:968px){.hero-grid{grid-template-columns:1fr}.hero-side{display:grid;grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr;gap:24px}.footer-grid .footer-brand{grid-column:1 / -1}.game-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}@media(max-width:768px){.nav-links{display:none}.nav-toggle{display:block}.nav-search{max-width:none}.hero-side{grid-template-columns:1fr}.game-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.footer-grid{grid-template-columns:1fr 1fr}.footer-bottom{flex-direction:column;text-align:center}.hero-featured-overlay h2{font-size:18px}}@media(max-width:480px){.game-grid{grid-template-columns:repeat(2,1fr);gap:10px}.game-card-body{padding:8px}.game-card-title{font-size:12px}.nav-inner{padding:0 12px;gap:12px}.container{padding:0 12px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}