*{margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto,sans-serif;line-height:1.6;color:#333;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh}.container{max-width:1200px;margin:0 auto;padding:0 1rem}.header{background:rgba(0,0,0,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1);position:sticky;top:0;z-index:100}.header .container{display:flex;justify-content:space-between;align-items:center;padding:1rem}.logo{font-family:"Press Start 2P",cursive;font-size:1.2rem;color:#fff;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:transform .3s ease}.logo:hover{transform:scale(1.05)}.logo-icon{font-size:1.5rem;animation:bounce 2s infinite}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}.nav{display:flex;gap:1rem}.nav-btn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;padding:.5rem 1rem;border-radius:6px;cursor:pointer;transition:all .3s ease;font-weight:500}.nav-btn:hover,.nav-btn.active{background:rgba(255,255,255,.2);transform:translateY(-2px)}.page{min-height:calc(100vh - 140px);padding:1.5rem 0}.page-header{text-align:center;margin-bottom:1rem;color:#fff}.page-header h2{font-size:2.5rem;margin-bottom:.5rem;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.page-header p{font-size:1.1rem;opacity:.9}.platform-section{margin-bottom:3rem}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid rgba(255,255,255,.3)}.section-title{font-size:1.5rem;font-weight:700;color:#fff;margin:0}.view-more-link{color:#fff;text-decoration:none;font-weight:600;font-size:.9rem;padding:.5rem 1rem;background:rgba(255,255,255,.1);border-radius:20px;transition:all .3s ease;cursor:pointer}.view-more-link:hover{background:rgba(255,255,255,.2);transform:translate(4px)}.filters{display:flex;justify-content:center;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}.filter-btn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;padding:.5rem 1rem;border-radius:20px;cursor:pointer;transition:all .3s ease;font-weight:500}.filter-btn:hover,.filter-btn.active{background:white;color:#667eea;transform:translateY(-2px)}.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-bottom:2rem}.game-card{background:white;border-radius:12px;overflow:hidden;box-shadow:0 8px 32px #0000001a;transition:all .3s ease;cursor:pointer}.game-card:hover{transform:translateY(-8px);box-shadow:0 16px 48px #0003}.game-image{height:150px;overflow:hidden;position:relative}.game-image img{width:100%;height:100%;object-fit:scale-down;transition:transform .3s ease}.game-card:hover .game-image img{transform:scale(1.1)}.game-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);display:flex;align-items:center;justify-content:center;font-size:4rem;color:#fff}.game-info{padding:.75rem;text-align:center}.game-title{font-size:1rem;font-weight:700;margin-bottom:0;color:#333;line-height:1.2}.platform-inline{font-size:.75rem;font-weight:600;color:#667eea;opacity:.8}.game-meta{text-align:center}.game-platform,.platform-badge{background:#667eea;color:#fff;padding:.25rem .75rem;border-radius:12px;font-size:.75rem;font-weight:600;text-transform:uppercase}.game-year,.year-badge{background:#f1f5f9;color:#64748b;padding:.25rem .75rem;border-radius:12px;font-size:.75rem;font-weight:600}.game-genre{background:#059669;color:#64748b;padding:.25rem .75rem;border-radius:12px;font-size:.75rem;font-weight:600;color:#fff}.game-description{color:#666;margin-bottom:1.5rem;line-height:1.5}.game-actions{display:flex;justify-content:center}.play-btn{background:linear-gradient(135deg,#10b981 0%,#059669 100%);color:#fff;border:none;padding:.75rem 2rem;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:1rem}.play-btn:hover{transform:translateY(-2px);box-shadow:0 8px 16px #10b9814d}.empty-state{text-align:center;color:#fff;padding:4rem 2rem}.empty-icon{font-size:4rem;margin-bottom:1rem}.empty-state h3{font-size:1.5rem;margin-bottom:.5rem}.loading-state{text-align:center;color:#fff;padding:4rem 2rem}.loading-state p{font-size:1.2rem;margin-top:1rem}.game-footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;padding:1rem;margin-bottom:2rem;color:#fff;position:relative;z-index:10;pointer-events:auto;gap:1rem}.game-footer .controls-minimal{width:100%;order:3;background:transparent;padding:0;border:none}.back-btn{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);color:#fff;padding:.5rem 1rem;border-radius:6px;cursor:pointer;transition:all .3s ease;font-weight:500;pointer-events:auto}.back-btn:hover{background:rgba(255,255,255,.3);transform:translate(-4px)}.game-title-section h2{font-size:1.8rem;margin-bottom:.5rem}.game-controls{display:flex;gap:.5rem}.control-btn{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);color:#fff;padding:.5rem 1rem;border-radius:6px;cursor:pointer;transition:all .3s ease;font-weight:500;pointer-events:auto;position:relative;z-index:11}.control-btn:hover{background:rgba(255,255,255,.3);transform:translateY(-2px)}.emulator-container{background:#000;border-radius:12px;overflow:hidden;box-shadow:0 16px 48px #0000004d;margin-bottom:2rem;width:100%;height:80vh}.game-screen{width:100%;height:100%;position:relative;background:#000}.loading-screen{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;z-index:10}.loading-spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.3);border-top:4px solid white;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{font-size:1.2rem;font-weight:600;margin-bottom:.5rem}.loading-progress{font-size:.9rem;opacity:.8}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:9999;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.controls-modal{background:#1f2937;color:#fff;border-radius:12px;max-width:600px;max-height:80vh;overflow-y:auto;box-shadow:0 24px 64px #00000080}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid #374151}.modal-header h3{font-size:1.3rem;font-weight:600}.close-btn{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;padding:.5rem;border-radius:4px;transition:background-color .3s ease}.close-btn:hover{background:rgba(255,255,255,.1)}.controls-content{padding:1.5rem}.controls-section{margin-bottom:2rem}.controls-section:last-child{margin-bottom:0}.controls-section h4{color:#60a5fa;margin-bottom:1rem;font-size:1.1rem;font-weight:600}.controls-grid{display:grid;gap:.75rem}.control-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem;background:#374151;border-radius:6px}.control-item span{font-weight:500}kbd{background:#ef4444;color:#fff;padding:.25rem .75rem;border-radius:4px;font-family:Courier New,monospace;font-size:.875rem;font-weight:600;min-width:3rem;text-align:center;display:inline-block;margin:0 .125rem}.controls-note{background:rgba(96,165,250,.1);border:1px solid rgba(96,165,250,.3);border-radius:8px;padding:1rem;margin-top:1.5rem}.controls-note p{color:#d1d5db;font-size:.9rem;line-height:1.6;margin:0}.controls-note strong{color:#60a5fa}.controls-minimal{border-radius:8px;margin-bottom:1.5rem;padding:.75rem 1rem;border:1px solid rgba(255,255,255,.15);position:relative;z-index:10;pointer-events:auto}.player-chip{gap:.5rem;margin-bottom:.5rem}.player-label{color:#60a5fa;font-weight:600;font-size:.85rem}.chip-controls{display:flex;gap:.75rem;flex-wrap:wrap}.control-category{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}.category-label{color:#60a5fa;font-weight:600;font-size:.75rem;margin-right:.25rem}.control-chip{display:inline-flex;align-items:center;gap:.25rem;background:rgba(0,0,0,.2);padding:.25rem .5rem;border-radius:4px;font-size:.75rem;color:#ffffffe6;white-space:nowrap}.control-chip kbd{background:#ef4444;color:#fff;padding:.15rem .4rem;border-radius:3px;font-family:Courier New,monospace;font-size:.7rem;font-weight:600;min-width:1.5rem;text-align:center}.footer{background:rgba(0,0,0,.2);color:#fff;text-align:center;padding:2rem 0;margin-top:auto}.footer p{margin-bottom:.5rem}.legal-notice{font-size:.9rem;opacity:.8;background:rgba(239,68,68,.2);padding:1rem;border-radius:6px;margin-top:1rem}.notification{position:fixed;top:20px;right:20px;padding:1rem 1.5rem;border-radius:8px;color:#fff;font-weight:500;z-index:2000;transform:translate(100%);opacity:0;transition:all .3s ease;max-width:300px}.notification.show{transform:translate(0);opacity:1}.notification-success{background:#10b981}.notification-error{background:#ef4444}.notification-warning{background:#f59e0b}.notification-info{background:#3b82f6}@media (max-width: 768px){.header .container{flex-direction:column;gap:1rem}.logo{font-size:1rem}.page-header h2{font-size:2rem}.games-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem}.game-footer{flex-direction:column;gap:1rem;text-align:center}.controls-modal{margin:1rem;max-height:90vh}.filters{gap:.5rem}.filter-btn{padding:.4rem .8rem;font-size:.9rem}.controls-chips{flex-direction:column;align-items:flex-start;gap:.75rem}.player-chip{width:100%}}@media (max-width: 480px){.games-grid{grid-template-columns:1fr}.game-footer{padding:1rem}.controls-grid{grid-template-columns:1fr}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}button:focus,.game-card:focus{outline:2px solid #60a5fa;outline-offset:2px}