/* Anonymous game library. Native radio controls work without JavaScript. */
.playroom-intro { max-width: none; padding: 30px 0 24px; }
.playroom-intro h1 { margin: 10px 0 14px; }
.playroom-intro > p:not(.eyebrow) { margin: 0; font-size: 16px; }
.playroom-library { min-width: 0; }
.playroom-browser { min-width: 0; margin: 0; padding: 0; border: 0; }
.playroom-browser legend { margin-bottom: 12px; padding: 0; color: #645d55; font-size: 14px; font-weight: 650; }
.playroom-filter { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; clip: rect(0,0,0,0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.playroom-filter-label { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; gap: 8px; margin: 0 7px 9px 0; padding: 9px 15px; border: 1px solid #c4cfc3; border-radius: 999px; background: #fffcf8; color: #284e3e; font-size: 14px; font-weight: 650; cursor: pointer; line-height: 1.4; }
.playroom-filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; min-height: 22px; padding: 1px 5px; border-radius: 999px; background: #e7eee5; font-size: 11px; }
.playroom-filter:checked + .playroom-filter-label { border-color: #284e3e; background: #284e3e; color: #fff; }
.playroom-filter:checked + .playroom-filter-label .playroom-filter-count { background: #ffffff26; color: #fff; }
.playroom-filter:focus-visible + .playroom-filter-label { outline: 3px solid #267451; outline-offset: 4px; }
.playroom-filter-label:hover { border-color: #284e3e; }
.playroom-results { margin: 10px 0 18px; color: #645d55; font-size: 13px; }
.playroom-result { display: none; }
#game-filter-all:checked ~ .playroom-results .game-result-all,
#game-filter-jumping:checked ~ .playroom-results .game-result-jumping,
#game-filter-battles:checked ~ .playroom-results .game-result-battles,
#game-filter-quick:checked ~ .playroom-results .game-result-quick,
#game-filter-relaxing:checked ~ .playroom-results .game-result-relaxing { display: inline; }
#game-filter-jumping:checked ~ .playroom-grid .playroom-card:not(.game-category-jumping),
#game-filter-battles:checked ~ .playroom-grid .playroom-card:not(.game-category-battles),
#game-filter-quick:checked ~ .playroom-grid .playroom-card:not(.game-category-quick),
#game-filter-relaxing:checked ~ .playroom-grid .playroom-card:not(.game-category-relaxing) { display: none; }
.playroom-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.playroom-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #e1d8cd; border-radius: 22px; background: #fffcf8; }
.playroom-art { display: block; background: #eee7df; }
.playroom-art img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.playroom-art:focus-visible { outline-offset: -5px; }
.playroom-card-body { display: flex; flex: 1; flex-direction: column; padding: 18px; }
.playroom-tags { margin: 0 0 7px; color: #526855; font-size: 11px; font-weight: 700; letter-spacing: .4px; }
.playroom-card h2 { margin: 0 0 10px; font-size: 23px; line-height: 1.25; letter-spacing: -.4px; }
.playroom-card h2 a { text-decoration: none; }
.playroom-copy { flex: 1; margin: 0 0 18px; color: #645d55; font-size: 14px; line-height: 1.6; }
.playroom-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.playroom-actions .button { min-width: 96px; min-height: 44px; padding: 9px 17px; text-align: center; font-size: 14px; }
.playroom-rules { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 10px; font-size: 14px; font-weight: 650; }
@media (max-width: 1120px) { .playroom-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) {
  .playroom-intro { padding-top: 14px; }
  .playroom-intro h1 { font-size: 36px; }
  .playroom-intro > p:not(.eyebrow) { font-size: 14px; }
  .playroom-filter-label { margin-right: 4px; padding-inline: 12px; font-size: 13px; }
  .playroom-grid { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .playroom-art img { aspect-ratio: 16 / 10; }
  .playroom-card-body { padding: 16px 18px; }
  .playroom-copy { margin-bottom: 14px; }
}
@media print {
  .playroom-browser legend, .playroom-filter, .playroom-filter-label, .playroom-results { display: none; }
  .playroom-grid .playroom-card { display: flex !important; break-inside: avoid; }
  .playroom-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .playroom-card { border-radius: 0; }
}
