/* ═══════════════ Trivia Rumble — categories page ═══════════════ */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Outfit", system-ui, sans-serif;
  background: var(--bg);
  background-image:
    radial-gradient(1100px 700px at 85% -10%, oklch(0.30 0.06 25 / 0.55), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, oklch(0.28 0.05 255 / 0.45), transparent 60%);
  color: var(--ink);
  min-height: 100dvh;
  overflow-x: hidden;
}
a { color: var(--gold); text-decoration: none; }
main { max-width: 1440px; margin: 0 auto; padding: 0 72px; }

/* nav (shared pattern) */
.nav {
  max-width: 1440px; margin: 0 auto; padding: 24px 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand-tiles { display: flex; gap: 5px; }
.brand-tiles i { width: 22px; height: 22px; border-radius: 7px; }
.brand-tiles .t-coral { background: var(--coral); box-shadow: 0 2px 0 var(--coral-edge); }
.brand-tiles .t-amber { background: var(--amber); box-shadow: 0 2px 0 var(--amber-edge); }
.brand-tiles .t-teal  { background: var(--teal);  box-shadow: 0 2px 0 var(--teal-edge); }
.brand-tiles .t-blue  { background: var(--blue);  box-shadow: 0 2px 0 var(--blue-edge); }
.brand-name { font-weight: 900; font-size: 1.35rem; text-transform: uppercase; letter-spacing: -0.02em; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-link { font-weight: 700; font-size: 1rem; color: var(--ink-dim); transition: color 0.2s; }
.nav-link:hover, .nav-link.is-active { color: var(--ink); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 800; border: 0; cursor: pointer;
  border-radius: var(--r-ctl); transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), filter 0.2s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); font-weight: 700; }
.btn-nav { padding: 10px 20px; font-size: 0.95rem; }

/* hero */
.cat-hero { padding: 40px 0 16px; display: flex; flex-direction: column; gap: 14px; max-width: 62ch; }
.cat-hero h1 { font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.95; }
.cat-hero p { font-size: 1.15rem; font-weight: 500; color: var(--ink-dim); line-height: 1.55; }

/* groups */
.cat-group { padding: 40px 0 8px; }
.cat-group h2 {
  font-size: 1.5rem; font-weight: 900; letter-spacing: -0.01em; margin-bottom: 20px;
  display: flex; align-items: center; gap: 12px;
}
.cat-group h2 .group-dot { width: 14px; height: 14px; border-radius: 5px; display: inline-block; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }

/* card */
.cat-card {
  background: var(--bg-raise); border-radius: var(--r-panel); padding: 22px;
  box-shadow: inset 0 0 0 2px var(--line);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.15s var(--ease);
}
.cat-card:hover { transform: translateY(-2px); }
.cat-top { display: flex; align-items: center; gap: 14px; }
.cat-emoji {
  width: 54px; height: 54px; border-radius: 16px; background: var(--bg-sink);
  display: grid; place-items: center; font-size: 1.8rem; flex-shrink: 0;
}
.cat-name { font-weight: 800; font-size: 1.2rem; line-height: 1.15; }
.cat-tagline { font-weight: 500; font-size: 0.9rem; color: var(--ink-dim); line-height: 1.45; flex: 1; }
.cat-host {
  align-self: stretch; text-align: center;
  background: var(--gold); color: var(--gold-ink); box-shadow: 0 4px 0 var(--gold-edge);
  font-weight: 800; font-size: 0.95rem; padding: 11px 18px; border-radius: 12px;
}
.cat-host:active { transform: translateY(3px) scale(0.99); box-shadow: 0 1px 0 var(--gold-edge); }
.cat-card.is-wild { box-shadow: inset 0 0 0 2px var(--gold); }

/* footer */
.footer {
  max-width: 1296px; margin: 40px auto 0; padding: 32px 0 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 2px solid var(--line);
}
.footer-brand { font-weight: 900; font-size: 1.05rem; text-transform: uppercase; }
.footer-links { font-weight: 600; font-size: 0.875rem; color: var(--ink-dim); }
/* The credit. Quieter than the site's own line, because it is a signature
   rather than a claim on the page. */
