/* ========================================================================
   KARIM SAID — GAME DEV PORTFOLIO
   Aesthetic: dark arcade / neon HUD. Built for "it feels like a game".
   ===================================================================== */

:root{
  --bg:#070912;
  --bg2:#0c1020;
  --panel:#11152a;
  --panel-2:#151b35;
  --ink:#e8ecff;
  --muted:#8a93c2;
  --cyan:#22e0ff;
  --magenta:#ff3df0;
  --lime:#9dff5b;
  --gold:#ffd23d;
  --line:rgba(120,140,255,.16);
  --glow-cyan:0 0 18px rgba(34,224,255,.55);
  --glow-mag:0 0 18px rgba(255,61,240,.5);
  --font-display:"Orbitron",sans-serif;
  --font-pixel:"Press Start 2P",monospace;
  --font-body:"Rajdhani",sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.5;
  overflow-x:hidden;
  cursor:none;
}
a{color:inherit;text-decoration:none;}
::selection{background:var(--magenta);color:#000;}

/* custom scrollbar */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--bg2);}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--cyan),var(--magenta));border-radius:10px;}

/* ============ CUSTOM CURSOR ============ */
.cursor{
  position:fixed;width:8px;height:8px;border-radius:50%;
  background:var(--cyan);box-shadow:var(--glow-cyan);
  z-index:100000;pointer-events:none;transform:translate(-50%,-50%);
}
.cursor-ring{
  position:fixed;width:34px;height:34px;border:1.5px solid rgba(34,224,255,.6);
  border-radius:50%;z-index:99999;pointer-events:none;
  transform:translate(-50%,-50%);transition:width .15s,height .15s,border-color .15s,background .15s;
}
.cursor-ring.hot{width:52px;height:52px;border-color:var(--magenta);background:rgba(255,61,240,.08);}
@media (hover:none){ body{cursor:auto;} .cursor,.cursor-ring{display:none;} }

