/* The landing page: a hero collage of real game artwork, picture cards for every game, colour per category. */
:root {
  --c-shooters: #d9482b; --c-word: #2f9e6e; --c-coop: #3d63dd; --c-trivia: #9b51c9; --c-creative: #f59f00;
  --c-hidden: #4b5563; --c-teams: #e0407f; --c-cards: #0f8aa3; --c-board: #6a9c1a;
}
body { background: var(--bg); }
.hub { max-width: 1200px; margin: 0 auto; padding: 0 20px 72px; }
[data-cat=shooters] { --cat: var(--c-shooters); } [data-cat=word] { --cat: var(--c-word); } [data-cat=coop] { --cat: var(--c-coop); }
[data-cat=trivia] { --cat: var(--c-trivia); } [data-cat=creative] { --cat: var(--c-creative); } [data-cat=hidden] { --cat: var(--c-hidden); }
[data-cat=teams] { --cat: var(--c-teams); } [data-cat=cards] { --cat: var(--c-cards); } [data-cat=board] { --cat: var(--c-board); }

/* top bar */
.topbar { display: flex; align-items: center; gap: 14px; padding: 18px 2px 14px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; }
.live { margin-left: auto; font-size: .85rem; font-weight: 600; color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); padding: 4px 12px; border-radius: 999px; }
.live[hidden] { display: none; }
.homelink { color: var(--muted); text-decoration: none; font-size: .9rem; margin-left: auto; }
.live:not([hidden]) + .homelink { margin-left: 0; }

