.play-public { max-width: 100%; }
.play-public-start { display: flex; align-items: center; gap: 20px; margin-block: 24px; }
.play-public-start .button { flex: 0 0 auto; }
.play-public-start p { margin: 0; max-width: 55ch; }
.play-public-park { position: relative; margin: 24px 0 40px; overflow: hidden; border-radius: 16px; aspect-ratio: 12 / 5; }
.play-public-background { display: block; width: 100%; height: 100%; object-fit: cover; }
.play-public-park picture { display: block; height: 100%; }
.play-public-friends { position: absolute; inset: auto 20% 0; display: flex; justify-content: center; align-items: end; }
.play-public-friends img { width: 33.333%; height: auto; object-fit: contain; }
.play-public-game { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; padding-block: 24px; border-bottom: 1px solid var(--td-color-border); }
.play-public-game > img { width: 100%; height: auto; align-self: start; }
.play-public-game h3 { margin-top: 0; }
.play-public-game li { margin-block: 8px; }
.play-public-words { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.play-public-word { border-bottom: 1px solid var(--td-color-border); padding-block: 14px; overflow-wrap: anywhere; }
.play-public summary { padding-block: 12px; cursor: pointer; }
.play-public summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.play-public-word strong { font-size: 1.3em; }
.play-public-word small { display: block; line-height: 1.6; }
.play-public-topics { columns: 3 180px; padding-inline-start: 22px; }
.play-public-topics li { break-inside: avoid; margin-bottom: 12px; }
@media (max-width: 600px) {
    .play-public-start { align-items: start; flex-direction: column; gap: 12px; }
    .play-public-park { aspect-ratio: 8 / 5; }
    .play-public-friends { inset-inline: 8%; }
    .play-public-game { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .play-public-game > img { width: 110px; }
    .play-public-words { grid-template-columns: minmax(0, 1fr); }
}