/* ==========================================================================
   GameHelpBase — homepage prototype
   Palette and spacing live in :root. Retheme the whole page from here.
   ========================================================================== */

:root {
  --nav-bg:        #111827;  /* dark top navigation */
  --nav-text:      #cbd5e1;
  --nav-text-hi:   #ffffff;

  --page-bg:       #ffffff;  /* light page body */
  --section-bg:    #f8fafc;  /* alternating band */

  --text:          #0f172a;
  --text-muted:    #64748b;
  --border:        #e2e8f0;
  --border-strong: #cbd5e1;

  --accent:        #4f46e5;
  --accent-hover:  #4338ca;
  --accent-on-dark:#818cf8;  /* accent tuned for the dark nav */
  --accent-soft:   #eef2ff;  /* accent tint for icon tiles and Tip callouts */
  --accent-border: #c7d2fe;

  --warn-bg:       #fffbeb;  /* Warning callouts. The only non-accent hue —
                                amber is a semantic signal, not decoration. */
  --warn-border:   #fde68a;
  --warn-fg:       #b45309;

  --shadow-lift:   0 12px 24px -16px rgba(15, 23, 42, 0.35);

  --radius:        16px;
  --radius-lg:     24px;

  --content:       1120px;
  --gutter:        24px;
}

/* --------------------------------------------------------------- reset -- */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; }
a { color: inherit; }
img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.site-header :focus-visible { outline-color: var(--accent-on-dark); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0; left: -9999px;
  z-index: 100;
  padding: 12px 18px;
  background: #fff;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ----------------------------------------------------------- structure -- */

.container {
  width: 100%;
  max-width: calc(var(--content) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding: 80px 0; }
.section-alt { background: var(--section-bg); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.section-head h2 {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 28px);
  letter-spacing: -0.01em;
}

.link-muted {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.link-muted:hover { text-decoration: underline; }

.meta {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* --------------------------------------------------------- top navigation */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg);
  color: var(--nav-text);
}

.nav-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 14px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--nav-text-hi);
  text-decoration: none;
}
.brand-mark {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  color: var(--accent-on-dark);
}

.main-nav {
  display: flex;
  gap: 28px;
  margin-left: auto;  /* pushes the nav to the right */
}
.main-nav a {
  padding-block: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--nav-text);
  text-decoration: none;
}
.main-nav a:hover { color: var(--nav-text-hi); }

/* There was an .icon-btn here — a search button in the header, on every page,
   wired to nothing. Removed 2026-09-23 with the homepage search bar: with six
   guides on a single game there is nothing for a search to find, and a control
   that does nothing is worse than no control. Reinstate it only with real
   search behind it. */

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

.hero {
  position: relative;
  padding: 96px 0 80px;
  overflow: hidden;
}
/* Soft tint instead of a large background image. */
.hero::before {
  content: "";
  position: absolute;
  top: -220px;
  left: 50%;
  width: 900px;
  height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(79, 70, 229, 0.1), transparent 70%);
  pointer-events: none;
}

.hero-inner { position: relative; text-align: center; }

.hero h1 {
  margin: 0 0 16px;
  font-size: clamp(32px, 5vw, 52px);
  letter-spacing: -0.025em;
}

.hero-sub {
  max-width: 560px;
  /* Was `0 auto 36px` to sit above the search bar. The search bar is gone
     (see the note above), so the bottom margin would now just be dead space
     between the hero and the first section. */
  margin: 0 auto;
  font-size: clamp(16px, 2vw, 19px);
  color: var(--text-muted);
}

/* .search-bar, .search-icon and .search-submit were here: a homepage search
   field with no search behind it. Removed 2026-09-23. If search is ever built,
   the field comes back with it — not before. */

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-hover); }

/* Outlined counterpart. Used by the game hub hero; kept here because button
   variants are a design primitive, not a page-specific component. */
.btn-secondary {
  border-color: var(--border-strong);
  background: #fff;
  color: var(--text);
}
.btn-secondary:hover {
  border-color: var(--text-muted);
  background: var(--section-bg);
}

.btn-sm {
  gap: 6px;
  padding: 7px 14px;
  font-size: 14px;
}

/* Icons inside buttons need an explicit size. The inline SVGs on this site
   carry only a viewBox — no width/height — so as flex children they have no
   intrinsic size to fall back on. Without this rule the Share icon collapsed
   to nothing on desktop and then stretched to fill the whole button once the
   button went full-width at 640px. */
.btn svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}
.btn-sm svg {
  width: 16px;
  height: 16px;
}

/* .search-submit was here. Removed with the search bar. */

/* A row of buttons. Promoted here from game-hub.css once 404.html became the
   second page to need it — shared components live in this file. `margin-top:
   auto` only does anything when the parent is a flex column (the game hub
   hero); elsewhere it is ignored. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;   /* pins the buttons to the bottom of the panel */
  padding-top: 8px;
}

/* ----------------------------------------------------- covers (placeholder)
   All cover art is a CSS gradient block. To use a real image, replace the
   .cover div with an <img> and give it the same aspect ratio. */

.cover {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-image: linear-gradient(135deg, #334155, #64748b);
}
/* Soft sheen so the flat gradient doesn't read as a broken element. */
.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, 0.18), transparent 60%);
}
.cover span {
  position: relative;
  z-index: 1;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.9);
}

/* Same visual family, distinguishable per card. One variant per Delverium
   guide, so no two cards on the same page show the same gradient:
   1 = Beginner, 2 = Demo Save Transfer, 3 = Early Access, 4 = Fishing,
   5 = Multiplayer, 6 = System Requirements.
   The next game hub starts its own run from .cover-1. */
