*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#0a0a0a;--fg:#f0ede6;--muted:#888;
  --c1:#e85d2f;--c2:#f5c842;--c3:#5bceae;--c4:#c084fc;--c5:#fb923c;
}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--fg);font-family:'Segoe UI',system-ui,sans-serif;overflow-x:hidden;}

.cursor{position:fixed;width:12px;height:12px;border-radius:50%;background:var(--c1);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:transform .1s,background .3s;mix-blend-mode:difference;}
.cursor-ring{position:fixed;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--c2);pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:all .15s ease;}

nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:1.2rem 3rem;background:rgba(10,10,10,.85);backdrop-filter:blur(10px);border-bottom:1px solid #1a1a1a;}
.logo{font-size:1.1rem;font-weight:700;letter-spacing:.15em;color:var(--c2);}
.nav-links{display:flex;gap:2rem;}
.nav-links a{color:var(--muted);text-decoration:none;font-size:.85rem;letter-spacing:.1em;transition:color .2s;}
.nav-links a:hover{color:var(--fg);}

section{min-height:auto;padding:6rem 3rem 8rem;position:relative;}

/* HERO SECTION */
#hero{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-top:11rem;overflow:hidden;}
.hero-wrapper{display:grid;grid-template-columns:1fr;gap:5rem;align-items:center;width:100%;max-width:1300px;}

.hero-eyebrow{font-size:.8rem;letter-spacing:.3em;color:var(--c3);margin-bottom:1rem;opacity:0;animation:fadeUp .8s .3s forwards;}
.hero-name{font-size:clamp(3.5rem,8vw,7.5rem);font-weight:900;line-height:.95;letter-spacing:-.04em;margin-bottom:2rem;}
.hero-name span{display:block;}
.name-shivam{color:var(--fg);opacity:0;animation:fadeUp .8s .5s forwards;}
.name-vaid{color:var(--c1);opacity:0;animation:fadeUp .8s .7s forwards;}
.hero-desc{max-width:480px;color:var(--muted);font-size:1.1rem;line-height:1.7;margin-bottom:5rem;opacity:0;animation:fadeUp .8s .9s forwards;}
.hero-tags{display:flex;flex-wrap:wrap;gap:.7rem;opacity:0;animation:fadeUp .8s 1.1s forwards;}
.tag{padding:.35rem .9rem;border:1px solid #2a2a2a;border-radius:99px;font-size:.78rem;letter-spacing:.08em;color:var(--muted);transition:all .3s;}
.tag:hover{border-color:var(--c2);color:var(--c2);}
.floating-food{position:absolute;font-size:4rem;opacity:.06;animation:float linear infinite;pointer-events:none;}
@keyframes float{0%{transform:translateY(100vh) rotate(0deg);}100%{transform:translateY(-20vh) rotate(360deg);}}

/*RECTANGULAR GAME CARD (#game-card)*/
#game-card{
  display:none;
  position:fixed;
  top:190px;
  right:2.6rem;
  width:100%;
  max-width:768px;
  height:428px;
  z-index:250;
  border-radius:24px;
  background:radial-gradient(ellipse at 35% 25%, #181210, #0a0a0a 85%);
  border:2px solid rgba(232, 93, 47, 0.6);
  box-shadow:0 0 0 6px rgba(240, 237, 230, 0.03), 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 40px rgba(232, 93, 47, 0.25);
  overflow:hidden;
  user-select:none;
}
#game-card::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size:20px 20px;
  pointer-events:none;
  z-index:1;
}
#game-card.active{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

#gameCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  cursor:pointer;
}

