:root{
  --blue:#1CE4F5;
  --blue-dark:#1CE4F5;
  --ink:#2d2d35;
  --muted:#6c7078;
  --line:#e7e9ee;
  --bg:#ffffff;
  --soft:#f7f8fb;
  --radius:18px;
  --shadow:0 14px 34px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Nunito",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:#fff;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{
  width:min(100% - 48px, 1060px);
  margin-inline:auto;
}

.site-header{
  height:66px;
  display:flex;
  align-items:center;
  gap:28px;
  padding:0 28px 0 0;
  border-bottom:1px solid var(--line);
  background:#fff;
  position:sticky;
  top:0;
  z-index:20;
}

.brand{
  height:66px;
  width:148px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  color:white;
  font-weight:900;
  font-size:22px;
}

.main-nav{
  display:flex;
  align-items:center;
  gap:24px;
  flex:1;
  font-weight:800;
  font-size:14px;
}
.main-nav a{display:flex;align-items:center;gap:8px;white-space:nowrap}
.main-nav i {color:black}

.main-nav .active{color:var(--blue-dark)}
.main-nav .active i{color:var(--blue-dark)}
.header-actions{display:flex;align-items:center;gap:14px}
.search-pill{
  width:170px;
  height:36px;
  border:1px solid var(--line);
  border-radius:999px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
  color:var(--muted);
}
.search-pill input{border:0;outline:0;width:100%;font:inherit;background:transparent}
.icon-button{border:0;background:transparent;font-size:20px;color:var(--ink);cursor:pointer}

