:root {
  --primary-color:    #1a1a1a;
  --secondary-color:  #ff4655;
  --background-color: #0d1117;
  --text-color:       #ffffff;
  --card-bg:          #1c2128;
  --card-hover:       #22272e;
  --shadow:           0 4px 6px rgba(0,0,0,0.3);
}
*{margin:0;padding:0;box-sizing:border-box;}
body {
  font-family:'Poppins',sans-serif;
  background:var(--background-color);
  color:var(--text-color);
  min-height:100vh;
}
/* Header */
header{
  background:var(--primary-color);
  text-align:center;
  padding:30px;
  box-shadow:var(--shadow);
}
header h1{
  font-size:2.5rem;
  text-transform:uppercase;
  letter-spacing:2px;
  animation:fadeInDown .8s ease-out;
}
/* Main & Nav */
main{max-width:1200px;margin:40px auto;padding:20px;}
.menu-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;padding:20px;
  animation:fadeIn 1s ease-out;
}
.menu-item{
  background:var(--card-bg);
  border-radius:10px;
  padding:25px;
  text-align:center;
  color:var(--text-color);
  text-decoration:none;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  box-shadow:var(--shadow);
  transition:0.3s;
}
.menu-item:hover{
  transform:translateY(-5px);
  background:var(--card-hover);
  box-shadow:0 8px 16px rgba(0,0,0,0.4);
}
.menu-icon{width:32px;height:32px;margin-bottom:15px;transition:transform .3s;}
.menu-item:hover .menu-icon{transform:scale(1.1);}
.menu-item span{position:relative;font-size:1.2em;font-weight:500;}
.menu-item span::after{
  content:'';position:absolute;
  bottom:-4px;left:50%;
  width:0;height:2px;
  background:var(--secondary-color);
  transform:translateX(-50%);
  transition:width .3s;
}
.menu-item:hover span::after{width:100%;}
/* Carousel & scroll */
.carousel-wrapper{position:relative;margin-bottom:2rem;}
#games-wrapper{
  overflow-x:auto;overflow-y:hidden;
  padding:0 2.5rem;
}
.scrollbar-hidden{
  -ms-overflow-style:none;scrollbar-width:none;
}
.scrollbar-hidden::-webkit-scrollbar{display:none;}
#games-container{
  display:inline-flex;gap:1rem;padding-bottom:1rem;
}
/* Cards */
.game-card{
  background:var(--card-bg);
  border-radius:.5rem;
  overflow:hidden;
  flex:0 0 auto;
  width:12rem;
  box-shadow:var(--shadow);
  transition:transform .3s,box-shadow .3s;
}
.game-card:hover{
  transform:perspective(600px) rotateX(5deg) translateY(-5px);
  box-shadow:0 12px 24px rgba(0,0,0,0.8);
}
.card-img{
  width:100%;height:16rem;
  object-fit:cover;
}
.badge{
  position:absolute;top:.5rem;left:.5rem;
  padding:.125rem .5rem;font-size:.75rem;
  border-radius:.25rem;color:#fff;
}
.card-content{padding:.75rem;}
.game-title{font-size:1rem;font-weight:bold;margin-bottom:.5rem;}
.release-date{font-size:.875rem;color:#ddd;margin-bottom:.5rem;}
.release-date strong{color:#fff;}
.card-actions{display:flex;gap:.25rem;}
.card-actions button{
  background:#2a2a34;border:none;
  padding:.25rem .5rem;border-radius:.25rem;
  color:#fff;cursor:pointer;font-size:.875rem;
}
/* Arrows */
.carousel-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:2.5rem;height:2.5rem;border:none;
  background:rgba(0,0,0,0.6);color:#fff;
  border-radius:50%;cursor:pointer;z-index:20;
  transition:background .2s;
}
.carousel-btn:hover{background:rgba(0,0,0,0.8);}
.prev-btn{left:.5rem;} .next-btn{right:.5rem;}
/* Dots */
.dots{text-align:center;margin-top:.5rem;}
.dot{
  display:inline-block;
  width:8px;height:8px;
  margin:0 4px;
  background:#444;
  border-radius:50%;
  transition:background .3s;
}
.dot.active{background:var(--secondary-color);}
/* Theme toggle */
.theme-toggle{
  position:fixed;top:1rem;right:1rem;
  background:var(--card-bg);
  color:var(--text-color);
  border:none;padding:.5rem;
  border-radius:.25rem;cursor:pointer;z-index:100;
}
.light{
  --background-color:#f5f5f5;
  --text-color:#111;
  --card-bg:#fff;
  --card-hover:#eee;
  --shadow:0 4px 6px rgba(0,0,0,0.1);
}
/* Animations */
@keyframes fadeIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-20px);}to{opacity:1;transform:translateY(0);}}
@media(max-width:768px){
  header h1{font-size:2rem;}
  .menu-grid{grid-template-columns:repeat(2,1fr);gap:15px;padding:15px;}
}
@media(max-width:640px){
  #games-container{gap:.5rem;}
  .game-card{width:10rem;}
  .card-img{height:14rem;}
}
@media(max-width:480px){
  header h1{font-size:1.8rem;}
  .menu-grid{grid-template-columns:1fr;}
}