/* Cute + retro anime vibes */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: 'Trebuchet MS', 'Comic Sans MS', system-ui, -apple-system, sans-serif;
  background: linear-gradient(180deg,#ffe3f3,#ffeedd 50%, #f5faff);
  color:#3a2a2a;
  text-align:center;
}

.site-header{
  color:white;
  padding:14px 10px;
  position: sticky;
  top:0;
  z-index:10;
  box-shadow:0 3px 10px rgba(0,0,0,.15);
  background:#ff8ccf;
}

.top-nav a{
  color:white; font-weight:700; text-decoration:none; margin:0 8px;
  padding:6px 10px; border-radius:10px;
}
.top-nav a:hover{ background:rgba(255,255,255,.25); }
.top-nav .active{ background:rgba(0,0,0,.15) }

.hero{ padding:40px 10px; }
.floating-stickers{ position:relative; height:300px; max-width:960px; margin:0 auto }
.floating-stickers .float{
  position:absolute; width:120px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
  animation: floaty 6s ease-in-out infinite;
}
.floating-stickers .a1{ left:5%; top:10% }
.floating-stickers .a2{ left:28%; top:20%; animation-delay: .8s }
.floating-stickers .a3{ right:13%; top:8%; animation-delay: 1.2s }
.floating-stickers .a4{ right:2%; top:26%; animation-delay: 1.7s }
.floating-stickers .a5{ left: 45%; top: 5%; animation-delay: 2.2s; }
.floating-stickers .a6{ right: 35%; top: 30%; animation-delay: 2.7s; }
.floating-stickers .a7{ left: 65%; top: 25%; animation-delay: 3.2s; }
.floating-stickers .a8{ left: 14%; top: 40%; animation-delay: 3.7s; }

@keyframes floaty {
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-12px) }
}

.gallery{ padding:30px 14px }
.gallery .grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap:14px; max-width:1000px; margin:0 auto;
}
.gallery img{
  width:100%; border-radius:14px; background:white; padding:8px;
  border:3px solid #fff; box-shadow:0 5px 12px rgba(0,0,0,.15);
}

.about-me .profile {
  display: flex;
  align-items: center;
  gap: 20px;
  text-align: left;
  max-width: 800px;
  margin: 20px auto;
  background: white;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 6px 12px rgba(0,0,0,.12);
}

.profile-pic {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #ff8ccf;
}

.favorite-games .game-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.favorite-games .game-card {
  background: white;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 6px 12px rgba(0,0,0,.12);
}

.favorite-games .game-card img {
  width: 100%;
  border-radius: 10px;
}

.blueprint{
  background: linear-gradient(to right, #24243e, #302b63, #0f0c29);
  color: white;
}

.space-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.rocket {
  position: absolute;
  bottom: -100px;
  animation: rocket-fly 10s linear infinite;
}

.rocket img {
  width: 50px;
  height: auto;
  filter: drop-shadow(0 0 5px #ff8ccf);
}

@keyframes rocket-fly {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-120vh); opacity: 0; }
}

.content{ max-width:1000px; margin:20px auto; text-align:left; padding:0 12px }
.cards{ display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:16px }
.card{
  background:rgba(255,255,255, 0.9);
  color: #333;
  border-radius:16px; padding:16px; border:1px solid #eee;
  box-shadow:0 6px 12px rgba(0,0,0,.12);
}
.card pre{ background:#1e1e2e; color:#d6d6f0; padding:10px; border-radius:10px; overflow:auto }

footer{
  margin-top:30px; padding:16px; color:white; background:#ff8ccf;
}