:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.game-hub{max-width:1200px;margin:0 auto;padding:var(--space-8)}.hub-header{text-align:center;margin-bottom:var(--space-8)}.hub-header h1{font-size:var(--font-size-4xl);margin-bottom:var(--space-2);background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.hub-header p{color:var(--color-text-secondary);font-size:var(--font-size-lg)}.category-filter{display:flex;gap:var(--space-4);margin-bottom:var(--space-8);flex-wrap:wrap;justify-content:center}.category-filter button{padding:var(--space-2) var(--space-4);border:2px solid var(--color-border);border-radius:var(--radius-full);background:var(--color-surface);cursor:pointer;transition:all var(--transition-medium);font-weight:500;color:var(--color-text-secondary)}.category-filter button:hover{transform:translateY(-2px);box-shadow:var(--shadow-medium);color:var(--color-text)}.category-filter button.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary);box-shadow:var(--shadow-small)}.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-6);margin-top:var(--space-8)}.game-card{background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-6);border-left:4px solid var(--color-primary);box-shadow:var(--shadow-small);cursor:pointer;transition:all var(--transition-medium);border:1px solid var(--color-border-light)}.game-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-large)}.game-header{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-4)}.game-icon{font-size:var(--font-size-xl)}.game-header h3{margin:0;flex:1;font-size:var(--font-size-xl);color:var(--color-text);font-weight:600}.difficulty{background:var(--color-secondary);color:var(--color-primary);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--font-size-xs);text-transform:uppercase;font-weight:600;letter-spacing:.5px}.game-description{color:var(--color-text-secondary);margin-bottom:var(--space-4);line-height:1.6;font-size:var(--font-size-base)}.helpful-aspect{background:var(--color-secondary);padding:var(--space-3);border-radius:var(--radius-base);margin-bottom:var(--space-4);border-left:3px solid var(--color-primary);font-size:var(--font-size-sm)}.helpful-aspect strong{color:var(--color-primary);font-weight:600}.game-stats{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-sm);color:var(--color-text-secondary);font-weight:500}.no-games{text-align:center;padding:var(--space-12);color:var(--color-text-secondary);font-size:var(--font-size-lg)}@media (max-width: 768px){.game-hub{padding:var(--space-4)}.hub-header h1{font-size:var(--font-size-3xl)}.games-grid{grid-template-columns:1fr;gap:var(--space-4)}.category-filter{gap:var(--space-2)}.category-filter button{font-size:var(--font-size-sm);padding:var(--space-2) var(--space-3)}.game-card{padding:var(--space-4)}}.reaction-game{max-width:800px;margin:0 auto;padding:2rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.game-header{display:flex;align-items:center;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}.exit-btn{background:#f0f0f0;border:none;padding:.5rem 1rem;border-radius:8px;cursor:pointer;font-weight:500;transition:background-color .2s}.exit-btn:hover{background:#e0e0e0}.game-header h2{margin:0;flex:1;font-size:1.8rem}.helpful-info{background:#e8f4fd;padding:.75rem;border-radius:8px;border-left:3px solid #2196f3;font-size:.9rem;color:#1976d2;flex-basis:100%}.game-area{text-align:center}.round-indicator{font-size:1.2rem;font-weight:600;margin-bottom:2rem;color:#666}.click-zone{width:300px;height:300px;margin:2rem auto;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;position:relative;font-size:1.1rem;font-weight:600}.click-zone.waiting{background:#f5f5f5;border:3px dashed #ccc;color:#666}.click-zone.ready{background:#fff3cd;border:3px solid #ffc107;color:#856404;animation:pulse 1s infinite}.click-zone.click{background:#d4edda;border:3px solid #28a745;color:#155724;animation:urgent-pulse .5s infinite}.click-zone.too-early{background:#f8d7da;border:3px solid #dc3545;color:#721c24}.click-target{font-size:2rem;font-weight:700;color:#28a745;animation:bounce .3s infinite alternate}.state-message{margin-bottom:1rem}.result{font-size:1.3rem;font-weight:700;margin-top:1rem}.scores-display{margin-top:3rem;padding:1.5rem;background:#f8f9fa;border-radius:12px}.scores-display h4{margin-top:0;margin-bottom:1rem;color:#495057}.scores-list{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.score-item{background:#fff;padding:.5rem 1rem;border-radius:20px;font-size:.9rem;border:1px solid #dee2e6}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes urgent-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-10px)}}@media (max-width: 768px){.reaction-game{padding:1rem}.click-zone{width:250px;height:250px}.game-header{flex-direction:column;align-items:stretch}.game-header h2{text-align:center}}.code-challenge{min-height:100vh;background:var(--color-background);padding:var(--space-4);font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,monospace}.code-header{display:flex;align-items:center;gap:var(--space-6);margin-bottom:var(--space-6);padding:var(--space-4);background:var(--color-surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-small);border:1px solid var(--color-border-light)}.challenge-info{flex:1}.challenge-info h2{margin:0 0 var(--space-2) 0;font-size:var(--font-size-2xl);background:linear-gradient(135deg,var(--color-primary),var(--color-accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.challenge-meta{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap}.hook-badge{background:var(--color-primary);color:#fff;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:.5px}.difficulty{color:var(--color-accent);font-weight:600;font-size:var(--font-size-sm)}.progress-indicator{background:var(--color-secondary);color:var(--color-primary);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:600}.stat{text-align:center;min-width:60px}.challenge-description{background:var(--color-secondary);padding:var(--space-4);border-radius:var(--radius-xl);margin-bottom:var(--space-6);border-left:4px solid var(--color-primary)}.challenge-description p{margin:0 0 var(--space-3) 0;font-size:var(--font-size-lg);color:var(--color-text);line-height:1.6}.helpful-aspect{background:#7c3aed1a;padding:var(--space-3);border-radius:var(--radius-base);border:1px solid rgba(124,58,237,.2)}.helpful-aspect strong{color:var(--color-primary)}.coding-area{display:grid;grid-template-columns:1fr;gap:var(--space-6)}@media (min-width: 1200px){.coding-area{grid-template-columns:2fr 1fr}}.code-editor-container{background:var(--color-surface);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-medium);border:1px solid var(--color-border)}.editor-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) var(--space-4);background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));color:#fff}.editor-tabs{display:flex;gap:var(--space-2)}.tab{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:#ffffff1a;border-radius:var(--radius-base);font-size:var(--font-size-sm);font-weight:500}.tab.active{background:#fff3}.tab-icon{font-size:var(--font-size-base)}.editor-actions{display:flex;gap:var(--space-2)}.btn-sm{padding:var(--space-1) var(--space-3);font-size:var(--font-size-sm)}.code-editor{display:flex;min-height:400px;background:var(--color-surface);position:relative}.line-numbers{background:var(--color-secondary);padding:var(--space-4) var(--space-2);border-right:1px solid var(--color-border);font-family:SF Mono,monospace;font-size:var(--font-size-sm);color:var(--color-text-secondary);-webkit-user-select:none;user-select:none;min-width:50px}.line-number{height:1.5em;line-height:1.5;text-align:right}.editor-content{flex:1;position:relative;padding:var(--space-4);background:var(--color-surface)}.expected-code{position:absolute;top:var(--space-4);left:var(--space-4);right:var(--space-4);font-family:SF Mono,monospace;font-size:var(--font-size-base);line-height:1.5;color:var(--color-text-secondary);opacity:.4;white-space:pre;pointer-events:none;z-index:1}.code-input{position:relative;z-index:2;width:100%;min-height:300px;border:none;outline:none;background:transparent;font-family:SF Mono,monospace;font-size:var(--font-size-base);line-height:1.5;color:var(--color-text);resize:none;white-space:pre}.code-input.is-typing{animation:typing-pulse .3s ease-out}.code-input.has-error{animation:error-shake .3s ease-out}@keyframes typing-pulse{0%{background-color:transparent}50%{background-color:#7c3aed0d}to{background-color:transparent}}@keyframes error-shake{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}.progress-bar{position:relative;height:8px;background:var(--color-border-light);margin:0}.progress-fill{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));transition:width var(--transition-medium);border-radius:0 var(--radius-base) var(--radius-base) 0}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:var(--font-size-xs);font-weight:600;color:var(--color-text-secondary);text-shadow:0 1px 2px rgba(255,255,255,.8)}.code-preview{background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-small);border:1px solid var(--color-border-light);animation:slide-in-right var(--transition-medium)}@keyframes slide-in-right{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.code-preview h4{margin:0 0 var(--space-4) 0;color:var(--color-primary);font-size:var(--font-size-lg)}.component-preview{background:var(--color-secondary);padding:var(--space-4);border-radius:var(--radius-base);border:1px solid var(--color-border)}.preview-title{font-weight:600;color:var(--color-primary);margin-bottom:var(--space-2)}.preview-description{color:var(--color-text-secondary);font-size:var(--font-size-sm);margin-bottom:var(--space-4)}.preview-mockup{background:var(--color-background);padding:var(--space-4);border-radius:var(--radius-base);border:1px solid var(--color-border)}.mock-button,.mock-timer{background:var(--color-primary);color:var(--color-background);padding:var(--space-2) var(--space-4);border-radius:var(--radius-base);font-weight:600;display:inline-block;cursor:pointer;transition:all var(--transition-fast);border:none;font-family:inherit}.mock-button:hover{background:var(--color-primary-dark);transform:translateY(-1px)}.hint-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--color-surface);padding:var(--space-6);border-radius:var(--radius-xl);box-shadow:var(--shadow-large);border:2px solid var(--color-accent);z-index:1000;max-width:400px;animation:hint-appear var(--transition-medium)}@keyframes hint-appear{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.hint-content{color:var(--color-text);line-height:1.6}.hint-content strong{color:var(--color-accent)}.completion-animation{position:fixed;inset:0;background:#7c3aede6;display:flex;align-items:center;justify-content:center;z-index:1000;animation:completion-fade-in var(--transition-slow)}@keyframes completion-fade-in{0%{opacity:0}to{opacity:1}}.completion-content{text-align:center;color:#fff;animation:completion-bounce var(--transition-slow)}@keyframes completion-bounce{0%{transform:scale(.8) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.success-icon{font-size:4rem;margin-bottom:var(--space-4);animation:icon-spin 1s ease-out}@keyframes icon-spin{0%{transform:rotate(-180deg) scale(.5)}to{transform:rotate(0) scale(1)}}.completion-content h3{margin:0 0 var(--space-2) 0;font-size:var(--font-size-3xl)}.completion-content p{margin:0;font-size:var(--font-size-lg);opacity:.9}@media (max-width: 768px){.code-challenge{padding:var(--space-2)}.code-header{flex-direction:column;gap:var(--space-4);align-items:stretch}.challenge-meta,.stats-panel{justify-content:center}.editor-header{flex-direction:column;gap:var(--space-3);align-items:stretch}.editor-actions{justify-content:center}.code-editor{min-height:300px}.hint-popup{max-width:90vw;margin:var(--space-4)}}.puzzle-blast-game{min-height:100vh;background:var(--color-background);padding:var(--space-4);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.game-header{display:flex;align-items:center;gap:var(--space-6);margin-bottom:var(--space-6);padding:var(--space-4);background:var(--color-surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-small);border:1px solid var(--color-border-light)}.exit-btn{flex-shrink:0}.level-info{flex:1}.level-info h2{margin:0 0 var(--space-2) 0;font-size:var(--font-size-2xl);background:linear-gradient(135deg,#34d399,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.level-meta{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap}.level-badge{background:var(--color-success);color:var(--color-background);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:.5px}.target-score{color:var(--color-text-secondary);font-weight:500;font-size:var(--font-size-sm)}.stat-label{display:block;font-size:var(--font-size-xs);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-1)}.stat-value{display:block;font-size:var(--font-size-xl);font-weight:700;color:var(--color-primary);font-family:SF Mono,monospace}.puzzle-grid-container{background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-medium);border:1px solid var(--color-border);position:relative;overflow:hidden}.puzzle-grid{display:grid;gap:var(--space-1);max-width:500px;margin:0 auto;aspect-ratio:1;position:relative}.puzzle-piece{aspect-ratio:1;border-radius:var(--radius-base);cursor:pointer;position:relative;transition:all var(--transition-fast);border:2px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;overflow:hidden;-webkit-user-select:none;user-select:none}.puzzle-piece:hover{transform:scale(1.05);box-shadow:var(--shadow-medium);border-color:#ffffff4d}.puzzle-piece:active{transform:scale(.95)}.puzzle-piece.basic{background:linear-gradient(135deg,#64748b,#475569)}.puzzle-piece.reinforced{background:linear-gradient(135deg,#475569,#334155);border-color:#94a3b8}.puzzle-piece.crystal{background:linear-gradient(135deg,#8b5cf6,#7c3aed);box-shadow:0 0 20px #8b5cf666;border-color:#c4b5fd}.puzzle-piece.explosive{background:linear-gradient(135deg,#f97316,#ea580c);box-shadow:0 0 20px #f9731666;border-color:#fed7aa;animation:pulse 2s infinite}.puzzle-piece.mystery{background:linear-gradient(135deg,#1f2937,#111827);border-color:#6b7280;box-shadow:0 0 20px #1f293799}.puzzle-piece.exploding{animation:explode .8s cubic-bezier(.25,.8,.25,1) forwards}@keyframes pulse{0%,to{box-shadow:0 0 20px #f9731666}50%{box-shadow:0 0 30px #f97316cc}}@keyframes explode{0%{transform:scale(1);opacity:1}30%{transform:scale(1.2);opacity:.8}70%{transform:scale(1.5);opacity:.4}to{transform:scale(2);opacity:0}}.piece-health{position:absolute;top:2px;left:4px;background:#000000b3;color:#fff;font-size:var(--font-size-xs);font-weight:700;padding:1px 4px;border-radius:var(--radius-sm)}.treasure-count{position:absolute;bottom:2px;right:4px;background:#000000b3;color:#fbbf24;font-size:var(--font-size-xs);font-weight:700;padding:1px 4px;border-radius:var(--radius-sm)}.chain-multiplier{position:absolute;top:2px;right:4px;background:#ffd700e6;color:#1f2937;font-size:var(--font-size-xs);font-weight:700;padding:1px 4px;border-radius:var(--radius-sm);animation:glow 1s infinite alternate}@keyframes glow{0%{box-shadow:0 0 5px #ffd70080}to{box-shadow:0 0 15px gold}}.empty-cell{aspect-ratio:1;background:#ffffff0d;border-radius:var(--radius-base);border:1px dashed var(--color-border)}.explosion{pointer-events:none;z-index:10}.explosion-particle{position:absolute;width:6px;height:6px;border-radius:50%;animation:particle-explode .8s ease-out forwards;transform-origin:center}@keyframes particle-explode{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(var(--particle-x, 0),var(--particle-y, 0)) scale(0);opacity:0}}.floating-score{pointer-events:none;font-weight:700;font-size:var(--font-size-lg);z-index:10;animation:float-up 1s ease-out forwards;text-shadow:2px 2px 4px rgba(0,0,0,.5)}@keyframes float-up{0%{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(-50px) scale(1.2);opacity:0}}.treasure-panel{background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-small);border:1px solid var(--color-border);height:fit-content}.treasure-panel h3{margin:0 0 var(--space-4) 0;color:var(--color-primary);font-size:var(--font-size-xl);text-align:center}.treasure-collection{display:flex;flex-direction:column;gap:var(--space-2);max-height:300px;overflow-y:auto;margin-bottom:var(--space-4)}.treasure-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-base);border-left:3px solid;transition:all var(--transition-fast)}.treasure-item:hover{transform:translate(4px)}.treasure-item.common{background:#fbbf241a;border-color:#fbbf24}.treasure-item.rare{background:#a855f71a;border-color:#a855f7}.treasure-item.epic{background:#f973161a;border-color:#f97316}.treasure-item.legendary{background:#c084fc1a;border-color:#c084fc;animation:legendary-glow 2s infinite alternate}@keyframes legendary-glow{0%{box-shadow:0 0 5px #c084fc4d}to{box-shadow:0 0 20px #c084fc99}}.treasure-icon{font-size:var(--font-size-lg);flex-shrink:0}.treasure-name{flex:1;font-weight:500;color:var(--color-text)}.treasure-count{font-weight:700;color:var(--color-primary);font-family:SF Mono,monospace}.special-rules{background:var(--color-secondary);padding:var(--space-4);border-radius:var(--radius-base);border:1px solid var(--color-border)}.special-rules h4{margin:0 0 var(--space-2) 0;color:var(--color-accent);font-size:var(--font-size-base)}.special-rules ul{margin:0;padding-left:var(--space-4);color:var(--color-text-secondary)}.special-rules li{margin-bottom:var(--space-1);font-size:var(--font-size-sm)}@media (max-width: 768px){.puzzle-blast-game{padding:var(--space-2)}.game-header{flex-direction:column;gap:var(--space-4);align-items:stretch}.level-meta,.stats-panel{justify-content:center}.puzzle-grid-container{padding:var(--space-4)}.treasure-collection{max-height:200px}}@media (prefers-reduced-motion: reduce){.puzzle-piece,.explosion-particle,.floating-score,.treasure-item{animation:none!important}.puzzle-piece:hover,.puzzle-piece:active{transform:none}}.hacker-terminal-game{min-height:100vh;background:#0a0a0a;color:#0f0;font-family:Monaco,Menlo,Ubuntu Mono,monospace;padding:var(--space-4)}.game-header{display:flex;align-items:center;gap:var(--space-6);margin-bottom:var(--space-6);padding:var(--space-4);background:#00ff000d;border-radius:var(--radius-xl);border:1px solid rgba(0,255,0,.2)}.exit-btn{background:#1a1a1a;color:#0f0;border:1px solid #00ff00;padding:var(--space-2) var(--space-4);border-radius:var(--radius-base);cursor:pointer;transition:all var(--transition-fast);font-family:inherit}.exit-btn:hover{background:#00ff001a;box-shadow:0 0 10px #00ff004d}.scenario-info{flex:1}.scenario-info h2{margin:0 0 var(--space-2) 0;font-size:var(--font-size-2xl);color:#0f0;text-shadow:0 0 10px rgba(0,255,0,.5);font-weight:700}.scenario-meta{display:flex;gap:var(--space-3);align-items:center}.difficulty-badge{background:#ffa5001a;color:orange;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;border:1px solid #ffa500}.time-estimate{color:#888;font-size:var(--font-size-sm)}.stats-panel{display:flex;gap:var(--space-4)}.stat{text-align:center;min-width:70px}.stat-label{display:block;font-size:var(--font-size-xs);color:#666;text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-1)}.stat-value{display:block;font-size:var(--font-size-xl);font-weight:700;color:#0f0;text-shadow:0 0 5px rgba(0,255,0,.5)}.game-content{display:grid;grid-template-columns:1fr;gap:var(--space-6)}@media (min-width: 1000px){.game-content{grid-template-columns:2fr 1fr}}.terminal-container{background:#000;border-radius:var(--radius-xl);overflow:hidden;border:2px solid #00ff00;box-shadow:0 0 20px #00ff004d,inset 0 0 20px #00ff000d;display:flex;flex-direction:column;height:100%}.terminal-header{background:#1a1a1a;padding:var(--space-3) var(--space-4);border-bottom:1px solid #00ff00;display:flex;align-items:center;gap:var(--space-3);flex-shrink:0}.terminal-controls{display:flex;gap:var(--space-2)}.control-dot{width:12px;height:12px;border-radius:50%}.control-dot.red{background:#f55;box-shadow:0 0 5px #ff555580}.control-dot.yellow{background:#ffb86c;box-shadow:0 0 5px #ffb86c80}.control-dot.green{background:#50fa7b;box-shadow:0 0 5px #50fa7b80}.terminal-title{font-weight:600;color:#0f0;font-size:var(--font-size-sm)}.terminal-body{flex:1;overflow-y:auto;padding:var(--space-4);background:#000;display:flex;flex-direction:column}.terminal-content{height:100%;display:flex;flex-direction:column;min-height:0}.terminal-output{overflow-y:auto;scroll-behavior:smooth;flex-shrink:0;max-height:70vh}.output-line{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:var(--font-size-sm);line-height:1.4;color:#0f0;margin-bottom:2px;white-space:pre-wrap;word-break:break-word}.output-line:empty{height:1.4em}.terminal-input-line{display:flex;align-items:center;gap:var(--space-2);border-top:1px solid rgba(0,255,0,.2);padding-top:var(--space-3)}.prompt{color:#0f0;font-weight:600;white-space:nowrap;text-shadow:0 0 5px rgba(0,255,0,.5)}.terminal-input{flex:1;background:transparent;border:none;color:#0f0;font-family:inherit;font-size:var(--font-size-sm);outline:none;caret-color:#0f0}.terminal-input::selection{background:#00ff004d}.side-panel{display:flex;flex-direction:column;gap:var(--space-6)}.objectives-panel,.hints-panel{background:#00ff000d;border-radius:var(--radius-xl);padding:var(--space-6);border:1px solid rgba(0,255,0,.2)}.objectives-panel h3,.hints-panel h3{margin:0 0 var(--space-4) 0;color:#0f0;font-size:var(--font-size-xl);text-shadow:0 0 5px rgba(0,255,0,.5)}.objectives-list{display:flex;flex-direction:column;gap:var(--space-3)}.objective{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3);background:#0000004d;border-radius:var(--radius-base);border:1px solid rgba(0,255,0,.3);transition:all var(--transition-fast)}.objective:hover{background:#00ff001a;border-color:#0f0;box-shadow:0 0 10px #0f03}.objective-text{flex:1;color:#0f0;font-size:var(--font-size-sm)}.objective-points{color:orange;font-weight:700;font-size:var(--font-size-xs);text-shadow:0 0 5px rgba(255,165,0,.5)}.objective:hover{background:#00ff0026;border-color:#0f0;transform:translate(5px);cursor:pointer}.objective.completed{background:#00ff001a;border-color:#0f0}.objective.completed:hover{transform:translate(2px)}.objective.completed .objective-text{text-decoration:line-through;color:#0a0;animation:strikethrough .8s ease-in-out}.objective.completed .objective-points{color:#0f0}@keyframes strikethrough{0%{text-decoration:none}50%{text-decoration:underline}to{text-decoration:line-through}}.hacker-terminal-game.system-melting{animation:systemMeltdown 8s ease-in-out forwards}@keyframes systemMeltdown{0%{transform:scale(1) rotate(0);filter:brightness(1) hue-rotate(0deg)}20%{filter:brightness(1.5) hue-rotate(90deg)}40%{transform:scale(1.05) rotate(1deg);filter:brightness(.8) hue-rotate(180deg)}60%{transform:scale(.95) rotate(-1deg);filter:brightness(1.2) hue-rotate(270deg)}80%{transform:scale(1.1) rotate(2deg);filter:brightness(.3) hue-rotate(360deg) blur(2px)}to{transform:scale(0) rotate(180deg);filter:brightness(0) blur(10px);opacity:0}}.system-melting .terminal-output,.system-melting .terminal-input,.system-melting .side-panel{animation:digitalDecay 8s ease-in-out forwards}@keyframes digitalDecay{0%{opacity:1;transform:translateY(0)}30%{opacity:.8;transform:translateY(-10px) skew(2deg)}50%{opacity:.6;transform:translateY(5px) skew(-1deg)}70%{opacity:.3;transform:translateY(-20px) skew(3deg);filter:blur(1px)}90%{opacity:.1;transform:translateY(50px) skew(-5deg);filter:blur(5px)}to{opacity:0;transform:translateY(100px) scale(.5);filter:blur(10px)}}.matrix-rain{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000;overflow:hidden;background:#0000001a;animation:matrixRainFadeOut 5s ease-out forwards}.matrix-rain.rainbow{animation:matrixRainFadeOut 8s ease-out forwards}.matrix-column{position:absolute;top:-100%;color:#0f0;font-family:Courier New,monospace;font-size:14px;line-height:1.2;white-space:pre;animation:matrixFall 5s linear;text-shadow:0 0 5px #00ff00}.matrix-column.rainbow{animation:matrixFallRainbow 8s linear}@keyframes matrixRainFadeOut{0%{opacity:1;background:#0000001a}70%{opacity:1;background:#0000001a}to{opacity:0;background:#0000}}@keyframes matrixFall{0%{top:-20%;opacity:0}10%{opacity:1}80%{opacity:1}to{top:100%;opacity:.3}}@keyframes matrixFallRainbow{0%{top:-20%;opacity:0;color:red;text-shadow:0 0 10px #ff0000}12.5%{opacity:1;color:#ff8000;text-shadow:0 0 10px #ff8000}25%{color:#ff0;text-shadow:0 0 10px #ffff00}37.5%{color:#80ff00;text-shadow:0 0 10px #80ff00}50%{color:#0f0;text-shadow:0 0 10px #00ff00}62.5%{color:#00ff80;text-shadow:0 0 10px #00ff80}75%{color:#0ff;text-shadow:0 0 10px #00ffff}87.5%{color:#8000ff;text-shadow:0 0 10px #8000ff}to{top:100%;opacity:.3;color:#f0f;text-shadow:0 0 10px #ff00ff}}.glitch-text{animation:glitch .5s ease-in-out infinite alternate}@keyframes glitch{0%{transform:skew(0)}20%{transform:skew(-2deg);color:#f0f}40%{transform:skew(1deg);color:#0ff}60%{transform:skew(-1deg);color:#ff0}80%{transform:skew(2deg);color:red}to{transform:skew(0);color:#0f0}}.terminal-input{background:transparent;border:none;color:#0f0;font-family:inherit;font-size:inherit;outline:none;flex:1;caret-color:#0f0;animation:cursorPulse 1s ease-in-out infinite alternate}@keyframes cursorPulse{0%{text-shadow:0 0 5px #00ff00}to{text-shadow:0 0 15px #00ff00,0 0 25px #00ff00}}.hint{padding:var(--space-3);background:#0000004d;border-radius:var(--radius-base);border-left:3px solid #00ff00;color:#888;font-size:var(--font-size-sm);margin-bottom:var(--space-2);transition:all var(--transition-fast)}.hint:hover{color:#0f0;background:#00ff000d;border-left-color:#0f0}.terminal-body::-webkit-scrollbar{width:8px}.terminal-body::-webkit-scrollbar-track{background:#1a1a1a}.terminal-body::-webkit-scrollbar-thumb{background:#0f0;border-radius:var(--radius-base)}.terminal-body::-webkit-scrollbar-thumb:hover{background:#0c0}@media (max-width: 768px){.hacker-terminal-game{padding:var(--space-2)}.game-header{flex-direction:column;gap:var(--space-4);align-items:stretch}.scenario-meta,.stats-panel{justify-content:center}.terminal-body{flex:1}.terminal-content{height:100%}}@keyframes matrix-glow{0%,to{text-shadow:0 0 5px rgba(0,255,0,.5)}50%{text-shadow:0 0 20px rgba(0,255,0,.8)}}.scenario-info h2{animation:matrix-glow 3s infinite}@media (prefers-reduced-motion: reduce){.scenario-info h2{animation:none}.objective,.hint{transition:none}}.terminal-input:after{content:"";display:inline-block;width:1px;height:1em;background:#0f0;margin-left:2px;animation:cursor-blink 1s infinite}@keyframes cursor-blink{0%,50%{opacity:1}51%,to{opacity:0}}.ai-status-bar{display:flex;gap:var(--space-3);padding:var(--space-3) var(--space-3);margin:0 calc(-1 * var(--space-4));background:#00ff000d;border-top:2px solid rgba(0,255,0,.2);border-bottom:2px solid rgba(0,255,0,.2);border-left:none;border-right:none;border-radius:0;font-size:.8rem;flex-wrap:wrap;flex-shrink:0;position:relative;cursor:ns-resize;-webkit-user-select:none;user-select:none;transition:all .2s ease;box-shadow:0 2px 10px #00ff001a,0 -2px 10px #00ff001a}.ai-status-bar:hover{background:#00ff0014;border-top-color:#0f06;border-bottom-color:#0f06;box-shadow:0 3px 15px #0f03,0 -3px 15px #0f03}.ai-status-bar.dragging{background:#00ff001f;border-top-color:#0f09;border-bottom-color:#0f09;box-shadow:0 5px 20px #00ff004d,0 -5px 20px #00ff004d}.ai-indicator,.neural-indicator,.scanning-indicator,.system-status{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);transition:all var(--transition-fast);border:1px solid transparent}.ai-indicator.active{background:#00ff001a;border-color:#00ff004d;box-shadow:0 0 10px #0f03}.ai-indicator.inactive{background:#ffffff0d;color:#0f09}.neural-indicator.active{background:#00c8ff1a;border-color:#00c8ff4d;color:#00c8ff;box-shadow:0 0 10px #00c8ff33}.neural-indicator.standby{background:#ffffff0d;color:#00c8ff99}.scanning-indicator{background:#ffa5001a;border-color:#ffa5004d;color:orange;box-shadow:0 0 10px #ffa50033;animation:pulse-scan 1.5s infinite}.system-status{background:#32ff321a;border-color:#32ff324d;color:#32ff32}.ai-icon,.neural-icon,.scan-icon,.status-icon{font-size:1rem;animation:icon-glow 2s infinite alternate}.ai-text,.neural-text,.scan-text,.status-text{font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.5px}.scan-progress{width:60px;height:3px;background:#ffa50033;border-radius:2px;overflow:hidden;position:relative}.scan-progress:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,#ffa500,transparent);animation:scan-bar 1.5s infinite}@keyframes pulse-scan{0%,to{box-shadow:0 0 10px #ffa50033}50%{box-shadow:0 0 20px #ffa50066}}@keyframes icon-glow{0%{text-shadow:0 0 5px currentColor}to{text-shadow:0 0 15px currentColor}}@keyframes scan-bar{0%{left:-100%}to{left:100%}}@media (max-width: 768px){.ai-status-bar{flex-direction:column;gap:var(--space-2)}.ai-indicator,.neural-indicator,.scanning-indicator,.system-status{justify-content:center}}.ai-suggestions{margin-top:var(--space-2);padding:var(--space-2) var(--space-3);background:#00ffff0d;border:1px solid rgba(0,255,255,.2);border-radius:var(--radius-base);animation:suggest-glow 2s infinite alternate}.suggestion-header{color:#0ff;font-weight:600;font-size:.8rem;margin-bottom:var(--space-2);text-transform:uppercase;letter-spacing:1px}.suggestion-item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) 0;color:#0ffc;font-size:.75rem;cursor:pointer;transition:all var(--transition-fast);border-radius:var(--radius-sm);padding-left:var(--space-2)}.suggestion-item:hover{background:#00ffff1a;color:#0ff;padding-left:var(--space-3)}.suggestion-icon{animation:pulse-suggestion 1.5s infinite}.suggestion-text{font-family:inherit}@keyframes suggest-glow{0%{box-shadow:0 0 5px #0ff3}to{box-shadow:0 0 15px #0ff6}}@keyframes pulse-suggestion{0%,to{opacity:.6}50%{opacity:1}}.terminal-input-line{flex-shrink:0;margin-top:auto;margin-bottom:var(--space-2)}.ai-suggestions{flex-shrink:0;max-height:200px;overflow-y:auto}.ai-status-bar:before{content:"⋮⋮⋮";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#0f06;font-size:1.2rem;letter-spacing:2px;pointer-events:none;z-index:1;transition:color .2s ease}.ai-status-bar:hover:before{color:#00ff00b3}.ai-status-bar.dragging:before{color:#0f0}.terminal-input-section{display:flex;flex-direction:column;overflow-y:auto;padding:var(--space-3) 0}.terminal-input-line{flex-shrink:0;margin:0}.output-line.latest-command{background:#00ff001a;border-left:3px solid rgba(0,255,0,.6);padding-left:var(--space-2);margin-left:-3px;animation:command-pulse 2s ease-in-out infinite;border-radius:var(--radius-sm);transition:all .3s ease}@keyframes command-pulse{0%,to{box-shadow:0 0 5px #00ff004d;border-left-color:#0f09}50%{box-shadow:0 0 15px #0f09;border-left-color:#0f0;background:#00ff0026}}.output-line.latest-command{animation:command-pulse 2s ease-in-out infinite,fade-pulse 10s ease-out forwards}@keyframes fade-pulse{0%{opacity:1}70%{opacity:1}to{opacity:.8;background:#00ff000d;box-shadow:none;border-left-color:#00ff004d}}.completion-banner{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001;background:linear-gradient(45deg,red,#ff8000,#ff0,#80ff00,#0f0,#00ff80,#0ff,#8000ff,#f0f);background-size:400% 400%;animation:rainbow-gradient 2s ease-in-out infinite,celebration-pulse 3s ease-in-out infinite;padding:var(--space-6) var(--space-8);border-radius:var(--radius-xl);border:3px solid #ffffff;box-shadow:0 0 50px #fffc,0 0 100px #0f09,inset 0 0 20px #ffffff4d;text-align:center;max-width:600px;pointer-events:none}.completion-banner h2{color:#000;font-size:2.5rem;font-weight:900;margin:0 0 var(--space-4) 0;text-shadow:2px 2px 4px rgba(255,255,255,.8);animation:celebration-text 1s ease-in-out infinite alternate}.completion-banner p{color:#000;font-size:1.2rem;font-weight:700;margin:var(--space-2) 0;text-shadow:1px 1px 2px rgba(255,255,255,.8)}.forbidden-command{background:#000000e6;color:red;padding:var(--space-4);border-radius:var(--radius-base);margin:var(--space-4) 0;border:2px solid #ff0000;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:1.4rem;font-weight:900;text-shadow:0 0 10px #ff0000;animation:danger-pulse 1.5s ease-in-out infinite}@keyframes rainbow-gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes celebration-pulse{0%,to{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 50px #fffc,0 0 100px #0f09,inset 0 0 20px #ffffff4d}50%{transform:translate(-50%,-50%) scale(1.05);box-shadow:0 0 70px #fff,0 0 140px #0f0c,inset 0 0 30px #ffffff80}}@keyframes celebration-text{0%{transform:scale(1)}to{transform:scale(1.05)}}@keyframes danger-pulse{0%,to{border-color:red;box-shadow:0 0 10px red;text-shadow:0 0 10px #ff0000}50%{border-color:#f66;box-shadow:0 0 20px red,0 0 30px red;text-shadow:0 0 15px #ff0000,0 0 25px #ff0000}}.completion-banner.command-migration{animation:banner-fade-out 1.5s ease-out forwards}.completion-banner.command-migration .forbidden-command{animation:command-migrate 1.5s ease-out forwards}@keyframes banner-fade-out{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.8)}}@keyframes command-migrate{0%{transform:scale(1);background:#000000e6;color:red}50%{transform:scale(1.2) rotateX(360deg);background:#0f03;color:#0f0;box-shadow:0 0 30px #0f0}to{transform:scale(.1) translateY(200px);opacity:0;background:#0f0c;color:#0f0}}.completion-banner{transition:all .3s ease;animation:rainbow-gradient 2s ease-in-out infinite,celebration-pulse 3s ease-in-out infinite,auto-progress 4s ease-in-out forwards}@keyframes auto-progress{0%{transform:translate(-50%,-50%) scale(1)}75%{transform:translate(-50%,-50%) scale(1.02)}to{transform:translate(-50%,-50%) scale(1)}}:root{--color-primary: #8b9cf7;--color-primary-light: #a5b4fc;--color-primary-dark: #7c8bf6;--color-secondary: #374151;--color-accent: #fbbf24;--color-success: #34d399;--color-warning: #f59e0b;--color-error: #f87171;--color-background: #1f2937;--color-surface: #374151;--color-text: #f3f4f6;--color-text-secondary: #9ca3af;--color-border: #4b5563;--color-border-light: #374151;--shadow-small: 0 1px 3px rgba(0, 0, 0, .3);--shadow-medium: 0 4px 12px rgba(0, 0, 0, .25);--shadow-large: 0 8px 25px rgba(0, 0, 0, .3);--transition-fast: .2s cubic-bezier(.4, 0, .2, 1);--transition-medium: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1);--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-12: 3rem;--space-16: 4rem;--radius-sm: .25rem;--radius-base: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-full: 9999px}*{box-sizing:border-box}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:var(--color-background);color:var(--color-text);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border:2px solid transparent;border-radius:var(--radius-lg);font-weight:600;font-size:var(--font-size-base);cursor:pointer;transition:all var(--transition-medium);text-decoration:none;outline:none}.btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.btn-primary{background-color:var(--color-primary);color:#fff}.btn-primary:hover{background-color:var(--color-primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-medium)}.btn-secondary{background-color:var(--color-secondary);color:var(--color-primary);border-color:var(--color-border)}.btn-secondary:hover{background-color:var(--color-primary-light);color:#fff}.btn-ghost{background-color:transparent;color:var(--color-text-secondary);border-color:var(--color-border)}.btn-ghost:hover{background-color:var(--color-surface);color:var(--color-text);border-color:var(--color-primary)}.card{background-color:var(--color-surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-small);border:1px solid var(--color-border-light);transition:all var(--transition-medium)}.card:hover{box-shadow:var(--shadow-medium);transform:translateY(-2px)}.card-interactive{cursor:pointer}.card-interactive:hover{box-shadow:var(--shadow-large);transform:translateY(-4px)}.text-primary{color:var(--color-primary)}.text-secondary{color:var(--color-text-secondary)}.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}.text-error{color:var(--color-error)}.text-xs{font-size:var(--font-size-xs)}.text-sm{font-size:var(--font-size-sm)}.text-base{font-size:var(--font-size-base)}.text-lg{font-size:var(--font-size-lg)}.text-xl{font-size:var(--font-size-xl)}.text-2xl{font-size:var(--font-size-2xl)}.text-3xl{font-size:var(--font-size-3xl)}.p-2{padding:var(--space-2)}.p-3{padding:var(--space-3)}.p-4{padding:var(--space-4)}.p-6{padding:var(--space-6)}.p-8{padding:var(--space-8)}.m-2{margin:var(--space-2)}.m-3{margin:var(--space-3)}.m-4{margin:var(--space-4)}.m-6{margin:var(--space-6)}.m-8{margin:var(--space-8)}.mb-2{margin-bottom:var(--space-2)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.mb-8{margin-bottom:var(--space-8)}.animate-smooth{transition:all var(--transition-medium)}.animate-fast{transition:all var(--transition-fast)}.animate-slow{transition:all var(--transition-slow)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.focus-ring:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}@media (prefers-contrast: high){:root{--color-text: #000000;--color-background: #ffffff;--color-border: #000000}}
