@font-face{font-family:ibm-bold;src:url(/portfolio-gamified/fonts/IBMPlexSans-Bold.ttf)}@font-face{font-family:ibm-regular;src:url(/portfolio-gamified/fonts/IBMPlexSans-Regular.ttf)}:root{--color1: #0b0c15;--color2: #2de2e6;--color3: #ffffff;--color4: rgba(20, 25, 40, .9);--neon-glow: 0 0 10px var(--color2), 0 0 20px rgba(0, 243, 255, .2)}*,*:before,*:after{box-sizing:border-box}body,html{margin:0;padding:0;height:100vh;background-color:var(--color1);color:var(--color3);overflow:hidden;font-family:ibm-regular,monospace}.camera-controller{display:flex;position:fixed;top:20px;right:20px;z-index:50;gap:10px}.camera-controller-btn{width:50px;height:50px;border-radius:50%;background-color:#0009;border:1px solid var(--color2);color:var(--color2);font-size:1.8rem;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all .2s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 0 5px #00000080}.camera-controller-btn:active{background-color:var(--color2);color:var(--color1);box-shadow:var(--neon-glow)}.camera-controller-btn:hover{background-color:#2de2e61a;box-shadow:0 0 10px var(--color2)}.settings-widget{position:fixed;top:20px;left:20px;z-index:100;display:flex;flex-direction:column;align-items:flex-start;gap:10px}.settings-widget .settings-btn{width:50px;height:50px;border-radius:50%;background:#0009;border:2px solid var(--color2);color:var(--color2);font-size:1.5rem;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:all .3s cubic-bezier(.175,.885,.32,1.275);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 0 10px #0000004d}.settings-widget .settings-btn:hover{background:var(--color2);color:var(--color1);transform:rotate(90deg);box-shadow:var(--neon-glow)}.settings-widget .settings-btn.active{background:var(--color2);color:var(--color1);transform:rotate(180deg)}.settings-widget .settings-panel{background:var(--color4);border:1px solid var(--color2);border-radius:12px;padding:15px;width:220px;opacity:0;transform:translateY(-20px) scale(.9);pointer-events:none;transition:all .3s ease;transform-origin:top left;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.settings-widget .settings-panel.expanded{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.settings-widget .settings-panel .volume-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-family:ibm-bold;font-size:.9rem}.settings-widget .settings-panel .volume-row:last-child{margin-bottom:0}.settings-widget .settings-panel .cyber-range{-webkit-appearance:none;width:100%;height:4px;background:#333;border-radius:2px;outline:none}.settings-widget .settings-panel .cyber-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--color2);cursor:pointer;box-shadow:0 0 8px var(--color2);border:2px solid #fff}.controls-message,.cp-message{position:fixed;left:50%;transform:translate(-50%);z-index:4;font-family:ibm-bold;color:var(--color2);text-shadow:0 0 5px rgba(0,0,0,.8);opacity:.8;max-width:80vw;width:100%;text-align:center;pointer-events:none}.controls-message{top:10vh;font-size:1rem}.cp-message{bottom:5vh;font-size:.7rem}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.modal-content{background:var(--color4);border:2px solid var(--color2);padding:2rem;border-radius:12px;max-width:900px;width:90%;box-shadow:var(--neon-glow);text-align:center;position:relative;max-height:90vh;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--color2);margin-bottom:25px;padding-bottom:15px}.modal-header h1{color:var(--color2);margin:0;font-size:1.6rem;font-family:ibm-bold;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 10px rgba(45,226,230,.4)}.modal-header .close-btn{background:transparent;border:1px solid #ff5555;color:#f55;font-size:1.2rem;width:35px;height:35px;display:flex;justify-content:center;align-items:center;cursor:pointer;font-family:ibm-bold;transition:all .2s;border-radius:4px}.modal-header .close-btn:hover{background:#f55;color:#000;box-shadow:0 0 10px #f55}.modal-btn{background:transparent;border:2px solid var(--color2);color:var(--color2);padding:10px 20px;margin:10px;cursor:pointer;font-family:ibm-bold;text-transform:uppercase;font-size:1rem;transition:.2s;letter-spacing:1px}.modal-btn:hover{background:var(--color2);color:var(--color1);box-shadow:var(--neon-glow)}.skills-modal{max-width:800px}.skills-modal .memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;padding:10px}.skills-modal .memory-card{background-color:transparent;height:100px;perspective:1000px;cursor:pointer}.skills-modal .memory-card .card-inner{position:relative;width:100%;height:100%;text-align:center;transition:transform .4s;transform-style:preserve-3d}.skills-modal .memory-card.flipped .card-inner{transform:rotateY(180deg)}.skills-modal .memory-card .card-front,.skills-modal .memory-card .card-back{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:8px;display:flex;justify-content:center;align-items:center;border:2px solid var(--color2);box-shadow:0 0 5px #00000080}.skills-modal .memory-card .card-front{background-color:#1a1b26;color:var(--color2);font-size:1.5rem;font-family:ibm-bold}.skills-modal .memory-card .card-back{background-color:#0f0f23;transform:rotateY(180deg);border-color:#fff}.skills-modal .memory-card .card-back img{width:60%;height:auto;object-fit:contain}.work-experience-modal{max-width:750px;text-align:left}.work-experience-modal .timeline-container{border-left:3px solid var(--color2);padding-left:30px;margin-left:10px}.work-experience-modal .timeline-item{position:relative;margin-bottom:40px}.work-experience-modal .timeline-item .timeline-marker{position:absolute;left:-38px;top:6px;width:14px;height:14px;background-color:var(--color2);border-radius:50%;box-shadow:0 0 8px var(--color2);border:none;transform:none}.work-experience-modal .timeline-item .role-title{color:var(--color3);margin:0 0 5px;font-size:1.4rem;font-family:ibm-bold}.work-experience-modal .timeline-item .company-info{color:var(--color2);font-size:.9rem;margin-bottom:15px;font-family:ibm-bold;letter-spacing:1px}.work-experience-modal .timeline-item .job-desc{color:#ccc;line-height:1.6;font-size:.95rem;font-family:ibm-regular;white-space:pre-line;padding-left:0;border:none}.project-modal{width:95%;padding:25px}.project-modal .gallery-container{display:flex;align-items:center;gap:20px;justify-content:space-between}.project-modal .nav-btn{background:#00000080;border:1px solid var(--color2);color:var(--color2);font-size:1.5rem;width:45px;height:60px;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:ibm-bold}.project-modal .nav-btn:hover{background:var(--color2);color:var(--color1);box-shadow:var(--neon-glow)}.project-modal .project-display{flex-grow:1;display:flex;flex-direction:column;gap:25px;align-items:center}@media(min-width:768px){.project-modal .project-display{flex-direction:row;align-items:flex-start;text-align:left}}.project-modal .project-display .project-image-container{flex:1;width:100%;border:2px solid var(--color2);border-radius:8px;overflow:hidden;box-shadow:0 0 15px #00000080;padding:0;background:transparent}.project-modal .project-display .project-image-container .project-img{width:100%;height:auto;display:block;border:none}.project-modal .project-display .project-info{flex:1;display:flex;flex-direction:column;gap:15px;width:100%}.project-modal .project-display .project-info h2{color:var(--color3);margin:0;font-size:1.8rem;font-family:ibm-bold;text-shadow:0 0 5px rgba(255,255,255,.2);text-transform:none}.project-modal .project-display .project-info .project-desc{color:#bbb;line-height:1.6;font-size:1rem;font-family:ibm-regular}.project-modal .project-display .project-info .project-counter{margin-top:auto;text-align:right;font-family:ibm-bold;color:#666;font-size:1rem}.about-modal{text-align:left}.about-modal .about-container{display:flex;gap:30px;flex-direction:column}@media(min-width:700px){.about-modal .about-container{flex-direction:row}}.about-modal .about-left{flex:1;display:flex;flex-direction:column;align-items:center;gap:20px}.about-modal .about-left .avatar-frame{width:140px;height:140px;border:3px solid var(--color2);background-color:#0000004d;display:flex;justify-content:center;align-items:center;border-radius:50%;box-shadow:0 0 15px #00000080;overflow:hidden}.about-modal .about-left .avatar-frame .pixel-avatar{width:64px;height:auto;image-rendering:pixelated;transform:scale(2.5)}.about-modal .about-left .stats-box{width:100%;background:#0003;padding:15px;border:1px solid var(--color2);border-radius:8px}.about-modal .about-left .stats-box h3{color:var(--color2);margin:0 0 10px;font-family:ibm-bold;font-size:1rem;text-align:center;border-bottom:1px dashed var(--color2);padding-bottom:5px}.about-modal .about-left .stats-box .stat-row{display:flex;align-items:center;margin-bottom:8px;font-size:.8rem;font-family:ibm-bold}.about-modal .about-left .stats-box .stat-row .stat-label{width:90px;color:var(--color3)}.about-modal .about-left .stats-box .stat-row .stat-bar-container{flex-grow:1;height:8px;background:#333;border-radius:4px;overflow:hidden;border:none}.about-modal .about-left .stats-box .stat-row .stat-bar-container .stat-bar-fill{height:100%;background-color:var(--color2);box-shadow:0 0 5px var(--color2)}.about-modal .about-right{flex:2;display:flex;flex-direction:column;gap:10px}.about-modal .about-right .profile-name{color:var(--color3);margin:0;font-family:ibm-bold;font-size:2.2rem;text-transform:uppercase;line-height:1.1;text-shadow:0 0 10px var(--color2)}.about-modal .about-right .profile-role{color:var(--color2);margin:0;font-family:ibm-bold;font-size:1.1rem;letter-spacing:1px}.about-modal .about-right .divider{height:2px;background:linear-gradient(90deg,var(--color2),transparent);width:100%;margin:15px 0}.about-modal .about-right .profile-bio{color:#ccc;font-family:ibm-regular;line-height:1.6;white-space:pre-line;font-size:1rem}.about-modal .about-right .socials-grid{display:flex;flex-wrap:wrap;gap:15px;margin:10px 0}.about-modal .about-right .socials-grid .social-item{padding:8px;border:1px solid var(--color2);background:#ffffff0d;cursor:pointer;transition:.2s;width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px}.about-modal .about-right .socials-grid .social-item:hover{background:var(--color2);box-shadow:0 0 10px var(--color2);transform:translateY(-2px)}.about-modal .about-right .socials-grid .social-item .social-icon-img{width:24px;height:24px;object-fit:contain}.about-modal .about-right .about-section h4{color:var(--color2);margin:20px 0 10px;font-family:ibm-bold;border-bottom:1px solid rgba(255,255,255,.1);font-size:1.1rem;padding-bottom:5px}.about-modal .about-right .about-section .info-card{background:#ffffff08;border-left:3px solid var(--color2);padding:10px;margin-bottom:8px;border-radius:0 4px 4px 0}.about-modal .about-right .about-section .info-card.cert-card{border-left-color:#f9f871}.about-modal .about-right .about-section .info-card .info-title{color:#fff;font-family:ibm-bold;display:block;font-size:1rem}.about-modal .about-right .about-section .info-card .info-subtitle{color:#888;font-size:.9rem}.about-modal .about-right .about-section .info-card .info-year{color:var(--color2);font-size:.8rem;font-family:ibm-bold;margin-top:2px}.about-modal .about-right .about-section .info-card .cert-details{display:flex;justify-content:space-between;align-items:center}.copy-feedback{color:#39ff14;font-family:ibm-bold;margin-top:10px;font-size:.9rem;animation:fadeIn .3s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media(max-width:600px){.modal-content{padding:1rem;width:95%;max-height:85vh}.modal-header h1{font-size:1.2rem}.skills-modal .memory-grid{grid-template-columns:repeat(3,1fr);gap:10px}.skills-modal .memory-card{height:80px}.project-modal .gallery-container{flex-direction:column}.project-modal .nav-btn{width:100%;height:40px;margin-bottom:10px}.project-modal .nav-btn.left{order:2}.project-modal .nav-btn.right{order:1}.project-modal .project-display{order:0}.about-modal .about-container{flex-direction:column}.about-left{border-bottom:1px solid var(--color2);padding-bottom:20px;margin-bottom:10px}.settings-widget{top:auto;bottom:20px;left:20px;flex-direction:column-reverse}.settings-widget .settings-panel{transform-origin:bottom left;transform:translateY(10px)}.settings-widget .settings-panel.expanded{transform:translateY(0)}.camera-controller{top:auto;bottom:30px;right:20px;gap:15px}.camera-controller-btn{width:60px;height:60px;font-size:1.5rem;border-radius:50%;background-color:#000c;border-width:2px}.music-control{display:none!important}}.dialogue-box{position:fixed;z-index:50;background-color:var(--color1);border:4px solid var(--color2);border-radius:8px;padding:1rem;color:var(--color3);font-family:ibm-regular,monospace;cursor:pointer;transform:translate(-50%,-100%);box-shadow:var(--neon-glow)}.dialogue-box .npc-label{position:absolute;top:-12px;left:12px;background-color:var(--color2);color:var(--color1);padding:2px 8px;border-radius:4px;border:1px solid #fff;font-size:.75rem;font-weight:700;text-transform:uppercase;box-shadow:0 2px 4px #00000080;font-family:ibm-bold}.dialogue-box .dialogue-text{font-size:.9rem;line-height:1.6;margin-top:.5rem;min-height:2rem}.dialogue-box .cursor{animation:blink 1s infinite;color:var(--color2);margin-left:2px}.dialogue-box .hint-text{margin-top:4px;text-align:right;font-size:10px;color:#888;font-family:ibm-bold;text-transform:uppercase}.dialogue-box .dialogue-options{display:flex;justify-content:center;gap:15px;margin-top:10px}.dialogue-box .option-btn{background:transparent;border:1px solid var(--color2);color:var(--color2);padding:5px 15px;font-family:ibm-bold;cursor:pointer;text-transform:uppercase;font-size:.8rem;transition:all .2s;border-radius:4px}.dialogue-box .option-btn:hover{background:var(--color2);color:var(--color1);box-shadow:0 0 5px var(--color2)}.dialogue-box .speech-arrow{position:absolute;bottom:-14px;left:50%;transform:translate(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid var(--color2)}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}