/* PolyWars landing page (games/polywars/index.html). The game itself lives in games/polywars/play/. */
.pw-hero { padding-block: var(--s-6) var(--s-5); }
.pw-hero .eyebrow { margin-bottom: var(--s-2); }
.pw-hero__lead { margin-top: var(--s-3); max-width: 60ch; }
.pw-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-5); }
.pw-hero__note { margin: 0; max-width: 46ch; font-size: var(--fs-small); line-height: 1.6; color: var(--text-2); }
.pw-hero__note b { color: var(--text); font-weight: 600; }

.pw-info { padding-bottom: var(--s-8, 64px); }
.pw-info__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.pw-shot { margin: 0; overflow: hidden; }
.pw-shot img { display: block; width: 100%; height: auto; }

.pw-keys__list { margin: 0; padding: var(--s-4); display: grid; gap: var(--s-2); }
.pw-keys__list > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: var(--s-3); align-items: baseline; }
.pw-keys__list dt { font-family: var(--mono); font-size: var(--fs-small); color: var(--text-2); display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }
.pw-keys__list dd { margin: 0; font-size: var(--fs-small); color: var(--text); overflow-wrap: anywhere; }
.pw-keys__foot { margin: 0; padding: 0 var(--s-4) var(--s-4); font-size: var(--fs-small); color: var(--text-3); }

@media (max-width: 860px) {
  .pw-info__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .pw-keys__list > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}