/* ==========================================================================
   GameHelpBase — game hub (per-game landing page)
   Loaded after style.css. Depends on it for tokens and shared components
   (.container .section .section-head .btn .chips .cover .guide-card
   .grid-2 .grid-3 .grid-4 .faq-*).

   Shared components are promoted to style.css once a second page needs them.
   Anything in this file is genuinely hub-only.

   No colour literals belong in this file. Everything comes from :root in
   style.css — if you need a new colour, add a token there first.

   To reuse this page for another game: copy delverium/index.html, change the
   copy, and swap the .cover-N class. You should not need to edit this file.
   ========================================================================== */

/* ----------------------------------------------------------- game hero -- */

/* .featured-card turns its cover into a fixed 380px column. The hub hero
   wants a wider one, so it overrides just that. */
.game-hero { grid-template-columns: minmax(300px, 440px) 1fr; }

.game-hero h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 42px);
  letter-spacing: -0.02em;
}
.game-hero .featured-desc { font-size: 17px; }

/* Release date / platform. <dl> with <div> wrappers around each dt/dd pair
   is valid HTML5 and keeps the pairs together when the row wraps. */
.game-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.game-facts > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.game-facts dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.game-facts dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

/* .hero-actions was promoted to style.css when 404.html became the second
   page to need a row of buttons. Not redefined here. */

/* In-page anchors (#guides) would otherwise land under the sticky header. */
.anchor-target { scroll-margin-top: 84px; }

/* ---------------------------------------------------------------- icons --
   Hand-drawn stroke geometry, 24x24. Deliberately not an icon library:
   no external dependency and no icon-set licensing to comply with.
   Colour is inherited, so an icon takes on whatever context it sits in. */

.icon-tile {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
}
.icon-tile svg {
  width: 22px;
  height: 22px;
}

/* ---------------------------------------------------------- entry cards --
   One component for both Quick Start and Core Guides. The difference is
   only whether an .entry-link is present. The whole card is the <a>, so
   .entry-link must be a <span>, never a nested anchor. */

.entry-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 20px 24px;
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.entry-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lift);
}
.entry-card h3 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.005em;
}
.entry-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

.entry-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;   /* keeps the link on the baseline across a row */
  padding-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}
.entry-link svg {
  width: 15px;
  height: 15px;
}
.entry-card:hover .entry-link { text-decoration: underline; }

/* Reserved category slot. Same box as .entry-card, but dashed and
   non-interactive, so a category that has no guides yet reads as held space
   rather than as a link that goes nowhere. Mirrors .card-soon in style.css,
   which does the same job for game cards; must stay after .entry-card so its
   :hover can override. Use a <div>, never an <a> — there is nothing to
   navigate to. */
.entry-card-soon {
  border-style: dashed;
  border-color: var(--border-strong);
  background: transparent;
  cursor: default;
}
.entry-card-soon:hover {
  transform: none;
  border-color: var(--border-strong);
  box-shadow: none;
}
/* Desaturated tile: the accent tint would read as "this one is live". */
.entry-card-soon .icon-tile {
  background: var(--section-bg);
  color: var(--text-muted);
}
.entry-card-soon h3 { color: var(--text-muted); }

.entry-note {
  display: inline-flex;
  align-items: center;
  margin-top: auto;   /* matches .entry-link's baseline behaviour */
  padding-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}

/* ------------------------------------------------------- popular topics --
   Two-column link panel with hairline separators. Assumes an EVEN number
   of .topic-link children — the last-row rule below clears the bottom
   border from the final two. Add or remove links in pairs. */

.topic-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.topic-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  text-decoration: none;
}
.topic-link:hover {
  background: var(--section-bg);
  color: var(--accent);
}
.topic-link svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}
.topic-link:hover svg { color: var(--accent); }

.topic-link:nth-last-child(-n + 2) { border-bottom: 0; }

/* -------------------------------------------------------------- related -- */

.related-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.related-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lift);
}
.related-card svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
}
.related-card:hover svg { color: var(--accent); }

/* ============================================================ responsive == */

@media (max-width: 900px) {
  .topic-panel { grid-template-columns: 1fr; }
  /* Odd count or not, one column means every row is a last row. */
  .topic-link:nth-last-child(-n + 2) { border-bottom: 1px solid var(--border); }
  .topic-link:last-child { border-bottom: 0; }
}

@media (max-width: 640px) {
  .entry-card { padding: 20px 18px 22px; }
  .game-facts { gap: 14px 28px; }
  /* .hero-actions' own mobile rule now lives with the component in style.css. */
  .related-card { padding: 18px; font-size: 15px; }
}