/* The warm pages (home, /games/): green felt and walnut, the display face for headings, every
   game a tile with its own table, every genre a coloured token. The docs and workshop stay calm. */
body.warm {
  --felt: #173d30; --felt-2: #22513f; --felt-deep: #0f2920; --felt-ink: #f6eedb; --felt-muted: #b9cabd;
  --brass: #f5b83a; --brass-hi: #ffc95a; --brass-ink: #2a1c04; --walnut: #7a4a28; --walnut-dark: #4b2c16;
  --play: #1d5a43; --play-ink: #f6eedb;
  --tile-shadow: 0 1px 0 rgb(20 40 30 / .04), 0 18px 32px -24px rgb(16 40 30 / .55);
  /* felt: a fine noise over the green */
  --felt-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  /* walnut: a long grain, darker at the edge */
  --wood: linear-gradient(180deg, rgb(255 220 180 / .18), transparent 30%, rgb(0 0 0 / .25)),
          repeating-linear-gradient(90deg, rgb(0 0 0 / .07) 0 2px, transparent 2px 9px, rgb(255 255 255 / .04) 9px 10px, transparent 10px 23px),
          var(--walnut);
  /* the genres, as the colours of players' tokens */
  --g-adventure: #c4473a; --g-card: #2f63b8; --g-dice: #e0a019; --g-family: #4a9a46; --g-party: #9a55c4; --g-other: #7d8a85;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.warm {
  --play: #f5b83a; --play-ink: #2a1c04;
  --tile-shadow: 0 18px 32px -24px rgb(0 0 0 / .8);
  --g-card: #5b8ee0; --g-party: #b57ddb;
} }

.warm h1, .warm h2, .warm h3 { font-family: var(--f-display); font-weight: 400; letter-spacing: -.005em; }

