/* The big arcade: 169 brought-in games on shelves.
   Scoped to .arcade-hall so the ten games we made ourselves keep their larger,
   more considered cards. These are a library, and a library is browsed. */

.arcade-hall{
  padding:1rem max(1.4rem,calc((100% - 1140px)/2)) 3rem;
  background:linear-gradient(var(--cream),var(--meadow));
}
.arcade-hall h2{margin:.5rem 0 .6rem}
.arcade-hall h2 em{color:var(--coral);font-style:normal}

.hall-shelf h3{
  display:flex;align-items:baseline;gap:.6rem;
  font-size:clamp(1.3rem,2vw,1.7rem);margin-bottom:.15rem;
}
.shelf-count{
  font:700 .72rem var(--body);color:var(--cream);background:var(--fern);
  padding:.15rem .55rem;border-radius:999px;letter-spacing:.03em;
}

/* Smaller tiles than our own games, on purpose: these are the wide shelves you
   scan, not the ten we made and want to present. */
.mini-shelf{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  gap:.85rem;
}
.mini-shelf .shelf-rest{display:contents}
.mini-shelf .shelf-rest[hidden]{display:none}

.mini-card{border-radius:5px 14px 5px 14px;box-shadow:0 2px 0 #cdd1b2}
.mini-card .game-cover{aspect-ratio:3/4}
.mini-card .game-body{padding:.5rem .55rem .6rem}
.mini-card strong{font:700 .92rem/1.15 var(--display);margin:0}
.mini-card .game-ages{margin-top:.2rem;font-size:.66rem}

.shelf-more{
  margin-top:1rem;min-height:48px;padding:.5rem 1.2rem;
  border:2px solid var(--ink);border-radius:5px 16px 5px 16px;
  background:var(--cream);font-weight:800;font-size:.9rem;
}
.shelf-more:hover{background:var(--ink);color:var(--cream)}

@media(max-width:700px){
  .arcade-hall{padding:.5rem 1.4rem 2rem}
  /* Three across on a phone: a shelf of 105 is unusable at one or two. */
  .mini-shelf{grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
  .mini-card strong{font-size:.78rem}
  .mini-card .game-ages{font-size:.6rem}
  .mini-card .game-body{padding:.4rem .4rem .5rem}
}
@media(max-width:360px){ .mini-shelf{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* Eleven curated games rather than a wall of tiles, so the cards can breathe
   and carry a line of description. */
.arcade-hall .mini-shelf{grid-template-columns:repeat(auto-fill,minmax(190px,240px));gap:1.2rem}
.arcade-hall .mini-card strong{font-size:1.05rem}
.arcade-hall .mini-card small{display:block;margin-top:.3rem;font-size:.78rem;line-height:1.4}
@media(max-width:700px){
  .arcade-hall .mini-shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
  .arcade-hall .mini-card small{font-size:.72rem}
}