/* hub style.css */
@import "common.css";

#bg { position:fixed; inset:0; z-index:-2; background:var(--bg); }
.container {
  max-width:1200px; margin: 20px auto; padding: 28px;
}

header { text-align:center; margin-bottom: 8px; }
header p { color: #cfd6ff66; margin-top:6px; }

.floating-decor { position: fixed; inset:0; pointer-events:none; z-index:-1; }

/* game grid */
.game-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
  gap: 20px;
  margin-top: 18px;
}
.game-card {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
  padding: 18px; border-radius: 14px; text-decoration:none; color:var(--text);
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}
.game-card img { width:92px; height:92px; image-rendering: pixelated; border-radius:8px; background:rgba(255,255,255,0.04); padding:6px;}
.game-card h3 { margin:0; font-size:16px; color:var(--accent2); text-shadow:0 0 10px rgba(80,250,123,0.06); }
.game-card:hover { transform: translateY(-8px); box-shadow: 0 18px 40px rgba(80,100,220,0.12); }

/* Leaderboard */
.leaderboard { margin: 28px auto; max-width:760px; background:var(--card); padding:14px; border-radius:12px; }
.leaderboard table { width:100%; border-collapse:collapse; }
.leaderboard th, .leaderboard td { padding:8px 10px; text-align:left; border-bottom:1px solid rgba(255,255,255,0.04); }
.leaderboard th { color:var(--muted); font-weight:600; }

/* footer */
footer { margin-top:30px; color:#aab3d4; text-align:center; padding:30px 0; }
footer .links { display:flex; gap:10px; justify-content:center; margin-bottom:12px; flex-wrap:wrap; }

/* contact */
footer form { display:flex; flex-direction:column; gap:8px; align-items:center; max-width:520px; margin: 12px auto 0; }
footer textarea { width:100%; min-height:90px; resize:none; }

/* animate pointer on canvas area when hovering sprites */
.hover-cursor { cursor: pointer; }

/* small responsiveness */
@media (max-width:520px){
  .game-card img{ width:72px; height:72px; }
  .game-card{ padding:12px; }
}