.footer-by {
  font-weight: 600; font-size: 0.8125rem; color: var(--ink-dim); opacity: 0.75;
  transition: color 0.2s, opacity 0.2s;
}
.footer-by:hover { color: var(--gold); opacity: 1; }

@media (max-width: 900px) {
  main { padding: 0 20px; }
  .nav { padding: 20px; }
  .nav-links { gap: 16px; }
  .nav-links .nav-link:not(.is-active) { display: none; }
  .cat-hero { padding-top: 16px; }
  .cat-grid { grid-template-columns: 1fr; }
  .footer { margin: 24px 20px 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* search + chips */
.cat-search {
  font: inherit; font-weight: 600; font-size: 1.05rem;
  background: var(--bg-sink); color: var(--ink);
  border: 2px solid var(--line); border-radius: var(--r-ctl);
  padding: 14px 18px; outline: none; width: min(460px, 100%);
  transition: border-color 0.2s;
}
.cat-search:focus { border-color: var(--gold); }
.cat-search::placeholder { color: oklch(0.5 0.02 60); }
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cat-chip {
  font: inherit; font-weight: 700; font-size: 0.85rem; cursor: pointer;
  background: var(--bg-raise); color: var(--ink-dim);
  border: 0; border-radius: 999px; padding: 8px 16px;
  box-shadow: inset 0 0 0 2px var(--line);
  transition: color 0.2s, box-shadow 0.2s;
  min-height: 36px;
}
.cat-chip.is-on { color: var(--gold-ink); background: var(--gold); box-shadow: 0 3px 0 var(--gold-edge); }
.cat-none { padding: 48px 0; font-weight: 600; color: var(--ink-dim); font-size: 1.05rem; }
.cat-card .cat-qcount { font-weight: 700; font-size: 0.75rem; color: var(--ink-dim); }

/* ─────────── crawlable directory, injected server side by seo.js ───────────
   These rules used to live in topic.css, which this page does not load, so the
   directory rendered as raw browser bullets. They belong with the page that
   uses them. Horizontal padding is left to `main`, which already provides it
   here, unlike the server rendered shell where topic.css does not. */
.topic-directory { padding: 0 0 64px; display: flex; flex-direction: column; gap: 16px; }
.topic-directory h2 { font-weight: 900; font-size: 1.6rem; }
.directory-sub { font-weight: 600; font-size: 0.95rem; color: var(--ink-dim); margin-bottom: 8px; }
.directory-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.directory-group h3 { font-weight: 800; font-size: 1rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.directory-group ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.directory-group li a {
  display: inline-block; background: var(--bg-raise); border-radius: 999px;
  padding: 7px 14px; font-weight: 600; font-size: 0.9rem; color: var(--ink-dim);
  box-shadow: inset 0 0 0 2px var(--line);
  transition: color 0.2s, box-shadow 0.2s;
}
.directory-group li a:hover { color: var(--ink); box-shadow: inset 0 0 0 2px var(--gold); }

/* ─────────── Categories.dc.html: accordion, tray, search ───────────
   The directory is server rendered and this only dresses it. One group open at
   a time is <details name>, which the browser enforces itself, so none of the
   behaviour below depends on script being present or having run. */
.cat-group {
  background: var(--bg-raise); border-radius: var(--r-ctl);
  box-shadow: inset 0 0 0 2px var(--line);
}
.cat-group[open] { border-radius: var(--r-panel); box-shadow: inset 0 0 0 2px var(--gold); }
.cat-group-head {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  cursor: pointer; list-style: none; min-width: 0;
}
/* Safari still draws its own triangle through ::-webkit-details-marker. */
.cat-group-head::-webkit-details-marker { display: none; }
.cat-group-emoji { font-size: 1.35rem; flex: none; }
.cat-group-name { font-weight: 800; font-size: 1rem; flex: 1; min-width: 0; }
.cat-group-count { font-weight: 700; font-size: 0.75rem; color: var(--ink-dim); flex: none; }
/* The chevron is drawn rather than shipped as an asset, and it is the one
   thing that says the row opens. It turns because [open] is on the parent. */
.cat-group-head::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-left: 2px;
  border-right: 2px solid var(--ink-dim); border-bottom: 2px solid var(--ink-dim);
  transform: translateY(-2px) rotate(45deg); transition: transform 0.2s var(--ease);
}
.cat-group[open] .cat-group-head::after {
  border-color: var(--gold); transform: translateY(2px) rotate(-135deg);
}
.cat-group .directory-group { padding: 0 16px 14px; margin: 0; }
.cat-topic { display: flex; align-items: center; gap: 6px; }
.cat-add {
  flex: none; width: 26px; height: 26px; border: 0; border-radius: 999px;
  background: var(--bg-sink); box-shadow: inset 0 0 0 2px var(--line);
  color: var(--gold); font: inherit; font-weight: 800; font-size: 0.9rem;
  cursor: pointer; display: grid; place-items: center;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.cat-add:active { transform: scale(0.92); }
.cat-add.is-in { background: var(--gold); color: var(--gold-ink); box-shadow: none; }
.cat-host {
  flex: none; font-weight: 800; font-size: 0.8rem; color: var(--gold);
  padding: 6px 10px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--line);
}

/* The tray. Pinned to the screen, not the page, and it only exists once
   something is in it, so it never covers the library for nothing. */
.mix-tray {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--bg-sink); border-top: 2px solid var(--line);
  padding: 10px 20px calc(14px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px;
}
.mix-count {
  font-weight: 800; font-size: 0.75rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-dim);
}
.mix-tray.is-full .mix-count { color: var(--gold); }
.mix-row { display: flex; align-items: center; gap: 8px; }
/* The chips scroll inside the tray rather than wrapping it into a wall: five
   Greek topic names stacked would take a third of the screen. */
.mix-chips {
  display: flex; gap: 6px; flex: 1; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.mix-chips::-webkit-scrollbar { display: none; }
.mix-chip {
  flex: none; display: flex; align-items: center; gap: 6px;
  background: var(--bg-raise); border: 0; border-radius: 999px;
  box-shadow: inset 0 0 0 2px var(--line);
  padding: 7px 12px; font: inherit; font-weight: 700; font-size: 0.8rem;
  color: var(--ink); cursor: pointer; white-space: nowrap;
}
.mix-x { color: var(--ink-dim); font-weight: 800; }
.mix-host { flex: none; padding: 11px 16px; font-size: 0.9rem; border-radius: 14px; }
/* Room for the pinned tray at the end of the page, so the last group is
   reachable on a phone. On a desktop the tray is in the rail and takes no
   space away from the end of the library. */
.cat-main { padding-bottom: 96px; }



/* Search takes the page over rather than sitting under it. */
.cat-search-wrap {
  position: sticky; top: 0; z-index: 20; background: var(--bg);
  padding: 10px 0; margin-bottom: 4px;
}
.cat-results { display: flex; flex-direction: column; gap: 8px; }
.res-count {
  font-weight: 700; font-size: 0.75rem; color: var(--ink-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.res-list { display: flex; flex-direction: column; gap: 8px; }
.res-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-raise); border-radius: var(--r-ctl);
  box-shadow: inset 0 0 0 2px var(--line); padding: 12px 14px;
}
.res-emoji { font-size: 1.5rem; flex: none; }
.res-copy { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; color: var(--ink); }
.res-name { font-weight: 800; font-size: 0.95rem; }
/* The matched run, so the reason a row is here is visible rather than guessed. */
.res-name mark { background: none; color: var(--gold); }
.res-meta { font-weight: 600; font-size: 0.75rem; color: var(--ink-dim); }
.res-add { width: 32px; height: 32px; font-size: 1rem; }

/* The rail. Scrolls sideways in its own strip rather than wrapping, because
   three Greek topic names stacked would push the directory off the first
   screen, which is the position the rail was given in order to avoid. */
.hot-rail { display: flex; flex-direction: column; gap: 8px; }
.hot-eyebrow {
  font-weight: 800; font-size: 0.75rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-dim);
}
.hot-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.hot-row::-webkit-scrollbar { display: none; }
.hot-chip {
  flex: none; display: flex; align-items: center; gap: 7px;
  background: var(--bg-raise); border-radius: 999px;
  box-shadow: inset 0 0 0 2px var(--line); padding: 7px 8px 7px 13px;
}
.hot-chip a { font-weight: 700; font-size: 0.875rem; color: var(--ink); white-space: nowrap; }
/* An empty rail is an empty element, and an empty element with a gap above it
   is a hole. Nothing to say means nothing on the page. */
#cat-hot:empty { display: none; }

/* Greek leads with the day's question. Same blocks, same markup, one number
   different, because a Greek visitor arrives without a subject in mind.
   
   The rail exists for the desktop. On a phone there is no rail, so it hands its
   children straight to this flex column and the order below can interleave them
   with the library again. Ordering cannot cross a container, and that is the
   only reason display: contents is here. */
.cat-page { display: flex; flex-direction: column; gap: 24px; }
.cat-rail { display: contents; }
#cat-hot { order: 1; }
.cat-col { order: 2; }
#cat-hub { order: 3; }
/* Greek opens with the day's question, because measured demand there names no
   subject: someone arriving without a topic in mind is handed a question
   rather than a directory to browse. Same blocks and the same markup, three
   numbers different. */
html[lang="el"] #cat-hub { order: 1; }
html[lang="el"] #cat-hot { order: 2; }
html[lang="el"] .cat-col { order: 3; }

/* ─────────── the playable streak, injected server side by seo.js ───────────
   Panel vocabulary from the topic pages, answer buttons from answers.css so
   the four identities are the same objects the live game uses. */
.hub-panel {
  background: var(--bg-raise); border-radius: var(--r-panel);
  box-shadow: inset 0 0 0 2px var(--line);
  padding: 24px; margin: 0 0 40px;
  display: flex; flex-direction: column; gap: 14px;
}
.hub-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hub-eyebrow {
  font-weight: 800; font-size: 0.75rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold);
}
.hub-streak {
  font-weight: 800; font-size: 0.85rem; color: var(--ink);
  background: var(--bg-sink); border-radius: 999px; padding: 5px 12px;
  box-shadow: inset 0 0 0 2px var(--line);
}
.hub-cat {
  font-weight: 700; font-size: 0.8rem; color: var(--ink-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.hub-q { font-weight: 900; font-size: 1.5rem; line-height: 1.25; max-width: 42ch; }
.hub-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hub-foot { font-weight: 600; font-size: 0.9rem; color: var(--ink-dim); }
/* The gold primary, matching topic.css exactly: 4px darker bottom edge that
   depresses on press. This page's own .btn only ever dressed ghost and nav
   buttons, so it carries no fill of its own. */
.btn-primary {
  background: var(--gold); color: var(--gold-ink); box-shadow: 0 4px 0 var(--gold-edge);
  padding: 14px 24px; font-size: 1.05rem; letter-spacing: 0.01em;
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:active { transform: translateY(3px) scale(0.99); box-shadow: 0 1px 0 var(--gold-edge); }
.btn-hero { padding: 18px 36px; font-size: 1.2rem; }
.hub-end { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.hub-end-line { font-weight: 600; font-size: 0.95rem; color: var(--ink-dim); }
/* The verdict, which is the first thing read after a tap. Green only when it
   is earned: a wrong answer gets the same weight in the ordinary ink, because
   red here would be a second red on a card that already marks the wrong pick. */
.hub-verdict {
  font-weight: 900; font-size: 1.6rem; text-transform: uppercase;
  letter-spacing: -0.02em; line-height: 1;
}
.hub-verdict.is-right { color: var(--good); }
.hub-share { font-weight: 600; font-size: 0.9rem; color: var(--ink-dim); }
/* Keep going and Save my streak are both text, not buttons: the gold call to
   action on this card goes to a room, and two golds would compete. */
.hub-more, .hub-save {
  background: none; border: 0; padding: 0; font: inherit;
  font-weight: 800; font-size: 0.9rem; color: var(--gold); cursor: pointer;
}
.hub-save { font-weight: 700; color: var(--ink-dim); }

/* Today's question, already answered. */
.hub-done { display: flex; align-items: center; gap: 14px; }
.hub-done-flame { font-size: 1.9rem; flex: none; }
.hub-done-copy { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.hub-done-copy b { font-weight: 800; font-size: 0.95rem; }
.hub-done-sub { font-weight: 600; font-size: 0.8rem; color: var(--ink-dim); }
.hub-share-btn {
  flex: none; background: none; border: 0; padding: 0; font: inherit;
  font-weight: 800; font-size: 0.85rem; color: var(--gold); cursor: pointer;
}

@media (max-width: 700px) {
  .hub-panel { padding: 18px; margin-bottom: 28px; }
  .hub-q { font-size: 1.25rem; }
  .hub-answers { grid-template-columns: 1fr; }
  .hub-end .btn-hero { width: 100%; text-align: center; justify-content: center; }
}

/* ─────────── desktop: the library, and a rail beside it ───────────
   From the 1440 frame in Categories.dc.html. The phone's pinned tray becomes
   the top of a sticky right rail, because a bar pinned to the bottom of the
   screen is a phone idiom and a rail is what the landing page already uses.
   Everything below 900 keeps the phone exactly as it was. */
@media (min-width: 900px) {
  .cat-main { padding-bottom: 48px; }
  .cat-page {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 64px; align-items: start;
  }
  .cat-col { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .cat-left { min-width: 0; }
  .cat-rail {
    display: flex; flex-direction: column; gap: 20px;
    position: sticky; top: 24px; min-width: 0;
  }
  /* The phone's interleaving orders are meaningless once these are in a rail
     of their own, and left in place they would reshuffle it. */
  .cat-col, #cat-hot, #cat-hub,
  html[lang="el"] .cat-col, html[lang="el"] #cat-hot, html[lang="el"] #cat-hub { order: 0; }
  /* Greek reads the day's question first, the same order its phone uses. The
     order lives here rather than in the markup, because it is a layout
     decision and not two different pages. */
  html[lang="el"] .cat-rail #cat-hub { order: -1; }

  /* The tray stops being pinned and becomes the rail's first card. */
  .mix-tray {
    position: static; border-top: 0; border-radius: var(--r-panel);
    box-shadow: inset 0 0 0 2px var(--line);
    padding: 20px; gap: 12px;
  }
  /* With a column to itself the chips can wrap. They scroll on a phone only
     because five Greek topic names stacked would take a third of the screen. */
  .mix-chips { flex-wrap: wrap; overflow-x: visible; }
  .mix-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .mix-host { width: 100%; text-align: center; }

  /* Groups run two columns, and the open one spans both, because its topics
     need the width more than the closed rows beside it do. */
  /* Dense, so the open group spanning both columns does not leave a one card
     hole in the row above it. The grid is alphabetical, so the card that fills
     the gap lands one slot early, which nobody reads as reordering. A hole
     reads as a missing group, which is worse. */
  #cat-directory .cat-groups {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    align-items: start; grid-auto-flow: dense;
  }
  #cat-directory .cat-group[open] { grid-column: 1 / -1; }
  .cat-group .directory-group ul { columns: 2; column-gap: 18px; }
  .cat-group[open] .directory-group ul { columns: 3; }
  .cat-topic { break-inside: avoid; }

}

@media (min-width: 1200px) {
  .cat-group[open] .directory-group ul { columns: 4; }
}