/* The Strategy "All games" wall: game boxes standing on a walnut bookcase.
   Scoped to .shelf so the shared category.css stays untouched. The markup is one flat list of boxes:
   the shelves are the rows of a single grid and every box draws its own piece of plank, so the same
   markup re-flows from six boxes per shelf to four and three with no script. */

.shelf {
  --n: 6; --gap: 22px; --padX: 46px; --post: 24px; --rowgap: 28px; --plank: 34px;
  position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  column-gap: var(--gap); row-gap: var(--rowgap);
  margin: 0 0 32px; padding: 40px var(--padX) 0; overflow: hidden; border-radius: 18px;
  background:
    linear-gradient(180deg, #8d6038 0, #6b4527 3px, #583820 14px, rgba(0,0,0,0) 15px),
    radial-gradient(70% 55% at 50% -4%, rgba(255,206,140,0.32), rgba(255,206,140,0) 72%),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.16) 0 1px, rgba(0,0,0,0) 1px 11px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 3px, rgba(0,0,0,0) 3px 17px),
    linear-gradient(180deg, #3d2615, #24150a);
  box-shadow: inset 0 0 44px rgba(0,0,0,0.55);
}
/* the two uprights of the bookcase */
.shelf::before, .shelf::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: var(--post); z-index: 4; pointer-events: none;
  background: linear-gradient(90deg, #22130a, #5d3b20 35%, #7d5232 55%, #392211);
}
.shelf::before { left: 0; }
.shelf::after { right: 0; transform: scaleX(-1); }

/* One box plus its shelf-edge tag. The ::after is this box's stretch of plank (and the shadow it casts);
   neighbours meet in the middle of the gap, and the first and last box of a row run it out to the uprights. */
.shelf-game {
  position: relative; z-index: 2; display: block; padding-bottom: var(--plank);
  container-type: inline-size; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.shelf-game::after {
  content: ""; position: absolute; z-index: -1;
  left: calc(var(--gap) / -2); right: calc(var(--gap) / -2);
  top: calc(100% - var(--plank)); height: calc(var(--plank) + 18px);
  background:
    linear-gradient(180deg, rgba(255,236,205,0.6) 0 1px, rgba(0,0,0,0) 1px) top / 100% var(--plank) no-repeat,
    repeating-linear-gradient(0deg, rgba(0,0,0,0.07) 0 1px, rgba(0,0,0,0) 1px 4px) top / 100% var(--plank) no-repeat,
    linear-gradient(180deg, #cb9d66 0 9px, #8f6035 9px 10px, #7d5230 10px, #5b3a20 100%) top / 100% var(--plank) no-repeat,
    linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0)) bottom / 100% 18px no-repeat;
}

.shelf-box {
  position: relative; display: block; margin-bottom: -5px; border-radius: 6px 6px 2px 2px;
  padding: 7px 7px 0; padding: clamp(5px, 3.6cqi, 7px) clamp(5px, 3.6cqi, 7px) 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0) 30%), var(--box);
  box-shadow: inset -3px 0 0 rgba(0,0,0,0.22), inset 0 -3px 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3),
    0 0 0 1px rgba(0,0,0,0.38), 0 10px 12px -6px rgba(0,0,0,0.7);
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.22s;
}
.shelf-art {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 3px;
  background: #FEF7EC; /* the cream the thumbnails are painted on; seven of them are transparent */
  box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 0 0 2px rgba(0,0,0,0.3);
}
.shelf-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shelf-play {
  position: absolute; right: 8px; bottom: 8px; padding: 4px 11px; border-radius: 999px;
  background: #1A1612; color: #F5F0E6; font: 600 11px 'Inter', system-ui, sans-serif;
  opacity: 0; transform: translateY(4px); transition: opacity 0.18s, transform 0.18s;
}
.shelf .shelf-name {
  display: flex; align-items: center; margin: 0; padding: 0 4px; padding: 0 clamp(1px, 2cqi, 4px);
  height: 38px; height: clamp(31px, 19.5cqi, 38px);
  font: 600 14.5px/1.15 'Bricolage Grotesque', system-ui, sans-serif; font-size: clamp(11px, 7.5cqi, 14.5px);
  letter-spacing: -0.005em; color: #fff7e8; text-shadow: 0 1px 0 rgba(0,0,0,0.3);
}
.shelf-name span {
  display: block; display: -webkit-box; overflow: hidden;
  -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
}
@container (max-width: 92px) { .shelf .shelf-name { font-size: 10px; } }
@container (max-width: 80px) { .shelf .shelf-name { font-size: 9px; } }

/* "New" sticker on the box lid, for a game added in the last few weeks */
.shelf-new {
  position: absolute; z-index: 2; top: 11px; right: -5px; padding: 3px 7px 3px 8px; border-radius: 3px 2px 2px 3px;
  background: #f2c660; color: #2a1c06; font: 700 9.5px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 2px 3px rgba(0,0,0,0.45), inset 0 -1px 0 rgba(0,0,0,0.12);
}
@container (max-width: 119px) {
  .shelf-new { top: 7px; right: -4px; padding: 2px 5px 2px 6px; font-size: 8px; }
}

