/* Studio page: one featured game. Reuses base.css tokens; nothing here
   introduces a colour that base.css doesn't already define per theme. */

.hero { padding: 72px 0 40px; }

.feature {
  display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: center;
  background: var(--bg-inset); border: 1px solid var(--rule); border-radius: 14px;
  padding: 24px;
}
.feature-art {
  display: block; width: 100%; height: auto; aspect-ratio: 1;
  border-radius: 22%; /* app-icon squircle-ish, matches how stores show it */
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .45);
}
.feature-name {
  margin: 0; font: 600 30px/1.1 var(--serif);
}
.feature-name span {
  display: block; margin-top: 8px;
  font: 500 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.feature-line { margin: 18px 0 0; font-size: 19px; color: var(--amber); }
.feature-body { margin: 10px 0 0; color: var(--muted); max-width: 52ch; }

.status { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.status li {
  border: 1px solid var(--rule); border-radius: 3px; padding: 7px 10px;
  font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.status li.soon { border-color: var(--green); color: var(--green); }

@media (max-width: 620px) {
  .hero { padding: 48px 0 28px; }
  .feature { grid-template-columns: 1fr; gap: 20px; padding: 18px; }
  .feature-art { max-width: 200px; }
  .feature-name { font-size: 26px; }
}