/* ── the felt band at the top, with the header lying on it ─────────── */
.g-band { background: var(--felt-grain), radial-gradient(90% 140% at 80% 0%, var(--felt-2), var(--felt) 70%); color: var(--felt-ink); border-bottom: 10px solid var(--walnut); border-image: var(--wood) 1; }
.g-band header.top .logo, .h-hero-top header.top .logo { color: var(--felt-ink); }
.warm .g-band nav.main-nav a, .warm.home > .wrap:first-child nav.main-nav a { color: var(--felt-muted); }
.warm.home > .wrap:first-child nav.main-nav a[aria-current="page"] { color: #fff; }
.warm .g-band nav.main-nav a:hover, .warm .g-band nav.main-nav a[aria-current="page"],
.warm.home > .wrap:first-child nav.main-nav a:hover { color: #fff; }
.warm .g-band nav.main-nav .languages select { background: var(--felt-2); color: var(--felt-ink); border-color: rgb(255 255 255 / .18); }
.g-head { padding: 22px 0 34px; }
.g-head h1 { font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; margin: 0 0 14px; color: #fff; }
.g-head p { color: var(--felt-muted); max-width: 44em; }
.g-head .catalog-chart { margin-top: 10px; }
.g-head a { color: var(--brass); font-weight: 700; }

/* ── genres: a token and a name ────────────────────────────────────── */
.genre { display: flex; align-items: center; gap: 7px; margin: 0; }
.genre i, .genre-filter i { flex: none; width: .85em; height: .85em; border-radius: 50%; background: var(--gc, var(--g-other)); box-shadow: inset 0 -2px 0 rgb(0 0 0 / .28), 0 0 0 1px rgb(0 0 0 / .12); }
.g-adventure { --gc: var(--g-adventure); }
.g-card { --gc: var(--g-card); }
.g-dice { --gc: var(--g-dice); }
.g-family { --gc: var(--g-family); }
.g-party { --gc: var(--g-party); }
.g-other { --gc: var(--g-other); }
/* abstract strategy: the black and white of a board game's two sides */
.g-abstract { --gc: linear-gradient(90deg, #1e1e1e 50%, #f3ecd9 50%); }

/* ── the filter ────────────────────────────────────────────────────── */
.genre-filter { position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; padding: 14px 0 12px; margin: 0 0 4px; background: var(--bg); overflow-x: auto; scrollbar-width: none; }
.genre-filter[hidden] { display: none; }
.genre-filter::-webkit-scrollbar { display: none; }
.genre-filter button { flex: none; display: inline-flex; align-items: center; gap: 7px; font: 700 .9rem/1 var(--f-sans); padding: 9px 14px 8px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.genre-filter button:hover { border-color: var(--muted); }
.genre-filter button[aria-pressed="true"] { background: var(--felt); border-color: var(--felt); color: var(--felt-ink); }
.genre-filter button:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .genre-filter button[aria-pressed="true"] { background: var(--felt-2); border-color: var(--brass); } }

/* ── groups and tiles on /games/ ───────────────────────────────────── */
.library .group { padding: 22px 0 6px; }
.library .group[hidden], .tile[hidden] { display: none; }
.library .group > h2 { font-size: clamp(1.6rem, 3vw, 2rem); margin: 0 0 4px; }
.library .group > p { color: var(--muted); margin: 0 0 16px; max-width: 46em; font-size: .95rem; }
.library .group-small > summary h2 { font-family: var(--f-display); font-weight: 400; font-size: 1.3rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.group-small .tiles { margin-top: 14px; }
.tile { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--tile-shadow); }
.tile-pic { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--felt); }
.tile-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.tile:hover .tile-pic img { transform: scale(1.04); }
/* a published game: its rules' shape on a ruled sheet, where the table picture would be */
.tile-pic.sheet { display: grid; place-items: center; padding: 40px 20px 18px; background: var(--card); border-bottom: 1px solid var(--line); box-shadow: inset 0 0 0 8px var(--surface), inset 0 0 0 9px var(--line); }
.tile-pic.sheet svg { max-width: 100%; max-height: 100%; height: auto; }
.tile-pic.sheet .sheet-name { font: 400 1.6rem/1.15 var(--f-display); color: var(--muted); text-align: center; padding: 0 12px; }
/* a commercial game: its box, whole, on the felt (the publisher's image, credited on its page) */
.tile-pic.box-art { padding: 34px 16px 10px; }
.tile-pic.box-art img { object-fit: contain; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .35)); }
.badges { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; pointer-events: none; }
.badges li, .mini .badge { font: 700 .76rem/1 var(--f-sans); padding: 6px 10px 5px; border-radius: 999px; background: rgb(12 28 22 / .8); color: #f6eedb; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.badges .b-new, .mini .b-new { background: var(--g-adventure); color: #fff; }
.badges .b-rules { background: var(--brass); color: var(--brass-ink); }
.tile-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px 18px 18px; }
.tile .genre { font-size: .8rem; font-weight: 700; color: var(--muted); }
.tile h3 { margin: 0; font-size: 1.42rem; line-height: 1.12; }
.tile h3 a { color: inherit; text-decoration: none; }
.tile h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tile .publisher { margin: -4px 0 0; font-size: .84rem; color: var(--muted); }
.tile .blurb { flex: 1; margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.5; }
.tile .blurb { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; flex: 0 1 auto; }
.tile-body > .facts { margin-top: auto; }
.facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: .86rem; font-weight: 600; color: var(--ink); }
.facts span { display: inline-flex; align-items: center; gap: 5px; }
.facts svg { width: 15px; height: 15px; flex: none; fill: currentColor; opacity: .62; }
.tile .not-playable { margin: 0; font-size: .84rem; color: var(--muted); border-left: 3px solid var(--brass); padding-left: 9px; }
.tile .card-chart { margin: 2px 0 0; opacity: .85; }
.tile .links { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.tile .links a { font-weight: 800; font-size: .92rem; text-decoration: none; padding: 8px 14px 7px; border-radius: 999px; border: 1.5px solid var(--play); color: var(--play); }
.tile .links a.solid { background: var(--play); color: var(--play-ink); }
.tile .links a:hover { filter: brightness(1.12); }
.tile .links a:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tile .links a:not(.solid) { border-color: color-mix(in srgb, var(--play) 60%, transparent); } }

/* ── the shelves on the home page ──────────────────────────────────── */
.shelf { --gap: 22px; --cols: 4; --tw: calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols)); container-type: inline-size; display: flex; flex-wrap: wrap; gap: 34px var(--gap); align-items: flex-start; }
.shelf-group { flex: 0 0 auto; max-width: 100%; }
.shelf-group h3.genre { font-size: 1.12rem; line-height: 1.2; color: var(--ink); margin: 0 0 12px; gap: 9px; }
.shelf-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--gap); }
.shelf-group li { width: var(--tw); }
.mini { position: relative; display: block; text-decoration: none; color: var(--ink); }
.mini img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; background: var(--felt); box-shadow: 0 0 0 1px rgb(0 0 0 / .06), var(--tile-shadow); transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.mini:hover img, .mini:focus-visible img { transform: translateY(-4px) rotate(-.6deg); }
.mini:focus-visible { outline: none; }
.mini:focus-visible img { outline: 3px solid var(--brass); outline-offset: 3px; }
.mini .badge { position: absolute; top: 8px; left: 8px; }
.mini b { display: block; font: 400 1.22rem/1.15 var(--f-display); margin: 12px 0 4px; }
.mini .facts { font-size: .82rem; color: var(--muted); }
.shelf-more { flex: 1 1 calc(var(--tw) * 2 + var(--gap)); min-width: min(100%, var(--tw)); align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 22px 24px; border-radius: 14px; text-decoration: none; color: var(--felt-ink); background: var(--felt-grain), radial-gradient(120% 120% at 100% 0%, var(--felt-2), var(--felt) 70%); }
.shelf-more b { font: 400 1.3rem/1.15 var(--f-display); color: #fff; }
.shelf-more span { color: var(--felt-muted); font-size: .92rem; line-height: 1.5; }
.shelf-more .shelf-covers { display: flex; flex-wrap: wrap; gap: 8px; line-height: 0; }
.shelf-more .shelf-covers img { width: 56px; height: 56px; object-fit: contain; border-radius: 4px; filter: drop-shadow(0 3px 5px rgb(0 0 0 / .4)); }
.shelf-more em { font-style: normal; font-weight: 800; color: var(--brass); }
.shelf-more:hover em { text-decoration: underline; text-underline-offset: 4px; }
.shelf-more:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }
@media (max-width: 900px) { .shelf { --cols: 3; } }
@media (max-width: 600px) { .shelf { --cols: 2; --gap: 14px; row-gap: 26px; } .mini b { font-size: 1.05rem; margin-top: 9px; } .mini .facts { font-size: .76rem; gap: 2px 10px; } }

@media (prefers-reduced-motion: reduce) { .tile-pic img, .mini img { transition: none; } .tile:hover .tile-pic img, .mini:hover img { transform: none; } }
@media (max-width: 520px) {
  .tiles { grid-template-columns: 1fr; gap: 16px; }
  .tile-pic:not(.sheet) { aspect-ratio: 16 / 8; }
  .tile-pic.sheet { padding: 36px 16px 12px; }
  .tile-body { padding: 12px 16px 16px; gap: 7px; }
  .tile .blurb { -webkit-line-clamp: 2; line-clamp: 2; font-size: .9rem; }
  .tile .card-chart, .tile .links a.made { display: none; }
  .genre-filter { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .g-head { padding-bottom: 26px; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .genre i, :root:not([data-theme="light"]) .genre-filter i { box-shadow: inset 0 -2px 0 rgb(0 0 0 / .28), 0 0 0 1px rgb(255 255 255 / .28); } }