@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter&display=swap");*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#030303;color:#fff;font-family:Inter,Arial}header{height:70px;padding:0 5vw;display:flex;align-items:center;gap:30px;background:#050505;border-bottom:1px solid #301012;position:sticky;top:0;z-index:5}header b{font:800 25px "Barlow Condensed";letter-spacing:2px}header i{font-style:normal;color:#ef1b23}nav{margin-left:auto;display:flex;gap:28px}a{color:#fff;text-decoration:none;font:700 16px "Barlow Condensed";letter-spacing:1px}a:hover,small{color:#ef1b23}.hero img{display:block;width:100%;height:auto}.intro,.community{text-align:center;padding:80px 6vw}.intro h1,.community h2,.games h2{font:800 clamp(38px,6vw,75px) "Barlow Condensed";margin:8px 0}.intro p,.community p,.games p{color:#aaa;line-height:1.7}.games{max-width:1500px;margin:auto;padding:30px 5vw 90px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.games article{min-height:280px;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid #29292d;background:radial-gradient(circle at top,#5b0d1455,transparent 55%),#0b0b0d}.games h2{font-size:42px}.community{background:#0b0b0d;border-block:1px solid #222}.btn{display:inline-block;margin-top:18px;padding:14px 28px;border:1px solid #ef1b23;background:#160507}footer{text-align:center;padding:28px;color:#777}@media(max-width:800px){nav{gap:10px;font-size:12px}.games{grid-template-columns:1fr}.hero img{min-height:360px;object-fit:cover;object-position:center}}

/* V3: menu-knoppen gecentreerd bovenaan met rode rand en verhoogd effect */
header{
  justify-content:center;
  min-height:86px;
  height:auto;
  padding:14px 4vw;
}
header b{
  position:absolute;
  left:4vw;
}
nav{
  margin-left:0;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
}
nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:112px;
  min-height:44px;
  padding:10px 18px;
  border:1px solid #ef1b23;
  border-radius:5px;
  background:linear-gradient(180deg,#19191b,#080808);
  box-shadow:
    0 4px 0 #68080d,
    0 7px 15px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 12px rgba(239,27,35,.18);
  color:#f5f5f5;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
nav a:hover{
  color:#fff;
  background:linear-gradient(180deg,#321013,#100506);
  transform:translateY(-2px);
  box-shadow:
    0 6px 0 #68080d,
    0 10px 20px rgba(0,0,0,.8),
    0 0 18px rgba(239,27,35,.42);
}
nav a:active{
  transform:translateY(3px);
  box-shadow:
    0 1px 0 #68080d,
    0 3px 8px rgba(0,0,0,.7);
}

@media(max-width:900px){
  header{
    justify-content:flex-start;
    padding:12px 4vw;
  }
  header b{
    position:static;
  }
  nav{
    margin-left:auto;
    gap:7px;
  }
  nav a{
    min-width:auto;
    min-height:38px;
    padding:8px 10px;
    font-size:13px;
  }
}
@media(max-width:650px){
  header{
    flex-direction:column;
  }
  nav{
    margin:0;
    width:100%;
    flex-wrap:wrap;
    justify-content:center;
  }
  nav a{
    flex:1 1 42%;
  }
}


/* Menu Upgrade — behoudt de V3 layout/header */
header{
  background:
    linear-gradient(180deg, rgba(18,18,20,.98), rgba(3,3,3,.98));
  border-bottom:1px solid rgba(239,27,35,.28);
  box-shadow:0 8px 30px rgba(0,0,0,.45);
}

nav{
  gap:12px;
}

nav a{
  position:relative;
  overflow:hidden;
  min-width:118px;
  min-height:43px;
  padding:10px 19px;
  border:1px solid rgba(239,27,35,.72);
  border-radius:3px;
  background:
    linear-gradient(180deg, rgba(35,35,38,.96), rgba(8,8,9,.98));
  color:#ededed;
  text-shadow:0 1px 2px #000;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(239,27,35,.12),
    0 3px 0 #5d090d,
    0 7px 14px rgba(0,0,0,.55);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}

nav a::before{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#ff343b,transparent);
  opacity:.7;
}

nav a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:4px;
  width:0;
  height:2px;
  transform:translateX(-50%);
  background:#ff2028;
  box-shadow:0 0 10px #ff2028;
  transition:width .18s ease;
}

nav a:hover{
  color:#fff;
  border-color:#ff343b;
  background:
    linear-gradient(180deg, rgba(63,18,21,.98), rgba(17,5,6,.98));
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 5px 0 #69090e,
    0 10px 22px rgba(0,0,0,.65),
    0 0 18px rgba(239,27,35,.25);
}

nav a:hover::after{
  width:58%;
}

nav a:active{
  transform:translateY(2px);
  box-shadow:
    inset 0 1px 4px rgba(0,0,0,.8),
    0 1px 0 #69090e,
    0 3px 8px rgba(0,0,0,.6);
}

@media(max-width:900px){
  nav a{
    min-width:auto;
    min-height:38px;
    padding:8px 11px;
  }
}