/* The Game Lounge: shelves of games, each showing a picture of itself, with one
   age filter across the whole page. Loaded after studio.css and trail-covers.css
   and scoped to .lounge, so it does not disturb anything already there. */

.lounge{
  padding:3.2rem max(1.4rem,calc((100% - 1140px)/2)) 1rem;
  background:linear-gradient(var(--meadow),var(--cream));
}
.lounge h2{margin:.5rem 0 .6rem}
.lounge h2 em{color:var(--coral);font-style:normal}
.lounge-note{max-width:52ch;margin-bottom:1.4rem}

/* --- the age filter --------------------------------------------------- */
.age-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 .6rem}
.age-filter button{
  min-height:48px;min-width:48px;padding:.4rem 1rem;
  border:2px solid #9aa889;border-radius:5px 16px 5px 16px;
  background:var(--cream);font-weight:800;font-size:1rem;
  transition:background .18s,border-color .18s,transform .18s;
}
.age-filter button:hover{background:#f4e7bf;transform:translateY(-2px)}
.age-filter button[aria-pressed="true"]{
  background:var(--ink);border-color:var(--ink);color:var(--cream);
}
.filter-count{font-size:.86rem;font-weight:700;color:#4a5d4a;margin-bottom:2rem;min-height:1.4rem}

/* --- shelves ----------------------------------------------------------- */
.shelf{margin:0 0 2.8rem}
.shelf[hidden]{display:none}
.shelf h3{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:.15rem}
.shelf-sub{font-size:.9rem;color:#4a5d4a;margin-bottom:1.1rem}
.shelf-cards{
  display:grid;
  /* 260px cap: the covers are 560px wide, so a card is never drawn beyond half
     its painting. Same rule as the trail cards. */
  grid-template-columns:repeat(auto-fill,minmax(212px,260px));
  gap:1.5rem;
}

.game-card{
  display:flex;flex-direction:column;
  text-decoration:none;color:var(--ink);
  background:var(--cream);
  border:1px solid #b9c3a8;
  border-radius:6px 22px 6px 22px;
  box-shadow:0 3px 0 #cdd1b2;
  overflow:hidden;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.game-card:hover{transform:translateY(-3px);box-shadow:0 8px 18px #17465526}
.game-card[hidden]{display:none}

.game-cover{display:block;aspect-ratio:3/4;background:var(--mist);overflow:hidden}
.game-cover img{width:100%;height:100%;object-fit:cover}

.game-body{display:flex;flex-direction:column;flex:1;padding:.9rem 1rem 1rem}
.game-shelf{
  font-size:.68rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.09em;color:var(--coral);
}
.game-card strong{margin-top:.25rem;font:700 1.28rem/1.12 var(--display)}
.game-card small{margin-top:.35rem;font-size:.85rem;line-height:1.45}
.game-ages{margin-top:.5rem;font-size:.75rem;font-weight:700;color:#4a5d4a}
.game-go{
  margin-top:auto;padding-top:.85rem;
  font-weight:800;font-size:.88rem;
  text-decoration:underline;text-underline-offset:5px;
}

.lounge-more{margin:1rem 0 2rem;font-size:.92rem}
.lounge-more a{font-weight:800}

/* Nothing matched. Never leave a child looking at an empty page. */
.lounge-empty{
  padding:1.6rem;border:2px dashed #9aa889;border-radius:8px;
  background:var(--cream);font-weight:700;
}
.lounge-empty[hidden]{display:none}

@media(max-width:700px){
  .lounge{padding:2.4rem 1.4rem 1rem}
  /* Two up, always. auto-fill dropped to a single 315px card on a 360px phone,
     which is wider than the 560px cover should ever be drawn, and made ten games
     into a very long scroll. Two tiles a row is how an arcade reads anyway. */
  .shelf-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}
  .game-body{padding:.7rem .75rem .8rem}
  .game-card strong{font-size:1rem;letter-spacing:-.02em}
  .game-card small{font-size:.76rem;line-height:1.4}
  .game-shelf{font-size:.62rem}
  .game-ages{font-size:.7rem}
  .game-go{font-size:.78rem;padding-top:.6rem}
  .age-filter{gap:.4rem}
  .age-filter button{padding:.4rem .8rem}
}

@media(prefers-reduced-motion:reduce){
  .game-card,.game-card:hover,.age-filter button:hover{transform:none;transition:none}
}