.cover-1 { background-image: linear-gradient(135deg, #334155, #64748b); }
.cover-2 { background-image: linear-gradient(135deg, #3f3f46, #71717a); }
.cover-3 { background-image: linear-gradient(135deg, #3d4a5c, #6b7c93); }
.cover-4 { background-image: linear-gradient(135deg, #44403c, #78716c); }
.cover-5 { background-image: linear-gradient(135deg, #373f52, #6a7691); }
.cover-6 { background-image: linear-gradient(135deg, #404652, #7c8798); }

.cover-thumb { border-radius: 0; }

/* Drop-in replacement for a .cover block once real art exists. */
.cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------ media card (big + wide)
   "Large cover on the left, information panel on the right". Used by the
   homepage Featured Games block AND by the game hub hero (as .featured-card
   .game-hero) — the name is historical, the component is generic. */

.featured-card {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.cover-featured {
  aspect-ratio: auto;
  min-height: 280px;
  border-radius: 0;
}
.cover-featured span { font-size: 88px; }

.featured-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 36px;
}
.featured-body h3 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.015em;
}
.featured-desc {
  max-width: 46ch;
  margin: 0;
  color: var(--text-muted);
}

.featured-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 8px;
}
.guide-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}

/* ----------------------------------------------------------------- chips */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-block;
  padding: 4px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #f1f5f9;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: #475569;
}

/* ----------------------------------------------------------------- grids */

.grid {
  display: grid;
  gap: 24px;
}
/* Two cards per row — one filled, one reserved. Used by both content rows. */
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ------------------------------------------------------------------ faq --
   Native <details>/<summary>: no JS, keyboard-operable, announced
   correctly by screen readers. Don't replace this with a div + JS.
   Global because both the game hub and guide pages use it. */

.faq-list {
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq-item + .faq-item { border-top: 1px solid var(--border); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary:hover { background: var(--section-bg); }

.faq-chevron {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  transition: transform 0.18s ease;
}
.faq-item[open] .faq-chevron { transform: rotate(180deg); }

.faq-answer {
  max-width: 72ch;
  margin: 0;
  padding: 0 22px 20px;
  font-size: 15px;
  color: var(--text-muted);
}
/* Answers link out to guides. The global `a { color: inherit }` reset above
   would otherwise leave those links the same muted grey as the text around
   them, so they carry the accent colour the rest of the site uses. */
.faq-answer a {
  color: var(--accent);
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------- guide cards -- */

.guide-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.guide-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lift);
}

.guide-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 20px;
}
.guide-title {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.005em;
}
.guide-title a { text-decoration: none; }
.guide-title a:hover { color: var(--accent); }

/* Pinned to the bottom so chips line up across cards of unequal height. */
.guide-body > .chip {
  align-self: flex-start;
  margin-top: auto;
}

/* ----------------------------------------------------------- game cards -- */

.game-card {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.game-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lift);
}
.game-body { padding: 18px 20px 20px; }
.game-body h3 {
  margin: 0 0 4px;
  font-size: 18px;
}

/* Empty slot for content that doesn't exist yet. Dashed and non-interactive,
   so it reads as a reserved space rather than a broken card. Must stay after
   .guide-card / .game-card so its :hover can override theirs. */
.card-soon {
  border: 1px dashed var(--border-strong);
  background: transparent;
  cursor: default;
}
.card-soon:hover {
  transform: none;
  border-color: var(--border-strong);
  box-shadow: none;
}
.card-soon h3 { color: var(--text-muted); }

.cover-empty {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: #f1f5f9;
  color: #94a3b8;
}
.cover-empty svg { width: 40px; height: 40px; }

/* ---------------------------------------------------------------- footer */

.site-footer {
  padding: 36px 0;
  border-top: 1px solid var(--border);
  background: #fff;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-nav {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-nav a {
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
}
.footer-nav a:hover { color: var(--text); }

.copyright {
  margin: 0;
  font-size: 13px;
  color: #94a3b8;
}

/* ------------------------------------------------ sources (shared footer note)
   Sits under the closing review line on the Delverium pages and on the hub.
   Promoted here because three different page types need it; guide.css holds
   .article-reviewed, which it sits beside. */
.article-sources {
  margin: 0 0 64px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}
.article-sources a {
  color: var(--accent);
  text-underline-offset: 3px;
}
.article-sources strong { font-weight: 600; color: var(--text); }

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

/* Featured card goes horizontal → stacked */
@media (max-width: 900px) {
  .featured-card { grid-template-columns: 1fr; }
  .cover-featured {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
  .cover-featured span { font-size: 64px; }
  .featured-body { padding: 26px 24px 28px; }

  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Three short links reflow badly at this width — one per row. */
  .grid-3 { grid-template-columns: 1fr; }
}

/* Everything single column; nav links wrap to a second row instead of
   collapsing behind a toggle that would need JS. */
@media (max-width: 640px) {
  .hero { padding: 56px 0 48px; }
  .section { padding: 48px 0; }

  .nav-wrap { flex-wrap: wrap; row-gap: 0; }
  .main-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: 24px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 12px;
  }
  .grid-2 { grid-template-columns: 1fr; }

  .featured-body h3 { font-size: 24px; }
  .featured-foot { flex-direction: column-reverse; align-items: stretch; }
  .featured-foot .btn { width: 100%; }
  .guide-count { text-align: center; }

  /* Buttons in a row share the width rather than sitting as two narrow pills. */
  .hero-actions .btn { flex: 1 1 auto; }

  .grid-4,
  .grid-3 { grid-template-columns: 1fr; }

  .faq-item summary { padding: 16px 18px; font-size: 15px; }
  .faq-answer { padding: 0 18px 18px; }

  .footer-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .guide-card:hover,
  .entry-card:hover,
  .related-card:hover,
  .game-card:hover { transform: none; }
}