/* hero: always dark, so the covers glow in both colour schemes */
.hero { position: relative; overflow: hidden; border-radius: 28px; color: #fff; padding: clamp(26px, 5vw, 56px); min-height: 380px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px; align-items: center;
  background: radial-gradient(800px 420px at 92% 0%, rgba(255, 96, 64, .42), transparent 60%), radial-gradient(700px 420px at 0% 110%, rgba(61, 99, 221, .45), transparent 60%), radial-gradient(500px 300px at 50% 50%, rgba(155, 81, 201, .18), transparent 70%), #101219; }
.hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .07) 1.4px, transparent 1.6px); background-size: 30px 30px; pointer-events: none; mask-image: linear-gradient(90deg, #000, transparent 70%); }
.kicker { margin: 0 0 14px; font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #ffd43b; }
.hero h1 { margin: 0 0 16px; font-size: clamp(2.5rem, 6.2vw, 4.7rem); line-height: .98; letter-spacing: -.04em; font-weight: 900; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, #ffd43b, #ff7a59); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { margin: 0 0 26px; max-width: 30rem; font-size: 1.12rem; line-height: 1.55; color: rgba(255, 255, 255, .78); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.btn.big { padding: 0 24px; min-height: 52px; font-size: 1.02rem; border-radius: 14px; display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.btn.big:not(.ghost) { background: #ffd43b; color: #2b2000; box-shadow: 0 8px 22px rgba(255, 212, 59, .35); }
.btn.big.ghost { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .28); box-shadow: none; }
.btn.big.ghost:hover { background: rgba(255, 255, 255, .18); }
.collage { position: relative; height: 340px; z-index: 1; }
.collage img { position: absolute; width: 250px; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 18px; border: 3px solid rgba(255, 255, 255, .92); box-shadow: 0 22px 44px rgba(0, 0, 0, .55); transition: transform .35s ease; }
.collage .c1 { left: 2%; top: 6%; transform: rotate(-9deg); } .collage .c2 { left: 34%; top: 0; transform: rotate(4deg); z-index: 2; } .collage .c3 { right: 0; top: 10%; transform: rotate(10deg); }
.collage .c4 { left: 8%; bottom: 0; transform: rotate(5deg); z-index: 3; } .collage .c5 { left: 40%; bottom: 3%; transform: rotate(-6deg); z-index: 4; } .collage .c6 { right: 3%; bottom: 0; transform: rotate(-3deg); z-index: 3; }
.hero:hover .collage img { transform: translateY(-4px) rotate(var(--r, 0deg)); }
@media (prefers-reduced-motion: reduce) { .collage img { transition: none; } }

/* start here */
.picks { margin: 34px 0 6px; }
.picks h2 { margin: 0 0 14px; font-size: 1.3rem; letter-spacing: -.02em; }
.starts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(255px, 1fr); gap: 14px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x proximity; }
.start { scroll-snap-align: start; background: var(--card); border: 1px solid var(--edge); border-radius: 18px; padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; }
.start .stack { position: relative; width: calc(100% - 12px); margin: 4px 6px 10px; aspect-ratio: 3 / 1; }
.start .stack img { position: absolute; top: 0; width: 50%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; border: 2px solid var(--card); box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
.start .s1 { left: 0; transform: rotate(-7deg); } .start .s2 { left: 25%; top: 6%; transform: rotate(3deg); z-index: 1; } .start .s3 { left: 50%; top: 0; transform: rotate(9deg); z-index: 2; }
.start h3 { margin: 0; font-size: 1.02rem; line-height: 1.25; }
.start p { margin: 0; font-size: .92rem; color: var(--muted); line-height: 1.5; }
.start a { color: var(--accent); font-weight: 600; text-decoration: none; }
.start a:hover { text-decoration: underline; }

/* finder + category chips, stuck to the top while you scroll */
.bar-sticky { position: sticky; top: 0; z-index: 20; margin: 10px -20px 8px; padding: 12px 20px 10px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--edge); }
.finder { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.finder label { margin: 0; }
.finder .search { position: relative; flex: 1 1 260px; max-width: 420px; display: block; }
.finder .search .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); display: grid; pointer-events: none; }
.finder input[type=search] { width: 100%; padding-left: 40px; border-radius: 999px; }
.finder select { min-height: 44px; border-radius: 999px; padding-left: 16px; }
.finder .check { border-radius: 999px; }
.linkish { background: none; border: 0; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; padding: 8px 6px; }
#count { font-size: .88rem; }
.menu { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 2px; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu a { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--edge); color: var(--ink); text-decoration: none; font-size: .92rem; font-weight: 600; background: var(--card); }
.menu a .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cat); display: inline-block; }
.menu a .n { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.menu a:hover { border-color: var(--cat); }
.menu a.on { background: var(--cat); border-color: var(--cat); color: #fff; }
.menu a.on .n { color: rgba(255, 255, 255, .8); } .menu a.on .dot { background: #fff; }
.menu a[hidden] { display: none; }

/* categories and the game cards */
.cat { padding: 14px 0 20px; scroll-margin-top: 130px; }
.cat[hidden] { display: none; }
.cat-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin: 14px 0 16px; padding-left: 14px; border-left: 6px solid var(--cat); }
.cat-head h2 { margin: 0; font-size: 1.55rem; letter-spacing: -.025em; line-height: 1.15; }
.cat-head p { margin: 0; color: var(--muted); font-size: .98rem; }
.catalog { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.catalog li[hidden] { display: none; }
.game { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; background: var(--card); border: 1px solid var(--edge); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.game:hover, .game:focus-visible { transform: translateY(-5px); border-color: var(--cat); box-shadow: 0 18px 40px rgba(0, 0, 0, .22); }
.game:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.game .art { position: relative; aspect-ratio: 3 / 2; background: var(--cat); overflow: hidden; }
.game .art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.game:hover .art img { transform: scale(1.05); }
.live-tag { position: absolute; left: 10px; top: 10px; background: rgba(15, 20, 26, .82); color: #8ce99a; font-size: .74rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; backdrop-filter: blur(4px); }
.live-tag[hidden] { display: none; }
.game .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.game h3 { margin: 0; font-size: 1.12rem; line-height: 1.2; letter-spacing: -.01em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 600; color: var(--muted); background: color-mix(in srgb, var(--ink) 7%, transparent); padding: 3px 9px 3px 7px; border-radius: 999px; }
.chip svg { width: 14px; height: 14px; }
.game p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.empty { color: var(--muted); padding: 40px 0; text-align: center; }
.hub-foot { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--edge); color: var(--muted); font-size: .88rem; display: flex; flex-wrap: wrap; gap: 8px 28px; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; min-height: 0; border-radius: 22px; }
  .collage { height: 230px; order: -1; margin: -6px -6px 0; }
  .collage img { width: 150px; border-width: 2px; border-radius: 12px; }
  .collage .c4, .collage .c5, .collage .c6 { display: none; }
  .collage .c1 { left: 0; top: 8%; } .collage .c2 { left: 28%; top: 14%; } .collage .c3 { right: 0; top: 4%; }
  .bar-sticky { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
  .hub { padding-left: 12px; padding-right: 12px; }
  .catalog { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; }
  .game .body { padding: 11px 12px 13px; } .game h3 { font-size: 1rem; } .game p { display: none; }
  .cat-head p { display: none; }
}

/* the shared card style for main > section must not box the categories */
#catalog > section.cat { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 14px 0 20px; margin: 0; }
#catalog > section.cat > :last-child { margin-bottom: 0; }
.picks, .picks h2 { background: none; }