/* ==========================================================================
   Shared styling for the game-guide pages and their hub.

   Extracted rather than inlined per page: with five guides, an inline block
   means the same 200 lines in five files, and a width change becomes five
   edits that can silently disagree. One file, one place to change.

   Load order on every guide page is: this file, then ghostcfg-ui.css last, so
   the shared fluid-type and mobile-nav rules still win at equal specificity.
   ========================================================================== */

:root {
    --bg-main: #09070f;
    --bg-secondary: #130e1d;
    --purple-deep: #5e17eb;
    --purple-neon: #a056f3;
    --text-main: #e2dfec;
    --text-muted: #8b839c;
    --success-green: #00ffcc;
    --warning-orange: #ffb347;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ------------------------------------------------------------------ header */

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 8%;
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(9, 7, 15, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(160, 86, 243, 0.12);
}
.logo { font-size: 26px; font-weight: 800; color: var(--text-main); text-decoration: none; letter-spacing: -0.5px; }
.logo span { color: var(--purple-neon); }
header nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 35px; }
header nav a { color: var(--text-muted); text-decoration: none; font-size: 15px; font-weight: 500; transition: 0.3s; padding: 5px 8px; }
header nav a:hover { color: var(--purple-neon); }

/* ------------------------------------------------------------- article body

   940px, not 780. The narrower measure is better for prose in the abstract,
   but this is a reference page people scan for a path or a cvar name, and
   at 780 the Windows paths needed a horizontal scrollbar that cut the end of
   the line off - the one part you actually came for.

   Type stays at 16.5px, so the line is longer than a novel would set. That is
   the deliberate trade: fewer wrapped code lines, slightly wider prose.
   -------------------------------------------------------------------------- */
main { flex: 1; width: 100%; max-width: 940px; margin: 0 auto; padding: 60px 6% 90px; }

.crumbs { font-size: 13px; color: var(--text-muted); margin-bottom: 26px; }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--purple-neon); }

h1 { font-size: clamp(28px, 5vw, 42px); font-weight: 800; letter-spacing: -1px; line-height: 1.2; margin-bottom: 18px; }
h1 span { color: var(--purple-neon); }
.standfirst { color: var(--text-muted); font-size: 17.5px; line-height: 1.7; margin-bottom: 14px; }
.updated { font-size: 13px; color: var(--text-muted); opacity: 0.75; margin-bottom: 46px; }

