:root{
  --bg:#0b0b0b; --panel:#161616; --muted:#cfcfcf;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg); color:var(--muted);
}
.site-header{
  padding:12px 18px; background:#111; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid #222;
}
.site-header h1{margin:0; font-size:20px}
.topnav a{color:var(--muted); text-decoration:none; margin-left:12px; padding:6px 8px; border-radius:6px}
.topnav a.active{background:#222}
.center{max-width:980px; margin:28px auto; padding:0 12px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; padding:18px}
.mode-card{background:var(--panel); border-radius:10px; padding:10px; cursor:pointer; transition:transform .12s; display:flex; gap:10px; align-items:center}
.mode-card img {
  width: 360px;  /* larger width */
  height: 240px; /* larger height */
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.2s;
}

.mode-card:hover img {
  transform: scale(1.05);
}

.mode-info h3{margin:0 0 6px 0; font-size:16px}
.mode-info p{margin:3px 0; font-size:13px; color:#c9c9c9}
.mode-card:hover{transform:translateY(-4px)}
.mode-detail{background:var(--panel); padding:18px; border-radius:10px; max-width:760px}
.leaderboard-table{width:100%; border-collapse:collapse; margin:8px 0}
.leaderboard-table th, .leaderboard-table td{background:var(--panel); padding:8px 10px; text-align:left}
footer.site-footer{padding:18px; text-align:center; color:#999}
@media (max-width:720px){
  .grid-2{grid-template-columns:1fr}
  .mode-card img{width:90px; height:60px}
}