:root{
  --accent:#2a9d8f;
  --accent-dark:#227f6f;
  --bg:#f6fbf9;
  --card:#ffffff;
  --muted:#58606b;
  --max-width:1100px;
  --radius:12px;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:#0b0b0b;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* outer container */
.site{max-width:var(--max-width);margin:18px auto;padding:0 16px}

/* banner */
.banner{
  display:flex;align-items:center;gap:14px;padding:12px;border-radius:14px;
  background:linear-gradient(90deg,#fff,#f2fbfa);
  box-shadow:0 2px 8px rgba(16,24,32,0.06);
}
.banner img.logo{width:110px;height:80px;object-fit:cover;border-radius:10px;border:2px solid rgba(0,0,0,0.06)}
.banner .title{line-height:1}
.banner h1{margin:0;font-size:1.4rem;color:var(--accent-dark)}
.banner p{margin:2px 0 0 0;color:var(--muted);font-size:0.95rem}

/* nav */
.site-nav{display:flex;gap:10px;margin:12px 0;flex-wrap:wrap}
.site-nav a{
  text-decoration:none;padding:8px 12px;border-radius:10px;color:var(--accent-dark);
  font-weight:600;border:1px solid transparent;transition:all .15s ease;
}
.site-nav a:hover,.site-nav a:focus{background:var(--accent);color:#fff;transform:translateY(-1px)}

/* layout */
.layout{display:grid;grid-template-columns:240px 1fr;gap:16px}
aside{background:var(--card);border-radius:12px;padding:12px;box-shadow:0 2px 6px rgba(10,10,10,0.04)}
main{background:var(--card);border-radius:12px;padding:16px;box-shadow:0 2px 6px rgba(10,10,10,0.04)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.card{border-radius:10px;overflow:hidden;background:linear-gradient(180deg,#fff,#fbfbfb);border:1px solid rgba(0,0,0,0.04)}
.card img{width:100%;height:120px;object-fit:cover;display:block}
.card .card-body{padding:10px}
.card h4{margin:0 0 6px 0;font-size:1rem}
.card p{margin:0;color:var(--muted);font-size:0.95rem}

/* utilities */
.center{text-align:center}
.small{font-size:0.92rem;color:var(--muted)}
footer{margin-top:14px;text-align:center;color:var(--muted);font-size:0.9rem}

/* game link button style */
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;
}

/* responsive */
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .banner img.logo{width:82px;height:62px}
  .site{padding:0 10px}
}
a:focus,button:focus{outline:3px solid rgba(34,127,111,0.18);outline-offset:2px}