h2 { font-size: clamp(22px, 3.4vw, 28px); font-weight: 700; letter-spacing: -0.4px; margin: 52px 0 16px; }
h3 { font-size: 18px; font-weight: 700; margin: 30px 0 10px; }
p { font-size: 16.5px; line-height: 1.78; margin-bottom: 18px; color: #cfc9dd; }
p strong { color: var(--text-main); }
main a { color: var(--purple-neon); }

ul, ol { margin: 0 0 20px 22px; }
li { font-size: 16.5px; line-height: 1.75; margin-bottom: 10px; color: #cfc9dd; }

/* -------------------------------------------------------------------- code */

code {
    font-family: 'Consolas', 'Courier New', monospace;
    background: rgba(160, 86, 243, 0.12);
    border: 1px solid rgba(160, 86, 243, 0.2);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 15px;
    color: #dcd2f5;
    word-break: break-word;
}

pre {
    background: #0d0a16;
    border: 1px solid rgba(160, 86, 243, 0.22);
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 22px;
}
pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #cbbfe4;
    display: block;
    /* Wrap instead of scroll. A Windows path in a scrolling box loses its tail
       off the right edge, and the tail is the folder you were looking for. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
pre code .c { color: #6f6683; }

/* A path on its own line reads better without wrapping mid-folder, so give it
   the break opportunity at the separators instead. */
pre code.path { word-break: break-all; overflow-wrap: normal; }

/* ---------------------------------------------------------------- callouts */

.callout {
    border-left: 3px solid var(--purple-neon);
    background: rgba(160, 86, 243, 0.07);
    border-radius: 0 10px 10px 0;
    padding: 18px 22px;
    margin: 0 0 24px;
}
.callout p:last-child { margin-bottom: 0; }
.callout.warn { border-left-color: var(--warning-orange); background: rgba(255, 179, 71, 0.07); }

/* ------------------------------------------------------------------ tables */

table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 15.5px; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid rgba(160, 86, 243, 0.15); vertical-align: top; }
th { color: var(--text-main); font-weight: 600; font-size: 14px; letter-spacing: 0.3px; }
td { color: #cfc9dd; line-height: 1.6; }
.tbl-wrap { overflow-x: auto; }

/* --------------------------------------------------------------------- CTAs

   Two per page, and deliberately unequal.

   The mid-article one is a single line with an inline link. It sits after the
   section that raises the question it answers ("these numbers depend on your
   hardware"), so it reads as the next sentence rather than an interruption. A
   boxed banner there would break the read and get scrolled past.

   The end one is the actual ask, and it can be a card because by that point
   the reader has either finished or left.
   -------------------------------------------------------------------------- */
.midcta {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, rgba(94, 23, 235, 0.16), rgba(160, 86, 243, 0.07));
    border: 1px solid rgba(160, 86, 243, 0.28);
    border-left: 3px solid var(--purple-neon);
    border-radius: 0 12px 12px 0;
    padding: 20px 24px;
    margin: 34px 0;
}
.midcta p { margin: 0; font-size: 16px; line-height: 1.6; }
.midcta-btn {
    flex-shrink: 0;
    display: inline-block;
    background: linear-gradient(135deg, var(--purple-deep), var(--purple-neon));
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 14.5px;
    padding: 11px 22px;
    border-radius: 30px;
    white-space: nowrap;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.midcta-btn:hover, .midcta-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(94, 23, 235, 0.36); }

.endcta {
    margin-top: 60px;
    background: var(--bg-secondary);
    border: 1px solid rgba(160, 86, 243, 0.25);
    border-radius: 16px;
    padding: 38px 34px;
    text-align: center;
}
.endcta h2 { margin-top: 0; font-size: 25px; }
.endcta p { color: var(--text-muted); font-size: 16px; margin-bottom: 10px; }
.endcta-price { font-size: 15px; color: var(--text-main); margin-bottom: 24px; }
.endcta-price b { color: var(--purple-neon); font-size: 19px; }
.endcta-btn {
    display: inline-block;
    background: linear-gradient(135deg, var(--purple-deep), var(--purple-neon));
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 16.5px;
    padding: 16px 40px;
    border-radius: 40px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.endcta-btn:hover, .endcta-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(94, 23, 235, 0.4); }
.endcta-trust { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 22px; font-size: 13.5px; color: var(--text-muted); }
.endcta-trust span::before { content: '✓ '; color: var(--success-green); font-weight: 700; }
.endcta-note { display: block; margin-top: 20px; font-size: 13.5px; color: var(--text-muted); }

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

.related { margin-top: 56px; border-top: 1px solid rgba(160, 86, 243, 0.15); padding-top: 34px; }
.related h2 { margin-top: 0; font-size: 21px; }
.related-list { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0; }
.related-list li { margin: 0; }
.related-list a {
    display: inline-block;
    padding: 9px 17px;
    border: 1px solid rgba(160, 86, 243, 0.3);
    border-radius: 30px;
    font-size: 14.5px;
    text-decoration: none;
    color: var(--text-muted);
    transition: 0.25s;
}
.related-list a:hover, .related-list a:focus-visible { border-color: var(--purple-neon); color: var(--text-main); }

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

footer { text-align: center; padding: 40px; background: var(--bg-main); color: var(--text-muted); font-size: 14px; border-top: 1px solid rgba(160, 86, 243, 0.15); }
footer a { color: var(--text-muted); text-decoration: none; margin: 0 15px; transition: 0.3s; font-weight: 500; }
footer a:hover { color: var(--purple-neon); }

/* ------------------------------------------------------------------ mobile */

@media (max-width: 780px) {
    main { padding: 40px 6% 70px; }
    h2 { margin-top: 40px; }
    /* The button under the text rather than beside it - at 320px a nowrap pill
       next to a paragraph forces the paragraph into a two-word column. */
    .midcta { flex-direction: column; align-items: flex-start; gap: 14px; }
    .midcta-btn { width: 100%; text-align: center; }
    .endcta { padding: 30px 22px; }
}

/* ============================================================== the hub page
   Only used by game-guides.html. Kept here rather than in its own file so a
   guide page and its hub cannot drift apart visually.
   ========================================================================== */

.gg-intro { text-align: center; margin-bottom: 60px; }
.gg-intro h1 { font-size: clamp(30px, 5vw, 46px); margin-bottom: 18px; }
.gg-intro p { color: var(--text-muted); font-size: 17px; line-height: 1.7; max-width: 680px; margin: 0 auto; }

.gg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 24px; }

/* The whole card is the link, so there is one tab stop per guide, not three. */
.gg-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border: 1px solid rgba(160, 86, 243, 0.18);
    border-radius: 14px;
    padding: 28px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.gg-card:hover, .gg-card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(160, 86, 243, 0.55);
    box-shadow: 0 14px 34px rgba(94, 23, 235, 0.18);
    outline: none;
}
.gg-card-tag { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--purple-neon); margin-bottom: 12px; }
.gg-card h2 { font-size: 21px; font-weight: 700; margin: 0 0 10px; line-height: 1.3; }
.gg-card p { color: var(--text-muted); font-size: 15px; line-height: 1.65; margin-bottom: 18px; }
.gg-card-meta { margin-top: auto; font-size: 13px; color: var(--text-muted); display: flex; gap: 14px; flex-wrap: wrap; }
.gg-card-meta b { color: var(--text-main); font-weight: 600; }
.gg-card-go { margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--purple-neon); }

@media (max-width: 780px) {
    .gg-grid { grid-template-columns: 1fr; }
}