:root {
  --accent:#ff6b6b;
  --accent-hover:#e05555;
  --muted:#777;
  --bg:#310404;
}

* {box-sizing:border-box;margin:0;padding:0;}
body {font-family:Inter,Arial,sans-serif;background:var(--bg);color:#222;line-height:1.5;}
a {text-decoration:none;color:inherit;}

.container {max-width:1000px;margin:auto;padding:20px;}

/* Header */
header {
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,0.05);
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 20px;border-radius:0 0 12px 12px;
}
.brand {display:flex;align-items:center;gap:12px;}
.brand img {width:60px;height:60px;border-radius:12px;}
.brand h1 {font-size:18px;font-weight:700;margin:0;}
.brand span {font-size:13px;color:var(--muted);}
.nav-links a {margin-left:16px;font-weight:600;}

/* Hero / Banner */
.hero {margin:20px 0;position:relative;}
.banner { width:100%; height:0; padding-top:25%; border-radius:10px; overflow:hidden; position:relative; margin-bottom:10px; box-shadow:0 6px 18px rgba(0,0,0,0.05); }
.banner img { position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover; display:block; }

/* Games */
.games {
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  margin-top:20px;
}

.game {
  background:#fff;
  border-radius:12px;
  padding:12px;
  display:flex;
  align-items:center;
  gap:12px;
  flex:1 1 220px;
  box-shadow:0 6px 18px rgba(20,20,40,0.04);
  transition:transform 0.3s, box-shadow 0.3s;
}

.game:hover {
  transform:translateY(-4px);
  box-shadow:0 10px 20px rgba(20,20,40,0.08);
}

.game img.icon {
  width:150px;
  height:150px;
  border-radius:12px;
  flex-shrink:0;
}

.game .meta {
  display:flex;
  flex-direction:column;
  gap:8px;
}

.game .meta h3 {
  font-size:20px;
  margin:0;
}

.game .meta p {
  color:var(--muted);
  font-size:14px;
  margin:0;
}

.game .meta a.button {
  align-self:flex-start;
  margin-top:8px;
  padding:12px;
  border-radius:16px;
  background:var(--accent);
  color:#fff;
  font-weight:600;
  transition:background 0.3s;
}

.game .meta a.button:hover {
  background:var(--accent-hover);
}

/* Columns */
.columns {display:grid;grid-template-columns:1fr 360px;gap:18px;margin-top:18px;}
.card {background:#fff;padding:20px;border-radius:16px;box-shadow:0 6px 18px rgba(20,20,40,0.04);}
.contact form {display:flex;flex-direction:column;gap:12px;}
.contact input,.contact textarea {padding:12px;border-radius:12px;border:1px solid #e5e7eb;font-size:14px;width:100%;}
button.primary {background:var(--accent);color:#fff;padding:14px;font-weight:600;border-radius:16px;border:0;cursor:pointer;transition:background 0.3s;}
button.primary:hover {background:var(--accent-hover);}

/* FAQ */
details summary {
  cursor:pointer;
  padding:10px 12px;
  border-radius:8px;
  transition:background 0.3s;
}
details summary:hover {background:#f0f0f0;}
details p {padding:8px 12px;margin:0;color:var(--muted);font-size:14px;}

/* Footer */
footer {padding:18px 0;color:var(--muted);text-align:center;font-size:16px;}

/* Responsive */
@media (max-width:768px){
  .columns{grid-template-columns:1fr;}
  .banner{padding-top:50%;}
}

@media (max-width:480px){
  .games {flex-direction:column;}
  .game {flex-direction:row; align-items:flex-start;}
  .game img.icon {width:150px;height:150px;}
  .game .meta a.button {width:100%; text-align:center;}
  .banner{padding-top:20%;}
}