.hero{
  position:relative;
  min-height:315px;
  background:
    linear-gradient(90deg,rgba(173,82,0,.2),rgba(255,160,35,.08)),
    radial-gradient(circle at 63% 30%,rgba(255,255,255,.35),transparent 12%),
    linear-gradient(135deg,#a94e00,#f5a12a 52%,#a95400);
  overflow:hidden;
}
.hero:before{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(25deg,transparent 45%,rgba(0,0,0,.16) 46%,transparent 47%),
    linear-gradient(165deg,transparent 44%,rgba(0,0,0,.12) 45%,transparent 46%);
  opacity:.45;
}
.switch-badge{
  position:absolute;
  top:22px;left:26px;
  width:92px;height:92px;
  background:var(--blue);
  color:#fff;
  display:grid;place-items:center;
  border-radius:6px;
  text-transform:uppercase;
  font-weight:900;
  font-size:38px;
  line-height:.8;
  text-align:center;
}
.switch-badge span{font-size:12px;line-height:1.05;letter-spacing:.9px}
.hero-copy{
  position:relative;
  z-index:1;
  width:min(900px,90%);
  margin:auto;
  padding-top:95px;
  color:#fff;
  text-shadow:0 5px 18px rgba(0,0,0,.35);
}
.logo-text{
  margin:0;
  font-size:clamp(44px,8vw,88px);
  line-height:.85;
  font-weight:900;
  font-style:italic;
  color:#ffdc4a;
  -webkit-text-stroke:3px #241400;
  transform:skew(-7deg) rotate(-2deg);
}
.subtitle{
  margin:4px 0 0 170px;
  font-size:clamp(22px,3vw,38px);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:2px;
}

.game-strip{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:40px;
  padding:28px 0 34px;
}
.game-info h1{font-size:20px;margin:0 0 8px;font-weight:900}
.game-info p{margin:2px 0;color:#333;font-size:14px;font-weight:600}
.feature-icons{display:flex;gap:15px;margin-top:18px}
.feature-icons span{
  width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);box-shadow:0 4px 10px rgba(0,0,0,.06);
  color:var(--blue-dark);font-size:18px;
}
.rating-box{display:flex;gap:16px;align-items:center;font-size:13px;font-weight:700}
.rating-letter{width:70px;height:70px;border:5px solid #111;display:grid;place-items:center;font-size:46px;font-weight:900;color:#111;background:#fff}
.rating-box ul{margin:0;padding:0;list-style:none;line-height:1.55}

.section{padding:14px 0 24px}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.section h2{font-size:24px;margin:0;font-weight:900}
.section-head a,.article-card a{color:var(--blue-dark);font-weight:900;text-decoration:underline;text-underline-offset:3px}

.featured-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-bottom:28px}
.article-card h3,.mini-card h3,.video-card h3,.playing-grid h3{font-size:16px;line-height:1.25;margin:10px 0 8px;font-weight:900}
.article-card p,.video-card p,.playing-grid p{font-size:14px;line-height:1.45;margin:0 0 10px;color:#43454d}
.card-image,.thumb,.video-thumb,.review-img{
  border-radius:12px;
  min-height:177px;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.sketch-bg{
  background:linear-gradient(145deg,#f7f0e4,#e7ddc8);
  display:flex;align-items:center;justify-content:center;
  color:#050505;
  border:1px solid #ded3be;
}
.sketch-bg span{font-size:44px;font-weight:900;line-height:.9;transform:rotate(-4deg)}
.sketch-bg strong{font-size:58px}
.bundle-bg{
  background:linear-gradient(135deg,var(--blue),#04b8ca);
  display:grid;place-items:center;color:#fff;text-transform:uppercase;font-size:34px;font-weight:900;
}
.meta{display:flex;align-items:center;gap:8px;color:#333;font-size:14px;font-weight:700;margin-top:12px}
.meta i{color:var(--blue-dark)}

.small-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.thumb{min-height:105px;background:#ddd}
.indy-thumb{background:linear-gradient(135deg,#b85b06,#f7b13b)}
.yoshi-thumb{background:linear-gradient(135deg,#fff0cf,#b6f5db)}
.nintendo-thumb{background:linear-gradient(135deg,var(--blue),#0bb5d0);display:grid;place-items:center;color:#fff;font-size:28px;font-weight:900}
.starfox-thumb{background:linear-gradient(135deg,#1c2438,#ff7f2a)}
.metroid-thumb{background:linear-gradient(135deg,#301247,#09d4b0)}
.kirby-thumb{background:linear-gradient(135deg,#ffd7e7,#ffd873)}
.hyrule-thumb{background:linear-gradient(135deg,#1b341c,#ddaa27)}
.dragx-thumb{background:linear-gradient(135deg,#21090c,#e94436)}
.pokemon-thumb{background:linear-gradient(135deg,#3154a5,#6fd66a)}

.video-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.video-thumb{min-height:110px;position:relative}

.video-thumb span{position:absolute;right:8px;bottom:8px;background:#151515;color:#fff;border-radius:5px;padding:3px 6px;font-size:12px;font-weight:900}
.video-card .fa-circle-check{color:var(--blue-dark)}
.indy-video{background:linear-gradient(135deg,#5b2c0b,#ce772d)}
.mario-video{background:linear-gradient(135deg,#64d5ff,#ff8a43)}
.dk-video{background:linear-gradient(135deg,#23110d,#d46721)}
.zelda-video{background:linear-gradient(135deg,#a6f0ff,#c5f2c7)}

.review-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:28px}
.review-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 5px 16px rgba(0,0,0,.04)}
.review-img{min-height:130px;border-radius:0}
.review-card strong{display:inline-block;color:var(--blue-dark);font-size:25px;font-weight:800;margin:14px 0 0 14px}
.review-card span{font-weight:800;margin-left:4px;font-size:11px;}
.review-card p{font-size:12px;line-height:1.45;margin:8px 14px;color:#333}
.review-card small{display:block;margin:14px;font-weight:900;color:#333}

.playing-section{padding-bottom:46px}
.playing-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:28px}
.playing-grid article{background:#fff;border-radius:12px}
.playing-grid .thumb{min-height:95px}
.playing-grid h3{font-size:14px;margin-bottom:4px}
.playing-grid p{font-size:13px;color:#555;font-weight:700}

.site-footer{background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#fff;padding:34px 0 22px}
.footer-inner{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:36px}


.footer-logo{
display:inline-block;padding:0px 14px;height:80px;
}
.footer-logo img{
height:80px;margin-left: 40px;
}

.socials{display:flex;gap:20px;font-size:26px;margin-bottom:22px;margin-left:34px}
.footer-brand small{font-weight:700}
.footer-col{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:700}
.footer-col h4{margin:0 0 6px;font-size:16px}
.footer-legal{display:flex;justify-content:flex-end;gap:22px;font-size:13px;font-weight:700;margin-top:20px}

@media (max-width: 960px){
  .site-header{height:auto;flex-wrap:wrap;padding:0 18px 14px}.brand{margin-left:-18px}.main-nav{order:3;overflow:auto;width:100%;padding-bottom:4px}.game-strip,.featured-grid{grid-template-columns:1fr}.small-grid,.video-grid{grid-template-columns:repeat(2,1fr)}.review-grid,.playing-grid{grid-template-columns:repeat(2,1fr)}.footer-inner{grid-template-columns:1fr 1fr}.footer-legal{justify-content:flex-start;flex-wrap:wrap}.rating-box{justify-content:flex-start}
}
@media (max-width: 560px){
  .container{width:min(100% - 28px,1060px)}.header-actions{width:100%}.search-pill{flex:1}.hero{min-height:260px}.subtitle{margin-left:0}.small-grid,.video-grid,.review-grid,.playing-grid{grid-template-columns:1fr}.footer-inner{grid-template-columns:1fr}.game-strip{gap:20px}
}

.brand{
  height:66px;
  width:148px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));
 
}

.brand img{
      width: auto;
    height: 64px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.05));
}

.video-thumb .video-play-icon {
       transform: translate(669%, 180%);
    font-size: 22px;
    color: #1ce4f5;
    pointer-events: none;

}

.dynamic-hero{
  position:relative;
  min-height:315px;
  background-size:cover;
  background-position:center;
  transition:background-image .4s ease;
}

.hero-overlay-dark{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.25);
  z-index:0;
}

.dynamic-hero .switch-badge,
.dynamic-hero .hero-copy,
.hero-controls{
  position:relative;
  z-index:2;
}

.hero-controls{
  position:absolute;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  display:flex;
  gap:14px;
  align-items:center;
}

.hero-control-item{
  width:46px;
  height:46px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.4);
  background:#fff;
  color:var(--blue);
  display:grid;
  place-items:center;
  cursor:pointer;
  overflow:hidden;
  box-shadow:0 5px 14px rgba(0,0,0,.18);
}

.hero-control-item.active{
  outline:3px solid var(--blue);
}

.hero-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}