/* ============ BACKGROUND FX ============ */
#bg{position:fixed;inset:0;z-index:-3;width:100%;height:100%;}
.scanlines{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.25) 2px 4px);
  mix-blend-mode:overlay;
}
.grid-floor{
  position:fixed;left:0;right:0;bottom:0;height:42vh;z-index:-2;pointer-events:none;
  background-image:linear-gradient(rgba(34,224,255,.18) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,61,240,.14) 1px,transparent 1px);
  background-size:46px 46px;
  transform:perspective(340px) rotateX(62deg);
  transform-origin:bottom;
  mask-image:linear-gradient(to top,#000,transparent);
  -webkit-mask-image:linear-gradient(to top,#000,transparent);
  animation:gridmove 6s linear infinite;
}
@keyframes gridmove{from{background-position:0 0;}to{background-position:0 46px;}}

/* ============ BOOT / PRESS START ============ */
.boot{
  position:fixed;inset:0;z-index:10000;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s ease,visibility .6s;
}
.boot.gone{opacity:0;visibility:hidden;}
.boot-inner{text-align:center;width:min(420px,84vw);}
.boot-logo{font-family:var(--font-display);font-weight:900;font-size:3rem;letter-spacing:3px;color:var(--cyan);text-shadow:var(--glow-cyan);}
.boot-logo span{color:var(--magenta);text-shadow:var(--glow-mag);}
.boot-bar{margin:26px auto 12px;height:14px;border:2px solid var(--cyan);border-radius:2px;overflow:hidden;background:#0a0e1c;box-shadow:var(--glow-cyan);}
.boot-fill{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--magenta));transition:width .15s;}
.boot-status{font-family:var(--font-pixel);font-size:.6rem;color:var(--muted);letter-spacing:1px;}
.press-start{
  margin-top:24px;font-family:var(--font-pixel);font-size:.85rem;color:#000;
  background:var(--lime);border:none;padding:16px 26px;border-radius:4px;cursor:none;
  box-shadow:0 0 22px rgba(157,255,91,.6);animation:blink 1s steps(2) infinite;
}
.press-start:hover{background:#fff;}
@keyframes blink{50%{opacity:.35;}}

/* ============ HUD / NAV ============ */
.hud{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(16px,4vw,46px);
  background:linear-gradient(to bottom,rgba(7,9,18,.92),rgba(7,9,18,0));
  backdrop-filter:blur(6px);
  transform:translateY(-120%);transition:transform .5s ease;
}
.hud.show{transform:translateY(0);}
.hud-logo{font-family:var(--font-display);font-weight:900;letter-spacing:2px;font-size:1.05rem;}
.hud-logo span{color:var(--cyan);}
.hud-nav{display:flex;gap:clamp(10px,2vw,26px);}
.hud-nav a{
  font-family:var(--font-body);font-weight:600;letter-spacing:1.5px;font-size:.82rem;
  color:var(--muted);position:relative;padding:4px 2px;transition:color .2s;
}
.hud-nav a::before{content:attr(data-key);position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:.5rem;color:var(--cyan);opacity:0;transition:opacity .2s;}
.hud-nav a:hover,.hud-nav a.active{color:var(--cyan);}
.hud-nav a:hover::before,.hud-nav a.active::before{opacity:1;}
.hud-nav a.active::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:2px;background:var(--cyan);box-shadow:var(--glow-cyan);}
.hud-resume{
  font-family:var(--font-body);font-weight:700;letter-spacing:1px;font-size:.78rem;
  border:1.5px solid var(--magenta);color:var(--magenta);padding:7px 14px;border-radius:3px;transition:.2s;
}
.hud-resume:hover{background:var(--magenta);color:#000;box-shadow:var(--glow-mag);}

/* ----- Hamburger button (hidden on desktop) ----- */
.burger{
  display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:6px;
  background:rgba(12,18,40,.6);cursor:none;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  transition:border-color .2s,background .2s;z-index:1001;
}
.burger:hover{border-color:var(--cyan);}
.burger span{display:block;width:20px;height:2px;background:var(--cyan);border-radius:2px;box-shadow:var(--glow-cyan);transition:transform .3s ease,opacity .2s ease;}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ----- Mobile slide-in menu ----- */
.mobile-menu{
  position:fixed;top:0;right:0;z-index:950;
  width:min(78vw,300px);height:100vh;
  background:linear-gradient(160deg,var(--panel),var(--bg));
  border-left:1px solid var(--line);box-shadow:-12px 0 50px rgba(0,0,0,.6);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:80px 26px 40px;
  transform:translateX(110%);transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.mobile-menu.open{transform:translateX(0);}
.mobile-menu a{
  font-family:var(--font-display);font-weight:700;letter-spacing:2px;font-size:1.05rem;
  color:var(--muted);padding:14px 12px;border-bottom:1px solid var(--line);position:relative;transition:color .2s,padding .2s;
}
.mobile-menu a::before{content:attr(data-key);font-family:var(--font-pixel);font-size:.55rem;color:var(--cyan);margin-right:12px;}
.mobile-menu a:hover,.mobile-menu a.active{color:var(--cyan);padding-left:18px;}
.mobile-menu .mm-resume{
  margin-top:22px;border:1.5px solid var(--magenta);border-radius:4px;color:var(--magenta);
  text-align:center;letter-spacing:1px;font-size:.85rem;border-bottom:1.5px solid var(--magenta);
}
.mobile-menu .mm-resume::before{content:none;}
.mobile-menu .mm-resume:hover{background:var(--magenta);color:#000;padding-left:12px;box-shadow:var(--glow-mag);}

/* dim backdrop behind the menu */
.menu-backdrop{
  position:fixed;inset:0;z-index:940;background:rgba(4,6,14,.55);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.menu-backdrop.open{opacity:1;visibility:visible;}

@media(max-width:720px){
  .hud-nav{display:none;}
  .hud-resume{display:none;}
  .burger{display:flex;}
}

/* ============ LAYOUT / SECTIONS ============ */
main{position:relative;z-index:1;}
.section{
  max-width:1120px;margin:0 auto;padding:clamp(70px,11vh,130px) clamp(18px,5vw,40px);
}
.section-head{margin-bottom:46px;}
.section-no{font-family:var(--font-pixel);font-size:.7rem;color:var(--magenta);}
.section-head h2{
  font-family:var(--font-display);font-weight:900;font-size:clamp(1.8rem,5vw,3rem);
  letter-spacing:2px;margin-top:8px;
  background:linear-gradient(90deg,var(--ink),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;
}
.section-sub{color:var(--muted);margin-top:8px;font-size:.98rem;letter-spacing:.5px;}

/* ============ HERO ============ */
.hero{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 18px;position:relative;
}
.hero-tag{font-family:var(--font-pixel);font-size:.65rem;color:var(--lime);letter-spacing:2px;margin-bottom:22px;animation:flick 3s infinite;}
@keyframes flick{0%,97%,100%{opacity:1;}98%{opacity:.3;}}
.hero-name{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(2.6rem,12vw,8rem);letter-spacing:3px;line-height:.95;
  color:var(--ink);position:relative;
  text-shadow:0 0 30px rgba(34,224,255,.35);
}
/* glitch layers */
.hero-name::before,.hero-name::after{
  content:attr(data-text);position:absolute;inset:0;text-shadow:none;
}
.hero-name::before{color:var(--cyan);clip-path:inset(0 0 55% 0);animation:glitch1 4s infinite linear alternate;}
.hero-name::after{color:var(--magenta);clip-path:inset(55% 0 0 0);animation:glitch2 4s infinite linear alternate;}
@keyframes glitch1{0%,92%,100%{transform:translate(0,0);}93%{transform:translate(-3px,-2px);}96%{transform:translate(2px,1px);}}
@keyframes glitch2{0%,92%,100%{transform:translate(0,0);}94%{transform:translate(3px,2px);}97%{transform:translate(-2px,-1px);}}
.hero-class{margin-top:20px;font-family:var(--font-body);font-weight:700;letter-spacing:3px;font-size:clamp(1rem,3vw,1.5rem);color:var(--cyan);}
.hero-class span{color:var(--muted);}
.hero-blurb{margin-top:18px;max-width:640px;color:var(--muted);font-size:1.05rem;letter-spacing:.4px;}
.hero-menu{margin-top:38px;display:flex;gap:16px;flex-wrap:wrap;justify-content:center;}

.btn{
  font-family:var(--font-body);font-weight:700;letter-spacing:1.5px;font-size:.95rem;
  padding:14px 28px;border-radius:4px;border:2px solid transparent;transition:.18s;display:inline-block;
}
.btn-primary{background:var(--cyan);color:#05121a;box-shadow:var(--glow-cyan);}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 0 28px rgba(34,224,255,.8);}
.btn-ghost{border-color:var(--magenta);color:var(--magenta);}
.btn-ghost:hover{background:var(--magenta);color:#000;transform:translateY(-3px);box-shadow:var(--glow-mag);}

.scroll-hint{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);text-align:center;color:var(--muted);}
.scroll-hint span{font-family:var(--font-pixel);font-size:.5rem;letter-spacing:2px;}
.mouse{width:22px;height:36px;border:2px solid var(--muted);border-radius:12px;margin:8px auto 0;position:relative;}
.mouse::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:3px;height:7px;background:var(--cyan);border-radius:2px;animation:wheel 1.4s infinite;}
@keyframes wheel{0%{opacity:0;top:6px;}40%{opacity:1;}100%{opacity:0;top:18px;}}

/* ============ ABOUT ============ */
.about-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:34px;align-items:start;}
.about-bio p{margin-bottom:18px;font-size:1.08rem;color:#cfd6ff;}
.about-bio strong{color:var(--cyan);font-weight:700;}
.char-sheet{
  background:linear-gradient(160deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);border-radius:10px;padding:22px;
  box-shadow:inset 0 0 30px rgba(34,224,255,.04);
}
.char-sheet-title{font-family:var(--font-pixel);font-size:.6rem;color:var(--gold);letter-spacing:1px;margin-bottom:16px;}
.char-sheet ul{list-style:none;}
.char-sheet li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:.95rem;}
.char-sheet li:last-child{border-bottom:none;}
.char-sheet li span{color:var(--muted);letter-spacing:1px;font-size:.8rem;align-self:center;}
.char-sheet li b{color:var(--ink);text-align:right;}
@media(max-width:760px){.about-grid{grid-template-columns:1fr;}}

/* ============ PROJECTS / LEVEL SELECT ============ */
.levels{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px;}
.level{
  background:linear-gradient(165deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  transition:transform .18s ease,box-shadow .25s,border-color .25s;
  transform-style:preserve-3d;will-change:transform;
}
.level:hover{border-color:var(--cyan);box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 26px rgba(34,224,255,.25);}
.level-art{
  height:140px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
}
.level-art::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.12),transparent 60%);pointer-events:none;}
.level-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
.level:hover .level-art img{transform:scale(1.06);}
.level-icon{font-size:3.2rem;filter:drop-shadow(0 4px 14px rgba(0,0,0,.5));z-index:1;}
.level-art.has-video{cursor:none;}
.play-badge{
  position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(7,9,18,.55);border:2px solid var(--cyan);color:var(--cyan);font-size:1.15rem;
  box-shadow:var(--glow-cyan);transition:transform .2s,background .2s,color .2s;
}
.level:hover .play-badge{background:var(--cyan);color:#000;transform:translate(-50%,-50%) scale(1.12);}
.art-1{background:linear-gradient(135deg,#1b2a6b,#22e0ff33,#0b1030);}
.art-2{background:linear-gradient(135deg,#5b2a6b,#ff3df033,#0b1030);}
.art-3{background:linear-gradient(135deg,#6b4a1b,#ffd23d33,#0b1030);}
.art-4{background:linear-gradient(135deg,#6b1b1b,#ff5b3d33,#0b1030);}
.art-5{background:linear-gradient(135deg,#1b6b53,#9dff5b33,#0b1030);}
.art-6{background:linear-gradient(135deg,#3a1b6b,#22e0ff33,#0b1030);}
.level-body{padding:18px;}
.level-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.level-top h3{font-family:var(--font-display);font-weight:700;font-size:1.1rem;letter-spacing:.5px;}
.level-year{font-family:var(--font-pixel);font-size:.5rem;color:var(--muted);white-space:nowrap;}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0;}
.tags i{font-style:normal;font-size:.7rem;letter-spacing:.5px;color:var(--cyan);border:1px solid rgba(34,224,255,.35);border-radius:20px;padding:3px 10px;}
.level-body p{color:var(--muted);font-size:.95rem;}
.level-body p strong{color:var(--lime);font-weight:700;}
.level-note{font-size:.66rem!important;color:var(--muted);opacity:.6;font-style:italic;margin-top:8px;line-height:1.35;}
.level-stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.level-stats span{
  display:inline-flex;align-items:center;gap:5px;font-size:.74rem;letter-spacing:.4px;color:var(--muted);
  background:rgba(255,210,61,.07);border:1px solid rgba(255,210,61,.3);border-radius:6px;padding:4px 9px;
}
.level-stats b{color:var(--gold);font-weight:700;}
.level-links{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.level-links a{font-family:var(--font-body);font-weight:700;letter-spacing:1px;font-size:.82rem;color:var(--lime);border:1px solid var(--lime);padding:6px 14px;border-radius:3px;transition:.2s;}
.level-links a:hover{background:var(--lime);color:#000;box-shadow:0 0 16px rgba(157,255,91,.5);}
.soon{font-size:.72rem;letter-spacing:1px;color:var(--muted);opacity:.7;}

/* ============ SKILLS ============ */
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;}
.skill-col{background:linear-gradient(160deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:12px;padding:24px;}
.skill-col h4{font-family:var(--font-pixel);font-size:.62rem;color:var(--gold);letter-spacing:1px;margin-bottom:20px;}
.stat{margin-bottom:16px;}
.stat span{display:block;font-size:.86rem;letter-spacing:1px;margin-bottom:6px;color:#cfd6ff;}
.bar{height:9px;background:#0a0e1c;border:1px solid var(--line);border-radius:6px;overflow:hidden;}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--magenta));border-radius:6px;transition:width 1.1s cubic-bezier(.2,.8,.2,1);}
.bar.run i{width:var(--lvl);}
.loadout{display:flex;flex-wrap:wrap;gap:8px;}
.loadout i{font-style:normal;font-size:.78rem;letter-spacing:.5px;color:var(--ink);background:#0c1228;border:1px solid var(--line);border-radius:6px;padding:6px 11px;transition:.18s;}
.loadout i:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px);}
.skills-cv{margin-top:22px;width:100%;text-align:center;}

/* ============ CONTACT ============ */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;}
.contact-card{
  background:linear-gradient(160deg,var(--panel),var(--bg2));border:1px solid var(--line);
  border-radius:12px;padding:26px 20px;text-align:center;transition:.2s;
}
.contact-card:hover{border-color:var(--cyan);transform:translateY(-5px);box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 22px rgba(34,224,255,.22);}
.cc-ico{display:flex;align-items:center;justify-content:center;width:54px;height:54px;margin:0 auto 14px;border-radius:50%;background:#0c1228;border:1px solid var(--cyan);font-size:1.3rem;font-weight:700;color:var(--cyan);box-shadow:var(--glow-cyan);}
.contact-card b{display:block;font-family:var(--font-display);letter-spacing:2px;font-size:.95rem;}
.contact-card small{color:var(--muted);font-size:.85rem;}

/* ============ FOOTER ============ */
.footer{
  border-top:1px solid var(--line);margin-top:40px;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;
  padding:22px clamp(18px,5vw,40px);font-family:var(--font-pixel);font-size:.52rem;color:var(--muted);letter-spacing:1px;
}
.footer-mid{color:var(--magenta);}

/* ============ REVEAL ANIM ============ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:none;}

/* ============ VIDEO LIGHTBOX ============ */
.lightbox{
  position:fixed;inset:0;z-index:9990;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(4,6,14,.86);backdrop-filter:blur(5px);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.lightbox.open{opacity:1;visibility:visible;}
.lb-frame{
  position:relative;width:min(960px,94vw);aspect-ratio:16/9;background:#000;
  border:2px solid var(--cyan);border-radius:10px;overflow:hidden;
  box-shadow:0 0 60px rgba(34,224,255,.35);
}
.lb-frame.portrait{width:auto;height:min(86vh,760px);aspect-ratio:9/16;}
.lb-frame #lbHolder{position:absolute;inset:0;}
.lb-frame iframe,.lb-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.lb-frame video{object-fit:contain;background:#000;}
.lb-close{
  position:absolute;top:22px;right:26px;width:46px;height:46px;border-radius:50%;
  border:1.5px solid var(--magenta);background:rgba(12,18,40,.7);color:var(--magenta);
  font-size:1.1rem;cursor:none;transition:.2s;z-index:1;
}
.lb-close:hover{background:var(--magenta);color:#000;box-shadow:var(--glow-mag);}

/* ============ KONAMI TOAST ============ */
.konami-toast{
  position:fixed;left:50%;bottom:30px;transform:translate(-50%,140%);
  background:var(--gold);color:#000;font-family:var(--font-pixel);font-size:.6rem;
  padding:14px 20px;border-radius:6px;z-index:9999;transition:transform .4s ease;box-shadow:0 0 24px rgba(255,210,61,.6);
}
.konami-toast.show{transform:translate(-50%,0);}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  .reveal{opacity:1;transform:none;}
}