@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";body{margin:0;padding:0}#root{width:100%;min-height:100vh}:root{--bg-dark: #1a1a2e;--console-gray: #2d2d44;--screen-green: #0f380f;--pixel-green: #9bbc0f;--accent-red: #ff6b6b;--accent-blue: #4ecdc4}*{margin:0;padding:0;box-sizing:border-box}body{font-family:"Press Start 2P",cursive;background:linear-gradient(135deg,var(--bg-dark) 0%,#0f0f1e 100%);min-height:100vh;overflow-x:hidden;color:#fff}.arcade-container{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;position:relative}.screen-glow{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(155,188,15,.1) 0%,transparent 70%);pointer-events:none;animation:pulse 4s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.3}50%{opacity:.6}}.arcade-cabinet{background:linear-gradient(145deg,#3a3a52,#2d2d44);border-radius:20px;padding:30px;box-shadow:0 20px 60px #00000080,inset 0 2px 10px #ffffff1a;max-width:900px;width:100%;border:4px solid #1a1a2e}.console-screen{background:linear-gradient(145deg,#1a1a2e,#0f0f1e);border-radius:15px;padding:25px;margin-bottom:30px;box-shadow:inset 0 4px 20px #000c}.screen-frame{background:#000;border-radius:10px;padding:15px;box-shadow:0 0 20px #9bbc0f4d,inset 0 0 30px #000000e6;position:relative;overflow:hidden}.screen-content{background:var(--screen-green);min-height:350px;border-radius:5px;position:relative;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.screen-content.active{background:#0a2f0a}.scanlines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.15),rgba(0,0,0,.15) 1px,transparent 1px,transparent 2px);pointer-events:none;z-index:10}.boot-screen{text-align:center;color:var(--pixel-green);font-size:14px;text-shadow:0 0 10px var(--pixel-green)}.boot-text p{margin:15px 0;letter-spacing:2px}.blink{animation:blink 1.5s step-start infinite;font-size:16px}@keyframes blink{50%{opacity:0}}.game-screen{width:100%;height:100%;padding:20px;color:var(--pixel-green);text-shadow:0 0 5px var(--pixel-green)}.game-header{text-align:center;font-size:12px;margin-bottom:20px;padding:10px;border:2px solid var(--pixel-green);background:#0000004d}.pixel-text{letter-spacing:2px}.game-content{display:flex;flex-direction:column;gap:20px}.project-box{background:#0006;border:2px solid var(--pixel-green);padding:20px;font-size:10px;line-height:1.8}.project-desc{margin-bottom:15px}.project-tech,.project-year{margin-top:10px;display:flex;gap:10px}.tech-label,.year-label{color:#8bac0f}.controls-hint{text-align:center;font-size:10px;animation:blink 1.5s step-start infinite}.cartridge-slot{margin:20px 0;display:flex;justify-content:center}.slot-opening{width:200px;height:60px;background:linear-gradient(to bottom,#0a0a0a,#1a1a1a);border:3px solid #000;border-radius:5px;position:relative;box-shadow:inset 0 4px 10px #000000e6;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.slot-opening.drag-over{border-color:var(--accent-blue);box-shadow:inset 0 4px 10px #000000e6,0 0 20px #4ecdc480;animation:slotPulse 1s ease-in-out infinite}@keyframes slotPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.slot-hint{font-size:9px;color:#666;text-align:center;letter-spacing:1px;animation:hintBlink 2s ease-in-out infinite}@keyframes hintBlink{0%,to{opacity:.3}50%{opacity:.8}}.inserted-cartridge{width:90%;height:45px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:8px;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.5);animation:insertCartridge .5s ease-out;box-shadow:0 4px 8px #0000004d;cursor:grab;transition:all .2s ease}.inserted-cartridge:active{cursor:grabbing}@keyframes insertCartridge{0%{transform:translateY(-100px);opacity:0}to{transform:translateY(0);opacity:1}}.console-controls{display:flex;justify-content:center;align-items:center;gap:30px;margin-top:20px}.control-btn{font-family:"Press Start 2P",cursive;font-size:12px;padding:15px 30px;background:linear-gradient(145deg,#4a4a62,#3a3a52);color:#fff;border:3px solid #1a1a2e;border-radius:8px;cursor:pointer;transition:all .2s;box-shadow:0 4px #1a1a2e;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.control-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px #1a1a2e}.control-btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px #1a1a2e}.control-btn:disabled{opacity:.3;cursor:not-allowed}.insert-btn{background:linear-gradient(145deg,#4ecdc4,#3aa89f)}.eject-btn{background:linear-gradient(145deg,#ff6b6b,#d95555)}.power-led{width:20px;height:20px;border-radius:50%;box-shadow:0 0 10px currentColor,inset 0 2px 5px #00000080;transition:all .3s}.cartridge-shelf{background:linear-gradient(145deg,#2d2d44,#1a1a2e);padding:25px;border-radius:10px;border:3px solid #1a1a2e;box-shadow:inset 0 2px 10px #00000080;transition:all .3s ease;position:relative}.cartridge-shelf.drop-zone-active{border-color:var(--accent-red);box-shadow:inset 0 2px 10px #00000080,0 0 30px #ff6b6b66}.shelf-drop-hint{position:absolute;top:-35px;left:50%;transform:translate(-50%);font-size:11px;color:var(--accent-red);text-shadow:0 0 10px rgba(255,107,107,.8);animation:dropHintBounce .8s ease-in-out infinite;white-space:nowrap;letter-spacing:2px}@keyframes dropHintBounce{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(5px)}}.shelf-label{text-align:center;font-size:12px;color:#4ecdc4;margin-bottom:20px;text-shadow:0 0 10px rgba(78,205,196,.5);letter-spacing:3px}.cartridges-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px}.cartridge{height:180px;border-radius:10px 10px 5px 5px;cursor:pointer;transition:all .3s;position:relative;box-shadow:0 8px 15px #0006,inset 0 -3px 10px #0000004d;display:flex;align-items:flex-end;padding:15px;-webkit-user-select:none;user-select:none}.cartridge:before{content:"";position:absolute;top:0;left:0;right:0;height:30%;background:linear-gradient(to bottom,rgba(255,255,255,.2),transparent);border-radius:10px 10px 0 0}.cartridge:hover:not(.disabled):not(.dragging){transform:translateY(-10px) scale(1.05);box-shadow:0 15px 25px #00000080,inset 0 -3px 10px #0000004d;cursor:grab}.cartridge:active:not(.disabled){cursor:grabbing}.cartridge.dragging{opacity:.5;transform:scale(.95);cursor:grabbing}.cartridge.selected{transform:translateY(-15px) scale(1.08);box-shadow:0 20px 30px #0009,0 0 20px currentColor;animation:selectedGlow 1.5s ease-in-out infinite}@keyframes selectedGlow{0%,to{filter:brightness(1)}50%{filter:brightness(1.2)}}.cartridge.disabled{opacity:.4;cursor:not-allowed}.cartridge-label{width:100%;text-align:center;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.8);pointer-events:none}.cartridge-title{font-size:11px;display:block;margin-bottom:10px;letter-spacing:1px}.cartridge-badge{display:inline-block;background:#00000080;padding:3px 8px;border-radius:10px;font-size:9px;margin-bottom:10px;border:1px solid rgba(255,255,255,.3)}.cartridge-stripe{height:3px;background:#0000004d;margin:5px auto;width:80%;border-radius:2px}.carousel-controls{display:flex;align-items:center;justify-content:center;gap:15px;margin-top:15px}.carousel-btn{font-family:"Press Start 2P",cursive;font-size:14px;padding:8px 15px;background:#0006;color:var(--pixel-green);border:2px solid var(--pixel-green);border-radius:4px;cursor:pointer;transition:all .2s}.carousel-btn:hover:not(:disabled){background:#9bbc0f33;transform:scale(1.1)}.carousel-btn:disabled{opacity:.3;cursor:not-allowed}.carousel-indicators{display:flex;align-items:center;gap:8px}.indicator{width:8px;height:8px;border-radius:50%;background:#9bbc0f4d;border:1px solid var(--pixel-green);transition:all .3s}.indicator.active{background:var(--pixel-green);box-shadow:0 0 10px var(--pixel-green);transform:scale(1.3)}.carousel-counter{font-size:9px;color:var(--pixel-green);margin-left:8px}.arcade-footer{margin-top:40px;text-align:center}.pixel-footer{font-size:10px;color:#4ecdc4;text-shadow:0 0 10px rgba(78,205,196,.3);letter-spacing:2px}.led-lights{position:fixed;inset:0;pointer-events:none;z-index:1}.led{position:absolute;width:12px;height:12px;border-radius:50%;box-shadow:0 0 20px currentColor;animation:ledBlink 2s ease-in-out infinite}.led-1{top:10%;left:5%;background:#ff6b6b;color:#ff6b6b;animation-delay:0s}.led-2{top:20%;right:8%;background:#4ecdc4;color:#4ecdc4;animation-delay:.3s}.led-3{top:50%;left:3%;background:#95e1d3;color:#95e1d3;animation-delay:.6s}.led-4{top:70%;right:5%;background:#f38181;color:#f38181;animation-delay:.9s}.led-5{top:30%;left:10%;background:#ffd93d;color:#ffd93d;animation-delay:1.2s}.led-6{top:60%;left:8%;background:#6bcf7f;color:#6bcf7f;animation-delay:1.5s}.led-7{top:80%;right:10%;background:#a8e6cf;color:#a8e6cf;animation-delay:1.8s}.led-8{top:15%;right:15%;background:#ff8b94;color:#ff8b94;animation-delay:.4s}@keyframes ledBlink{0%,to{opacity:.2;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}.electric-bolts{position:fixed;inset:0;pointer-events:none;z-index:0}.bolt{position:absolute;width:2px;height:150px;background:linear-gradient(to bottom,transparent,rgba(155,188,15,.6),transparent);filter:blur(1px);animation:boltAnimation 3s ease-in-out infinite;opacity:0}.bolt-1{top:-150px;left:15%;animation-delay:0s;transform:rotate(10deg)}.bolt-2{top:-150px;right:20%;animation-delay:1s;transform:rotate(-15deg)}.bolt-3{top:-150px;left:70%;animation-delay:2s;transform:rotate(8deg)}.bolt-4{top:-150px;right:40%;animation-delay:1.5s;transform:rotate(-10deg)}@keyframes boltAnimation{0%{top:-150px;opacity:0}10%{opacity:1}20%{opacity:.8}30%{opacity:1}50%{top:100vh;opacity:.6}to{top:100vh;opacity:0}}.social-links{display:flex;gap:20px;justify-content:center;margin-top:30px;position:relative;z-index:10}.social-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#3a3a52,#2d2d44);border:2px solid #4ecdc4;border-radius:50%;transition:all .3s ease;cursor:pointer;box-shadow:0 4px 10px #0000004d}.social-icon svg{width:20px;height:20px;color:#4ecdc4;transition:all .3s ease}.social-icon:hover{transform:translateY(-5px) scale(1.1);box-shadow:0 8px 20px #4ecdc466}.social-icon.github:hover{border-color:#fff;box-shadow:0 8px 20px #ffffff4d}.social-icon.github:hover svg{color:#fff}.social-icon.linkedin:hover{border-color:#0077b5;box-shadow:0 8px 20px #0077b566}.social-icon.linkedin:hover svg{color:#0077b5}.social-icon.whatsapp:hover{border-color:#25d366;box-shadow:0 8px 20px #25d36666}.social-icon.whatsapp:hover svg{color:#25d366}@media(max-width:768px){.arcade-cabinet{padding:20px}.console-screen{padding:15px}.screen-content{min-height:280px}.boot-screen{font-size:11px}.game-screen{padding:15px;font-size:9px}.project-box{padding:15px;font-size:8px}.control-btn{font-size:10px;padding:12px 20px}.cartridges-container{grid-template-columns:repeat(2,1fr);gap:15px}.cartridge{height:150px}.cartridge-title{font-size:9px}.shelf-label{font-size:10px}.pixel-footer{font-size:8px}.shelf-drop-hint{font-size:9px}}@media(max-width:480px){.arcade-container{padding:10px}.console-controls{flex-direction:column;gap:15px}.control-btn{width:100%}.cartridges-container{grid-template-columns:1fr}.slot-hint{font-size:7px}.social-links{display:flex;gap:20px;justify-content:center;margin-top:30px;position:relative;z-index:10}.social-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#3a3a52,#2d2d44);border:2px solid #4ecdc4;border-radius:50%;transition:all .3s ease;cursor:pointer;box-shadow:0 4px 10px #0000004d}.social-icon svg{width:20px;height:20px;color:#4ecdc4;transition:all .3s ease}.social-icon:hover{transform:translateY(-5px) scale(1.1);box-shadow:0 8px 20px #4ecdc466}.social-icon.github:hover{border-color:#fff;box-shadow:0 8px 20px #ffffff4d}.social-icon.github:hover svg{color:#fff}.social-icon.linkedin:hover{border-color:#0077b5;box-shadow:0 8px 20px #0077b566}.social-icon.linkedin:hover svg{color:#0077b5}.social-icon.whatsapp:hover{border-color:#25d366;box-shadow:0 8px 20px #25d36666}.social-icon.whatsapp:hover svg{color:#25d366}}