/* shelf-edge tag: players, then one fact, like the price card on a shop shelf */
.shelf-tag {
  position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); z-index: 3; max-width: calc(100% - 8px);
  height: 14px; padding: 0 5px; border-radius: 2px; background: #f0e5cb; color: #3a2916;
  font: 500 8.5px/14px 'JetBrains Mono', ui-monospace, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 1px 0 rgba(0,0,0,0.45), inset 0 -1px 0 rgba(0,0,0,0.1);
}
.shelf-tag b { font-weight: 700; }
.shelf-tag .fact { display: none; }
@container (min-width: 120px) {
  .shelf-tag { bottom: 7px; height: 16px; padding: 0 7px; font-size: 9.5px; line-height: 16px; }
}
@container (min-width: 160px) {
  .shelf-tag { bottom: 8px; height: 18px; padding: 0 8px; font-size: 10.5px; line-height: 18px; }
  .shelf-tag .fact { display: inline; }
}

/* hover lifts the box off the shelf; keyboard focus does the same and rings the box */
@media (hover: hover) {
  .shelf-game:hover .shelf-box {
    transform: translateY(-10px);
    box-shadow: inset -3px 0 0 rgba(0,0,0,0.22), inset 0 -3px 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3),
      0 0 0 1px rgba(0,0,0,0.38), 0 24px 20px -10px rgba(0,0,0,0.78), 0 0 26px rgba(255,205,130,0.28);
  }
  .shelf-game:hover .shelf-play { opacity: 1; transform: none; }
}
.shelf-game:focus-visible { outline: none; }
.shelf-game:focus-visible .shelf-box {
  transform: translateY(-10px); outline: 3px solid #f0c27a; outline-offset: 3px;
  box-shadow: inset -3px 0 0 rgba(0,0,0,0.22), inset 0 -3px 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3),
    0 0 0 1px rgba(0,0,0,0.38), 0 24px 20px -10px rgba(0,0,0,0.78), 0 0 26px rgba(255,205,130,0.28);
}
.shelf-game:focus-visible .shelf-play { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .shelf-box, .shelf-play { transition: none; }
}

/* box colours, one per game (a new game needs one here). Each is deep enough for the cream title
   (4.8:1 or better), and they are spread so that no two neighbours look alike at six, four or three boxes per shelf. */
.g-yahtzee { --box: #2e4873; } .g-farkle { --box: #943834; } .g-hangman { --box: #2f6460; }
.g-mancala { --box: #9a4e2f; } .g-checkers { --box: #af332b; } .g-othello { --box: #196735; }
.g-connect-4 { --box: #8a3f6a; } .g-connect-dots { --box: #935252; }
.g-chess { --box: #725c9c; } .g-chinese-checkers { --box: #1f6b82; } .g-mahjong { --box: #1b755f; }
.g-word-search { --box: #6b4a2e; } .g-2048 { --box: #a94c14; } .g-backgammon { --box: #885d33; }
.g-ultimate-tic-tac-toe { --box: #7d6200; } .g-minesweeper { --box: #4e545d; } .g-sudoku { --box: #295b95; }

/* ── columns: 6 boxes per shelf on desktop, 4 on tablets and big phones, 3 on small phones ── */
@media (min-width: 900px) {
  .shelf-game:nth-child(6n+1)::after { left: calc(var(--padX) * -1); }
  .shelf-game:nth-child(6n)::after, .shelf-game:last-child::after { right: calc(var(--padX) * -1); }
}
@media (max-width: 1279px) {
  .shelf { --gap: 14px; --padX: 30px; --post: 16px; --rowgap: 24px; --plank: 30px; padding-top: 34px; }
}
@media (min-width: 521px) and (max-width: 899px) {
  .shelf { --n: 4; border-radius: 16px; }
  .shelf-game:nth-child(4n+1)::after { left: calc(var(--padX) * -1); }
  .shelf-game:nth-child(4n)::after, .shelf-game:last-child::after { right: calc(var(--padX) * -1); }
}
@media (max-width: 700px) {
  .shelf { --gap: 10px; --padX: 22px; --post: 10px; --rowgap: 22px; --plank: 26px; padding-top: 28px; border-radius: 14px; }
  .shelf-box { margin-bottom: -4px; }
  .shelf-play { display: none; }
  /* the heading above the wall: title on one line, the subtitle under it, no rule */
  #all-games { flex-wrap: wrap; gap: 4px 12px; margin-bottom: 14px; }
  #all-games h2 { font-size: 24px; }
  #all-games .sub { flex-basis: 100%; order: 3; font-size: 13px; }
  #all-games .rule { display: none; }
}
@media (max-width: 520px) {
  .shelf { --n: 3; --gap: 8px; --plank: 24px; }
  .shelf-game:nth-child(3n+1)::after { left: calc(var(--padX) * -1); }
  .shelf-game:nth-child(3n)::after, .shelf-game:last-child::after { right: calc(var(--padX) * -1); }
}