/* TOP-LEFT HUD OVERLAY */
#game-hud{
  position:absolute;
  top:1.2rem;
  left:1.5rem;
  z-index:10;
  display:flex;
  flex-direction:column;
  gap:0.3rem;
  pointer-events:none;
}
.hud-player-name{
  font-size:0.75rem;
  font-weight:800;
  letter-spacing:0.15em;
  color:var(--c1);
  text-transform:uppercase;
}
.hud-scores{
  font-size:0.85rem;
  font-weight:700;
  letter-spacing:0.08em;
  color:var(--fg);
  display:flex;
  align-items:center;
  gap:0.6rem;
}
.hud-scores strong{
  color:var(--c2);
  font-size:1.1rem;
}
.hud-divider{color:#444;}

/* GAME OVER OVERLAY */
#game-over-overlay{
  display:none;
  position:absolute;
  inset:0;
  z-index:20;
  background:rgba(10, 10, 10, 0.88);
  backdrop-filter:blur(8px);
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0.8rem;
  text-align:center;
}
#game-over-overlay.active{display:flex;}
.game-over-title{
  font-size:2.5rem;
  font-weight:900;
  letter-spacing:-0.02em;
  color:var(--c1);
  text-shadow:0 0 25px rgba(232, 93, 47, 0.6);
}
.game-over-sub{
  font-size:1.05rem;
  color:var(--fg);
  font-weight:600;
}
.game-over-prompt{
  font-size:0.85rem;
  color:var(--muted);
  letter-spacing:0.05em;
  margin-top:0.4rem;
}
.game-over-prompt kbd{
  background:#2a2a2a;
  border:1px solid #444;
  color:var(--c2);
  padding:0.2rem 0.6rem;
  border-radius:6px;
  font-family:inherit;
  font-weight:700;
}

#game-countdown{
  position:absolute;
  z-index:15;
  font-size:3.5rem;
  font-weight:900;
  color:var(--c2);
  text-shadow:0 4px 20px rgba(0,0,0,.9), 0 0 20px rgba(245,200,66,.5);
  pointer-events:none;
}

.sec-header{display:flex;align-items:center;gap:1rem;margin-bottom:3rem;}
.sec-num{font-size:.75rem;letter-spacing:.2em;color:var(--c1);}
.sec-title{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;letter-spacing:-.02em;}
.sec-line{flex:1;height:1px;background:#1a1a1a;margin-left:1rem;}

#about{background:#0d0d0d;}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:center;}
.about-text p{color:var(--muted);font-size:1.05rem;line-height:1.8;margin-bottom:1.2rem;}
.about-text p strong{color:var(--fg);}
.about-stats{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.stat-card{background:#111;border:1px solid #1e1e1e;border-radius:16px;padding:1.5rem;transition:border-color .3s,transform .3s;}
.stat-card:hover{border-color:var(--c3);transform:translateY(-4px);}
.stat-num{font-size:2.2rem;font-weight:900;margin-bottom:.3rem;}
.stat-label{font-size:.8rem;color:var(--muted);letter-spacing:.1em;}

#food{background:var(--bg);}
.food-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;}
.food-card{background:#111;border:1px solid #1e1e1e;border-radius:20px;padding:2rem;text-align:center;cursor:pointer;transition:all .3s;position:relative;overflow:hidden;}
.food-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.03),transparent 70%);opacity:0;transition:opacity .3s;}
.food-card:hover::before{opacity:1;}
.food-card:hover{transform:translateY(-6px);}
.food-emoji{font-size:3.5rem;margin-bottom:1rem;display:block;transition:transform .3s;}
.food-card:hover .food-emoji{transform:scale(1.2) rotate(-5deg);}
.food-name{font-size:1.1rem;font-weight:700;margin-bottom:.5rem;}
.food-desc{font-size:.82rem;color:var(--muted);line-height:1.6;}
.food-badge{position:absolute;top:1rem;right:1rem;padding:.2rem .6rem;border-radius:99px;font-size:.65rem;letter-spacing:.1em;}

