:root{--primary: #6366f1;--primary-glow: rgba(99, 102, 241, .4);--primary-dark: #4f46e5;--accent: #06b6d4;--accent-neon: #22d3ee;--emerald: #10b981;--amber: #f59e0b;--rose: #f43f5e;--bg-dark: #090d16;--bg-card: rgba(15, 23, 42, .75);--bg-card-border: rgba(255, 255, 255, .12);--bg-glass: rgba(30, 41, 59, .65);--text-main: #f8fafc;--text-muted: #94a3b8;--text-sub: #cbd5e1;--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--radius-full: 9999px;--font-main: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;--font-display: "Outfit", sans-serif;--font-mono: "JetBrains Mono", monospace}*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}body,html{width:100%;height:100%;overflow:hidden;background-color:var(--bg-dark);font-family:var(--font-main);color:var(--text-main)}#canvas-container{position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:1;outline:none}.glass-card{background:var(--bg-card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--bg-card-border);box-shadow:0 20px 50px #0006,inset 0 1px #ffffff1a;border-radius:var(--radius-lg)}#ui-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between}#ui-overlay *{pointer-events:auto}.top-nav{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:linear-gradient(180deg,#090d16d9,#090d1600)}.brand-badge{display:flex;align-items:center;gap:10px;background:var(--bg-glass);padding:8px 18px;border-radius:var(--radius-full);border:1px solid var(--bg-card-border);box-shadow:0 4px 20px #00000040}.status-dot{width:10px;height:10px;background:var(--emerald);border-radius:50%;box-shadow:0 0 10px var(--emerald);animation:pulseDot 2s infinite ease-in-out}@keyframes pulseDot{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.7}}.brand-title{font-family:var(--font-display);font-weight:800;letter-spacing:1px;font-size:15px;background:linear-gradient(90deg,#60a5fa,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.brand-tag{font-size:11px;font-weight:700;background:#6366f140;color:#a5b4fc;padding:2px 8px;border-radius:var(--radius-sm);border:1px solid rgba(99,102,241,.3)}.top-actions{display:flex;align-items:center;gap:12px}.hud-btn{display:flex;align-items:center;gap:8px;background:var(--bg-glass);color:var(--text-main);border:1px solid var(--bg-card-border);padding:8px 16px;border-radius:var(--radius-md);font-family:var(--font-main);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #00000026}.hud-btn:hover{background:#ffffff1f;border-color:#ffffff40;transform:translateY(-2px);box-shadow:0 6px 18px #00000040}.hud-btn:active{transform:translateY(0)}.tour-btn{background:linear-gradient(135deg,#6366f166,#06b6d466);border-color:#6366f199}.tour-btn:hover{background:linear-gradient(135deg,#6366f199,#06b6d499);box-shadow:0 0 20px #6366f166}.main-site-btn{text-decoration:none;background:linear-gradient(135deg,#10b98140,#06b6d440);border:1px solid rgba(52,211,153,.5);color:#a7f3d0}.main-site-btn:hover{background:linear-gradient(135deg,#10b98173,#06b6d473);border-color:#34d399;color:#fff;box-shadow:0 0 20px #34d39966;transform:translateY(-2px)}.minimap-wrapper{position:absolute;top:76px;right:24px;background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--bg-card-border);border-radius:var(--radius-md);padding:10px;box-shadow:0 10px 30px #00000059;display:flex;flex-direction:column;gap:8px;width:170px}.minimap-header{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--text-muted)}#player-zone-label{color:var(--accent-neon);background:#06b6d426;padding:2px 6px;border-radius:4px;font-weight:800}#minimap-canvas{width:150px;height:150px;background:#080d16e6;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.08)}.minimap-legend{display:flex;justify-content:space-between;font-size:10px;color:var(--text-muted);font-weight:600}.minimap-legend span{display:flex;align-items:center;gap:4px}.dot{width:7px;height:7px;border-radius:50%;display:inline-block}.player-dot{background:#38bdf8;box-shadow:0 0 6px #38bdf8}.npc-dot{background:#f43f5e}.goal-dot{background:#22c55e}.quick-nav-bar{align-self:center;margin-bottom:24px;display:flex;gap:8px;background:var(--bg-card);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:8px 12px;border-radius:var(--radius-full);border:1px solid var(--bg-card-border);box-shadow:0 10px 30px #00000059}.nav-pill{display:flex;align-items:center;gap:6px;background:transparent;color:var(--text-sub);border:none;padding:8px 16px;border-radius:var(--radius-full);font-family:var(--font-main);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease}.nav-pill:hover{background:#ffffff1a;color:#fff;transform:translateY(-2px)}.nav-pill.active{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;box-shadow:0 4px 15px var(--primary-glow)}.dialogue-box{position:absolute;bottom:90px;left:50%;transform:translate(-50%);width:90%;max-width:620px;background:#0f172ae0;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(99,102,241,.4);border-radius:var(--radius-lg);padding:20px;box-shadow:0 20px 50px #00000080,0 0 30px #6366f140;display:flex;gap:16px;animation:slideUpFade .3s cubic-bezier(.16,1,.3,1);z-index:50}@keyframes slideUpFade{0%{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%)}}.dialogue-avatar-box{flex-shrink:0;width:58px;height:58px;background:linear-gradient(135deg,#6366f14d,#06b6d44d);border:2px solid rgba(99,102,241,.5);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:30px}.dialogue-content{flex:1;display:flex;flex-direction:column;gap:8px}.dialogue-header{display:flex;align-items:center;gap:10px}.speaker-name{font-family:var(--font-display);font-size:16px;font-weight:700;color:#fff}.speaker-role{font-size:11px;color:var(--accent-neon);background:#06b6d426;padding:2px 8px;border-radius:4px;font-weight:600}.speech-text{font-size:14px;line-height:1.5;color:#e2e8f0}.dialogue-choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.choice-btn{background:#ffffff14;border:1px solid rgba(255,255,255,.18);color:#fff;padding:8px 14px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease}.choice-btn:hover{background:linear-gradient(135deg,var(--primary),var(--accent));border-color:transparent;transform:translateY(-2px);box-shadow:0 4px 15px #6366f159}.dialogue-close{position:absolute;top:12px;right:14px;background:transparent;border:none;color:var(--text-muted);font-size:16px;cursor:pointer;padding:4px 8px;border-radius:4px}.dialogue-close:hover{color:#fff;background:#ffffff1a}.interaction-prompt{position:absolute;top:75%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;background:#0f172ad9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);padding:8px 18px;border-radius:var(--radius-full);font-size:13px;font-weight:700;color:#fff;box-shadow:0 8px 25px #0006;animation:bounceHint 1.8s infinite ease-in-out}@keyframes bounceHint{0%,to{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-56%)}}.key-badge{background:linear-gradient(135deg,#f43f5e,#ec4899);color:#fff;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:6px;font-weight:800;font-size:12px;box-shadow:0 0 10px #f43f5e80}.goal-banner{position:absolute;top:20%;left:50%;transform:translate(-50%,-50%) scale(1);background:linear-gradient(135deg,#10b981,#06b6d4);padding:24px 48px;border-radius:var(--radius-lg);border:3px solid #fff;box-shadow:0 0 60px #10b98199,0 20px 40px #00000080;text-align:center;animation:popGoal 2.5s forwards cubic-bezier(.175,.885,.32,1.275);z-index:100}@keyframes popGoal{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}15%{transform:translate(-50%,-50%) scale(1.1);opacity:1}25%{transform:translate(-50%,-50%) scale(1)}80%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-80%) scale(.8);opacity:0}}.goal-text{font-family:var(--font-display);font-size:40px;font-weight:900;color:#fff;text-shadow:0 4px 10px rgba(0,0,0,.3);letter-spacing:2px}.goal-subtext{font-size:16px;font-weight:600;color:#ecfdf5;margin-top:4px}.goal-score-tag{display:inline-block;margin-top:8px;padding:4px 16px;background:#0006;border-radius:var(--radius-full);font-family:var(--font-mono);font-size:18px;font-weight:800;color:#facc15;letter-spacing:2px}.match-hud{position:absolute;top:75px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;background:#0f172ae0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:2px solid rgba(56,189,248,.4);padding:8px 20px;border-radius:var(--radius-lg);box-shadow:0 10px 30px #00000080,0 0 20px #38bdf833;z-index:40;animation:fadeInDown .4s ease-out}.match-badge{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:#38bdf8;letter-spacing:1.5px;text-transform:uppercase}.match-score-pill{display:flex;align-items:center;gap:12px;background:#00000080;padding:4px 14px;border-radius:var(--radius-full);font-size:13px;font-weight:800}.match-score-pill .team.blue{color:#60a5fa}.match-score-pill .team.red{color:#f87171}.match-score-pill .team b{font-size:16px;color:#fff;margin-left:4px;background:#ffffff26;padding:2px 8px;border-radius:4px}.match-score-pill .vs-tag{color:#f59e0b;font-size:11px;font-weight:900}.match-user-status{font-size:11px;color:#94a3b8;letter-spacing:.5px}.match-user-status b{color:#22c55e}.toast-popup{position:absolute;top:80px;left:50%;transform:translate(-50%);background:#0f172ae6;border:1px solid rgba(245,158,11,.5);padding:12px 24px;border-radius:var(--radius-full);font-size:14px;color:#fef3c7;box-shadow:0 10px 30px #0006,0 0 20px #f59e0b33;animation:toastAnim 3s forwards ease-in-out;z-index:90}@keyframes toastAnim{0%{opacity:0;transform:translate(-50%,-10px)}10%,80%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-15px)}}.controls-hint{position:absolute;bottom:24px;left:24px;background:#0f172acc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--bg-card-border);padding:10px 18px;border-radius:var(--radius-md);display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--text-sub);box-shadow:0 8px 25px #00000059}.controls-hint b{color:#38bdf8}.camera-controls-widget{position:absolute;bottom:24px;right:24px;display:flex;align-items:center;gap:6px;background:#0f172ad9;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:6px 10px;border-radius:var(--radius-full);border:1px solid var(--bg-card-border);box-shadow:0 10px 25px #0006}.cam-btn{background:#ffffff14;border:1px solid rgba(255,255,255,.15);color:#fff;border-radius:var(--radius-full);padding:6px 12px;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.walk-status-banner{position:absolute;bottom:85px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;background:#0f172aeb;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(56,189,248,.4);padding:10px 22px;border-radius:var(--radius-full);font-size:14px;font-weight:700;color:#fff;box-shadow:0 10px 30px #00000080,0 0 20px #38bdf840;z-index:80;animation:pulseBanner 2.5s infinite ease-in-out}@keyframes pulseBanner{0%,to{transform:translate(-50%) scale(1)}50%{transform:translate(-50%) scale(1.02)}}.pulse-icon{font-size:18px;display:inline-block;animation:walkBounce .8s infinite alternate ease-in-out}@keyframes walkBounce{0%{transform:translateY(0)}to{transform:translateY(-4px)}}.btn-skip-walk{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border:1px solid rgba(255,255,255,.2);padding:5px 14px;border-radius:var(--radius-full);font-size:12px;font-weight:700;cursor:pointer;transition:all .2s ease}.btn-skip-walk:hover{background:#f43f5e;transform:scale(1.05)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#04070ed9;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;animation:modalFadeIn .25s ease-out}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}.modal-card{width:100%;max-width:680px;max-height:90vh;overflow-y:auto;padding:32px;position:relative;display:flex;flex-direction:column;gap:20px}.modal-large{max-width:960px}.modal-header{display:flex;justify-content:space-between;align-items:flex-start}.modal-title-box{display:flex;flex-direction:column;gap:6px}.badge{font-size:10px;font-weight:800;letter-spacing:1px;color:var(--accent-neon);text-transform:uppercase}.modal-title-box h2{font-family:var(--font-display);font-size:24px;font-weight:800;color:#fff}.modal-title-box p{font-size:13px;color:var(--text-muted)}.modal-close{background:#ffffff14;border:1px solid var(--bg-card-border);color:var(--text-sub);width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;transition:all .2s ease}.modal-close:hover{background:#fff3;color:#fff;transform:rotate(90deg)}.modal-tabs{display:flex;gap:8px;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:12px}.tab-btn{background:transparent;border:none;color:var(--text-muted);font-family:var(--font-main);font-size:13px;font-weight:600;padding:6px 14px;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s ease}.tab-btn:hover{color:#fff;background:#ffffff0f}.tab-btn.active{color:#fff;background:#6366f133;border:1px solid rgba(99,102,241,.4)}.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:10px 0}.project-card{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md);padding:18px;display:flex;flex-direction:column;justify-content:space-between;gap:12px;transition:all .25s cubic-bezier(.16,1,.3,1)}.project-card:hover{background:#ffffff14;border-color:#6366f166;transform:translateY(-4px);box-shadow:0 12px 28px #00000059}.project-card-top{display:flex;flex-direction:column;gap:8px}.project-icon{font-size:28px}.project-card h3{font-size:16px;font-weight:700;color:#fff}.project-card p{font-size:12px;color:var(--text-sub);line-height:1.5}.project-tags{display:flex;flex-wrap:wrap;gap:4px}.tech-tag{font-size:10px;font-family:var(--font-mono);background:#6366f126;color:#a5b4fc;padding:2px 6px;border-radius:4px}.project-links{display:flex;gap:8px;margin-top:6px}.link-btn{flex:1;text-align:center;background:#ffffff14;color:#fff;text-decoration:none;padding:6px 10px;border-radius:6px;font-size:11px;font-weight:600;transition:all .2s ease}.link-btn:hover{background:var(--primary)}.resume-body{display:flex;flex-direction:column;gap:20px}.resume-hero{display:flex;gap:16px;align-items:center;background:#ffffff08;padding:16px;border-radius:var(--radius-md)}.resume-avatar{font-size:42px;background:#6366f133;width:70px;height:70px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);border:1px solid rgba(99,102,241,.4)}.resume-meta h3{font-size:16px;font-weight:700;color:#fff}.resume-meta p{font-size:12px;color:var(--text-muted);margin:4px 0 8px}.resume-tags{display:flex;gap:6px}.chip{font-size:11px;background:#06b6d426;color:var(--accent-neon);padding:2px 8px;border-radius:var(--radius-full)}.skills-section h4,.timeline-section h4{font-size:14px;font-weight:700;color:#fff;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}.skills-bars{display:flex;flex-direction:column;gap:10px}.skill-item{display:flex;flex-direction:column;gap:4px}.skill-info{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:var(--text-sub)}.progress-track{width:100%;height:6px;background:#ffffff14;border-radius:var(--radius-full);overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent-neon));border-radius:var(--radius-full)}.timeline{display:flex;flex-direction:column;gap:14px;border-left:2px solid rgba(99,102,241,.3);padding-left:14px}.timeline-node{position:relative}.timeline-node:before{content:"";position:absolute;left:-19px;top:4px;width:8px;height:8px;background:var(--accent-neon);border-radius:50%;box-shadow:0 0 8px var(--accent-neon)}.node-year{font-size:11px;font-weight:700;color:var(--accent-neon)}.timeline-node h5{font-size:14px;color:#fff;margin:2px 0 4px}.timeline-node p{font-size:12px;color:var(--text-muted)}.contact-form{display:flex;flex-direction:column;gap:16px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-group{display:flex;flex-direction:column;gap:6px}.form-group label{font-size:12px;font-weight:600;color:var(--text-sub)}.form-group input,.form-group select,.form-group textarea{background:#0f172acc;border:1px solid var(--bg-card-border);border-radius:var(--radius-sm);padding:10px 14px;color:#fff;font-family:var(--font-main);font-size:13px;outline:none;transition:all .2s ease}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary);box-shadow:0 0 15px var(--primary-glow)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:var(--radius-md);font-family:var(--font-main);font-size:13px;font-weight:700;cursor:pointer;border:none;transition:all .2s cubic-bezier(.4,0,.2,1)}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;box-shadow:0 4px 15px #6366f166}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px #6366f199}.btn-secondary{background:#ffffff14;border:1px solid var(--bg-card-border);color:#fff}.btn-secondary:hover{background:#ffffff29}.btn-block{width:100%}.btn-huge{padding:14px 32px;font-size:16px;border-radius:var(--radius-full)}.modal-footer{display:flex;justify-content:flex-end;gap:12px;margin-top:10px}.text-center{justify-content:center!important}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.help-card{background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md);padding:16px;display:flex;flex-direction:column;gap:6px}.help-icon{font-size:26px}.help-card h4{font-size:14px;color:#fff}.help-card p{font-size:12px;color:var(--text-muted);line-height:1.4}.loading-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at center,#0f172a,#060911);z-index:500;display:flex;align-items:center;justify-content:center;transition:opacity .8s ease,visibility .8s ease}.loading-overlay.fade-out{opacity:0;visibility:hidden;pointer-events:none}.loader-content{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}.loader-logo-ring{width:76px;height:76px;border-radius:50%;border:3px solid rgba(56,189,248,.2);border-top-color:#38bdf8;border-right-color:#818cf8;display:flex;align-items:center;justify-content:center;animation:spinRing 1.2s linear infinite;box-shadow:0 0 30px #38bdf859}@keyframes spinRing{to{transform:rotate(360deg)}}.loader-emoji{font-size:34px;animation:counterRotate 1.2s linear infinite}@keyframes counterRotate{to{transform:rotate(-360deg)}}.loader-brand{font-family:var(--font-display);font-size:28px;font-weight:900;letter-spacing:4px;color:#fff;text-shadow:0 0 25px rgba(56,189,248,.6)}.loader-subtitle{font-size:11px;font-weight:700;letter-spacing:3px;color:var(--accent-neon);margin-top:-6px}.progress-bar-wrap{width:240px;height:6px;background:#ffffff14;border-radius:var(--radius-full);overflow:hidden;margin-top:10px;border:1px solid rgba(255,255,255,.12)}.progress-bar-fill{width:0%;height:100%;background:linear-gradient(90deg,#38bdf8,#818cf8,#a855f7);border-radius:var(--radius-full);box-shadow:0 0 12px #38bdf8;transition:width .2s ease-out}.loader-status{font-size:12px;color:var(--text-muted);font-family:var(--font-mono)}.mobile-controls{display:none;position:absolute;bottom:90px;left:20px;right:20px;justify-content:space-between;align-items:flex-end;pointer-events:none}.joystick-container{width:100px;height:100px;background:#ffffff1a;border-radius:50%;border:2px solid rgba(255,255,255,.2);pointer-events:auto;position:relative}.mobile-action-btn{pointer-events:auto;background:var(--primary);color:#fff;border:none;width:70px;height:70px;border-radius:50%;font-weight:800;font-size:11px;box-shadow:0 0 20px var(--primary-glow)}.hidden{display:none!important}@media(max-width:768px){.minimap-wrapper,.controls-hint{display:none}.top-nav{padding:12px 16px}.btn-text{display:none}.quick-nav-bar{width:92%;overflow-x:auto;justify-content:flex-start}.mobile-controls{display:flex}.form-row,.help-grid,.intro-features{grid-template-columns:1fr}}