:root{--bg-primary: #1a1a22;--bg-secondary: #15151c;--bg-tertiary: #252530;--bg-elevated: #2a2a38;--text-primary: #f5f0e8;--text-secondary: #c4bdb0;--text-muted: #7d776a;--accent: #f59e6b;--accent-hover: #fbb896;--accent-glow: rgba(245, 158, 107, .15);--accent-secondary: #e17055;--border: #3a3a48;--border-subtle: #2a2a35;--font-display: "Fraunces", Georgia, serif;--font-body: "Lexend", -apple-system, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-body);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;min-height:100vh}.games-view{min-height:100vh;display:flex;flex-direction:column}.games-header{display:flex;align-items:center;justify-content:space-between;padding:20px 32px;border-bottom:1px solid var(--border-subtle);background:var(--bg-secondary)}.games-logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text-primary)}.logo-icon{width:36px;height:36px;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-secondary) 100%);border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--bg-primary);box-shadow:0 4px 12px #f59e6b40}.games-logo span{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-.02em}.games-title{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--accent)}.header-link{color:var(--text-secondary);text-decoration:none;font-size:14px;padding:8px 16px;border-radius:8px;transition:all .2s}.header-link:hover{color:var(--text-primary);background:var(--bg-tertiary)}.games-main{flex:1;padding:48px 32px;max-width:1200px;margin:0 auto;width:100%}.games-intro{text-align:center;margin-bottom:48px}.intro-heading{font-family:var(--font-display);font-size:48px;font-weight:700;margin-bottom:16px;color:var(--accent)}.intro-text{font-size:18px;color:var(--text-secondary);max-width:500px;margin:0 auto}.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}.game-card{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:20px;padding:28px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.game-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--game-color, var(--accent));opacity:0;transition:opacity .3s}.game-card:hover{transform:translateY(-2px);border-color:var(--game-color, var(--accent))}.game-card:hover:before{opacity:1}.game-card-icon{width:64px;height:64px;border-radius:16px;margin-bottom:20px;position:relative;overflow:hidden}.game-card-icon:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;background:#ffffff4d;border-radius:50%}.game-card-content{position:relative}.game-card-title{font-family:var(--font-display);font-size:24px;font-weight:600;margin-bottom:8px;color:var(--text-primary)}.game-card-desc{font-size:15px;color:var(--text-secondary);margin-bottom:20px;line-height:1.5}.game-card-play{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:var(--game-color, var(--accent));color:var(--bg-primary);border-radius:10px;font-weight:600;font-size:14px;transition:all .2s}.game-card:hover .game-card-play{opacity:.9}.games-footer{text-align:center;padding:32px;color:var(--text-muted);font-size:14px;border-top:1px solid var(--border-subtle)}.games-footer a{color:var(--accent);text-decoration:none}.games-footer a:hover{text-decoration:underline}.game-view{position:fixed;inset:0;background:var(--bg-primary);display:none;flex-direction:column;z-index:1000}body.game-open .games-view{display:none}body.game-open .game-view{display:flex}.game-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border-subtle);background:var(--bg-secondary)}.back-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:10px;color:var(--text-primary);font-family:var(--font-body);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.back-btn:hover{background:var(--bg-elevated);border-color:var(--accent)}.game-title{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--text-primary)}.game-header-spacer{width:80px}.game-main{flex:1;display:flex;align-items:center;justify-content:center;padding:32px;overflow:auto}.game-playground{display:flex;flex-direction:row;align-items:flex-start;justify-content:center;gap:24px;width:100%;max-width:1000px}.game-canvas-wrapper{display:flex;flex-direction:column;align-items:center;gap:16px;flex-shrink:0}.game-canvas{width:400px;height:400px;border-radius:16px;box-shadow:0 8px 40px #0006;background:#0f141e}.game-code-section{display:flex;flex-direction:column;gap:12px;width:100%;max-width:450px}.game-code-toggle{padding:10px 16px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:8px;color:var(--text-secondary);font-family:var(--font-body);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;align-self:flex-start}.game-code-toggle:hover{background:var(--bg-elevated);color:var(--text-primary);border-color:var(--accent)}.game-code-block{display:none;padding:16px 20px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;font-family:var(--font-mono);font-size:13px;line-height:1.6;color:var(--text-secondary);overflow-x:auto;max-height:400px;overflow-y:auto}.game-code-section.expanded .game-code-block{display:block}.theme-toggle{position:fixed;bottom:20px;right:20px;padding:10px 16px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:8px;color:var(--text-secondary);font-family:var(--font-body);font-size:13px;cursor:pointer;transition:all .2s;z-index:100}.theme-toggle:hover{background:var(--bg-elevated);color:var(--text-primary);border-color:var(--accent)}body.light-theme{--bg-primary: #faf9f7;--bg-secondary: #ffffff;--bg-tertiary: #f0eeeb;--bg-elevated: #e8e6e2;--text-primary: #1a1a1a;--text-secondary: #555555;--text-muted: #888888;--border: #ddd;--border-subtle: #eee}@media(max-width:768px){.games-header{padding:16px 20px}.games-logo span{display:none}.games-main{padding:32px 20px}.intro-heading{font-size:36px}.intro-text{font-size:16px}.games-grid{grid-template-columns:1fr;gap:16px}.game-card{padding:24px}.game-header{padding:12px 16px}.game-title{font-size:20px}.game-main{padding:16px}.game-playground{flex-direction:column;align-items:center}.game-canvas{width:280px;height:280px}.game-code-section{max-width:100%;align-items:center}.game-code-toggle{align-self:center}.game-code-block{font-size:12px;max-height:250px}}@media(max-width:480px){.intro-heading{font-size:28px}.game-card-title{font-size:20px}.game-card-icon{width:48px;height:48px}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.game-card{animation:fadeIn .4s ease-out backwards}.game-card:nth-child(1){animation-delay:.05s}.game-card:nth-child(2){animation-delay:.1s}.game-card:nth-child(3){animation-delay:.15s}.game-card:nth-child(4){animation-delay:.2s}.game-card:nth-child(5){animation-delay:.25s}.game-card:nth-child(6){animation-delay:.3s}@media(prefers-reduced-motion:reduce){.game-card{animation:none}.game-card:hover{transform:none}}.game-card:focus-visible,.back-btn:focus-visible,.header-link:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.game-card:focus-visible{transform:translateY(-4px);border-color:var(--accent)}