/* style.css */
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background:#f6f7fb; color:#111; }

.header {
  padding: 14px 16px;
  background: #111827;
  color: #fff;
  font-weight: 700;
}

.layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  padding: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.sidebar, .card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.sidebar { padding: 14px; position: sticky; top: 12px; height: fit-content; }
.card { padding: 16px; }

.nav-title { font-size: 13px; font-weight: 700; color:#6b7280; margin: 8px 0; }
.platforms a {
  display: inline-block;
  padding: 8px 10px;
  border-radius: 10px;
  margin: 0 6px 8px 0;
  background: #eef2ff;
  color: #1f2937;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
}
.platforms a.active { background:#111827; color:#fff; }

.game-list a {
  display:block;
  padding: 10px 10px;
  border-radius: 10px;
  text-decoration:none;
  color:#111;
  border: 1px solid #f0f0f0;
  margin-bottom: 8px;
}
.game-list a:hover { background:#f9fafb; }

.game-hero {
  display:grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  align-items: start;
}
.package {
  width: 140px; height: 140px;
  border-radius: 16px;
  background:#f3f4f6;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.package img { width:100%; height:100%; object-fit: cover; display:block; }
.game-title { font-size: 22px; font-weight: 900; margin: 0; }
.meta { color:#6b7280; margin-top: 6px; font-weight: 600; }

.section { margin-top: 18px; }
.section h2 { font-size: 16px; margin: 0 0 10px; }

.trophies { display: grid; gap: 8px; }
.trophy {
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 10px;
  display:flex;
  gap: 10px;
}
.badge {
  min-width: 84px;
  text-align:center;
  padding: 6px 8px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 12px;
  background:#f3f4f6;
}
.badge.platinum { background:#ede9fe; }
.badge.gold { background:#fff7ed; }
.badge.silver { background:#f1f5f9; }
.badge.bronze { background:#fff1f2; }

.posts { display: grid; gap: 10px; }
.post {
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 12px;
}
.post .who { font-weight: 900; }
.post .when { color:#6b7280; font-size: 12px; margin-left: 8px; font-weight: 700; }
.post .contact { margin-top: 6px; color:#374151; font-size: 13px; }

form .row { display:grid; gap: 10px; grid-template-columns: 1fr 1fr; }
input, textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  outline: none;
}
textarea { min-height: 110px; resize: vertical; }
button {
  border:0;
  padding: 10px 14px;
  border-radius: 12px;
  background:#111827;
  color:#fff;
  font-weight: 900;
  cursor:pointer;
}
button:hover { opacity:.92; }

.notice { padding: 10px 12px; border-radius: 12px; background:#ecfeff; border:1px solid #cffafe; margin-bottom: 12px; font-weight: 700; }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .game-hero { grid-template-columns: 100px 1fr; }
  .package { width:100px; height:100px; }
  form .row { grid-template-columns: 1fr; }
}