#projects{background:#0d0d0d;}
.projects-list{display:flex;flex-direction:column;gap:1.5rem;}
.project-card{background:#111;border:1px solid #1e1e1e;border-radius:20px;padding:2rem 2.5rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;cursor:pointer;transition:all .3s;}
.project-card:hover{border-color:var(--c4);transform:translateX(8px);}
.project-tag{font-size:.7rem;letter-spacing:.15em;color:var(--c4);margin-bottom:.5rem;}
.project-name{font-size:1.3rem;font-weight:700;margin-bottom:.5rem;}
.project-desc{font-size:.9rem;color:var(--muted);max-width:500px;line-height:1.6;}
.project-arrow{font-size:1.8rem;color:#2a2a2a;transition:color .3s;}
.project-card:hover .project-arrow{color:var(--c4);}

#hobbies{background:var(--bg);}
.hobbies-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;}
.hobby-card{background:#111;border:1px solid #1e1e1e;border-radius:20px;padding:2rem;transition:all .3s;cursor:pointer;}
.hobby-card:hover{transform:translateY(-5px);}
.hobby-icon{font-size:2rem;margin-bottom:1rem;}
.hobby-title{font-size:1.1rem;font-weight:700;margin-bottom:.8rem;}
.hobby-content{font-size:.88rem;color:var(--muted);line-height:1.75;font-style:italic;}
.hobby-content strong{color:var(--fg);font-style:normal;}
.hobby-accent{width:30px;height:3px;border-radius:2px;margin-top:1.2rem;}

.story-card{background:#111;border:1px solid #1e1e1e;border-radius:20px;padding:2.5rem;margin-top:1.5rem;}
.story-title{font-size:1rem;font-weight:700;color:var(--c2);letter-spacing:.1em;margin-bottom:1.2rem;}
.story-text{font-size:.95rem;color:var(--muted);line-height:1.9;font-family:'Georgia',serif;}
.story-text p{margin-bottom:1rem;}

.book-card{background:#111;border:1px solid #1e1e1e;border-radius:20px;padding:2rem;display:flex;gap:1.5rem;align-items:flex-start;}
.book-spine{width:56px;height:80px;border-radius:4px 8px 8px 4px;background:linear-gradient(135deg,#c084fc,#7c3aed);display:flex;align-items:center;justify-content:center;font-size:.55rem;font-weight:700;color:#fff;letter-spacing:.05em;writing-mode:vertical-rl;text-orientation:mixed;flex-shrink:0;}
.book-title{font-size:1rem;font-weight:700;margin-bottom:.4rem;}
.book-quote{font-size:.85rem;color:var(--muted);line-height:1.7;font-style:italic;border-left:2px solid var(--c4);padding-left:1rem;margin-top:.8rem;}

#youtube{background:#0d0d0d;}
.yt-card{background:#111;border:1px solid #1e1e1e;border-radius:20px;padding:3rem;text-align:center;max-width:600px;margin:0 auto;}
.yt-icon{font-size:3rem;margin-bottom:1rem;}
.yt-name{font-size:1.8rem;font-weight:900;margin-bottom:.8rem;}
.yt-name span{color:var(--c1);}
.yt-desc{color:var(--muted);font-size:.95rem;line-height:1.7;margin-bottom:2rem;}
.yt-btn{display:inline-block;padding:.8rem 2rem;background:var(--c1);color:#fff;border-radius:99px;font-weight:700;text-decoration:none;font-size:.9rem;transition:transform .2s,opacity .2s;}
.yt-btn:hover{transform:scale(1.05);opacity:.9;}

#contact{background:var(--bg);min-height:50vh;display:flex;flex-direction:column;justify-content:center;}
.contact-big{font-size:clamp(2rem,6vw,4.5rem);font-weight:900;letter-spacing:-.03em;line-height:1.1;margin-bottom:2rem;}
.contact-big span{color:var(--c1);}
.contact-links{display:flex;flex-wrap:wrap;gap:1rem;}
.contact-link{padding:.7rem 1.5rem;border:1px solid #2a2a2a;border-radius:99px;color:var(--muted);text-decoration:none;font-size:.85rem;letter-spacing:.08em;transition:all .3s;}
.contact-link:hover{border-color:var(--c3);color:var(--c3);}

footer{padding:2rem 3rem;border-top:1px solid #1a1a1a;display:flex;justify-content:space-between;align-items:center;color:#333;font-size:.8rem;}

.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease;}
.reveal.visible{opacity:1;transform:none;}

@keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}

::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:#0a0a0a;}
::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:2px;}

/* ALWAYS VISIBLE GAME TOGGLE SWITCH */
#game-toggle-wrap{
  position:fixed;
  top:100px;
  right:3rem;
  z-index:350;
  display:flex;
  align-items:center;
  gap:.6rem;
  background:rgba(10,10,10,.85);
  backdrop-filter:blur(8px);
  padding:.5rem .9rem;
  border-radius:99px;
  border:1px solid #2a2a2a;
  box-shadow:0 10px 25px rgba(0,0,0,.6);
  transition:all .3s ease;
}
#game-toggle-label{font-size:.8rem;color:var(--muted);letter-spacing:.05em;}
.switch{position:relative;width:44px;height:24px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;cursor:pointer;inset:0;background:#2a2a2a;border-radius:99px;transition:.3s;}
.slider::before{content:'';position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#f0ede6;border-radius:50%;transition:.3s;}
.switch input:checked + .slider{background:var(--c1);}
.switch input:checked + .slider::before{transform:translateX(20px);}

/* WHEN GAME CARD IS ACTIVE, ALIGN TOGGLE INSIDE TOP-RIGHT CORNER OF GAME CARD! */
#hero.game-active #game-toggle-wrap {
  top:112px;
  right:4.2rem;
  z-index:350;
  background:rgba(10, 10, 10, 0.92);
  border:1px solid rgba(232, 93, 47, 0.5);
  box-shadow:0 4px 15px rgba(0,0,0,.8);
}

#name-modal{display:none;position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);align-items:center;justify-content:center;}
#name-modal.active{display:flex;}
#name-modal-box{background:#111;border:1px solid #2a2a2a;border-radius:20px;padding:2rem;max-width:340px;width:90%;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.8), 0 0 30px rgba(232,93,47,.15);}
#name-modal-box h3{font-size:1.2rem;margin-bottom:1rem;color:var(--c2);}
#name-modal-box label{display:block;font-size:.8rem;color:var(--muted);text-align:left;margin-bottom:.4rem;}
#player-name{width:100%;padding:.7rem 1rem;border-radius:10px;border:1px solid #2a2a2a;background:#0a0a0a;color:var(--fg);font-size:.95rem;margin-bottom:.8rem;outline:none;}
#player-name:focus{border-color:var(--c2);}
.modal-note{font-size:.75rem;color:var(--muted);line-height:1.5;margin-bottom:1.3rem;}
#play-btn{width:100%;padding:.7rem;background:var(--c1);color:#fff;border:none;border-radius:99px;font-weight:700;cursor:pointer;font-size:.9rem;transition:transform .2s,background .2s;}
#play-btn:hover{transform:scale(1.03);background:#f96939;}

@media (max-width:992px){
  #game-card.active{
    top:auto;
    bottom:4.5rem;
    right:1rem;
    left:1rem;
    width:auto;
    max-width:100%;
    height:300px;
  }
  #game-toggle-wrap{top:auto;bottom:1rem;right:1rem;}
  #hero.game-active #game-toggle-wrap{top:auto;bottom:1rem;right:1rem;}
}
/* GAME OVER QUIT BUTTON STYLING */
.game-quit-btn {
  margin-top: 0.8rem;
  padding: 0.5rem 1.4rem;
  background: transparent;
  color: var(--fg);
  border: 1px solid rgba(232, 93, 47, 0.6);
  border-radius: 99px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.game-quit-btn:hover {
  background: var(--c1);
  color: #fff;
  border-color: var(--c1);
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(232, 93, 47, 0.4);
}