/* ===========================================================================
   Harpia Games — base theme
   Dark by default. All colors are CSS vars — change them in one place.
   =========================================================================== */
:root {
    --radius: 0;
    --maxw: 1140px;
    --gap: 1.5rem;
    --header-h: 64px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Dark theme (default) */
:root,
html[data-theme="dark"] {
    --bg: #14131f;
    /* near-black, blue-tinted */
    --bg-soft: #1d1b2d;
    --card: #232140;
    --card-edge: #383558;
    /* dark blue */
    --text: #f4f6ff;
    /* white */
    --muted: #9b9fc4;
    --accent: #f18e34;
    /* orange */
    --accent-press: #d97c1f;
    /* darker orange — hover */
    --accent-2: #caf0ff;
    /* light blue */
    --header-bg: rgba(20, 19, 31, .85);
}

/* Light theme */
html[data-theme="light"] {
    --bg: #ffffff;
    --bg-soft: #eef6fd;
    --card: #ffffff;
    --card-edge: #d3e6f3;
    --text: #1c1a2e;
    /* near-black navy */
    --muted: #5c5980;
    --accent: #f18e34;
    /* orange — brand constant */
    --accent-press: #d97c1f;
    --accent-2: #3f9fd6;
    /* light blue — secondary accent on light theme */
    --header-bg: rgba(255, 255, 255, .85);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* In-page anchor links (hero nav, scroll cue) land below the sticky header. */
html { scroll-padding-top: calc(var(--header-h) + 16px); }

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* No rounded corners anywhere */
*,
*::before,
*::after {
    border-radius: 0 !important;
}

body {
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--accent);
    color: #1b1226;
}

::-moz-selection {
    background: var(--accent);
    color: #1b1226;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-2);
}

.container {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    /* Horizontal gutter so content never touches the screen edge (esp. mobile).
       Uses safe-area insets on notched phones. Vertical spacing is handled by
       <main> / section rules, so keep top/bottom at 0 here. */
    padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right));
}

.muted {
    color: var(--muted);
}

h1,
h2,
h3,
h4 {
    line-height: 1.2;
    font-weight: 700;
}

h1 {
    font-size: clamp(2rem, 5vw, 3.25rem);
}

h2 {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    margin-bottom: 1rem;
}

.section-head h1 {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
}

main>h1 {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    margin-bottom: 1.5rem;
}

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

/* Scroll reveal — JS adds .reveal, then .in when the element scrolls into view.
   Wrapped in no-preference so reduced-motion users never get hidden content. */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .55s ease, transform .55s ease;
    }

    .reveal.in {
        opacity: 1;
        transform: none;
    }
}

main {
    min-height: 60vh;
    padding: 4.5rem 0 4rem;
}

/* --- Header / Nav -------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--header-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--card-edge);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
}

.brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 800;
    color: var(--text);
    font-size: 1.15rem;
}

.brand-mark {
    color: var(--accent);
}

.brand-logo {
    height: 30px;
    width: auto;
    display: block;
}

.brand-logo.light {
    display: none;
}

html[data-theme="light"] .brand-logo.dark {
    display: none;
}

html[data-theme="light"] .brand-logo.light {
    display: block;
}

.nav-links {
    display: flex;
    gap: 1.1rem;
    list-style: none;
    align-items: center;
}

.nav-links a {
    display: block;
    padding: .5rem .15rem;
    border-radius: 0;
    color: var(--muted);
    font-weight: 500;
    font-size: .95rem;
    border-bottom: 2px solid transparent;
}

.nav-links a:hover {
    color: var(--text);
    border-bottom-color: var(--accent);
}

.nav-links a[aria-current="page"] {
    color: var(--text);
    border-bottom-color: var(--accent);
}

/* Light theme: top menu uses dark blue (rest of the theme is light blue) */
html[data-theme="light"] .nav-links a { color: #383558; }
html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-links a[aria-current="page"] { color: #1c1a2e; }

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: 0;
    cursor: pointer;
    padding: .5rem;
}

.nav-toggle span {
    width: 24px;
    height: 2px;
    background: var(--text);
    transition: .2s;
}

/* Theme dropdown */
.theme-li {
    display: flex;
    align-items: center;
    margin-left: .35rem;
}

/* Theme toggle (light <-> dark) */
.theme-toggle {
    position: relative;
    width: 52px;
    height: 26px;
    padding: 0;
    flex: 0 0 auto;
    cursor: pointer;
    background: var(--bg-soft);
    border: 1px solid var(--card-edge);
    display: block;
}

.theme-toggle .tt-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    background: var(--accent);
    color: #1b1226;
    transition: transform .18s ease;
}

.theme-toggle .tt-thumb::before { content: "\2600"; } /* ☀ */
html[data-theme="dark"] .theme-toggle .tt-thumb { transform: translateX(26px); }
html[data-theme="dark"] .theme-toggle .tt-thumb::before { content: "\1F319"; } /* 🌙 */
.theme-toggle:focus-visible { outline: 2px solid var(--accent); }

/* Language switcher (auto-filled + wired by localization.js) */
.lang-li { display: flex; align-items: center; }
.lang-select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg-soft);
    color: var(--text);
    border: 1px solid var(--card-edge);
    font: inherit;
    font-size: .85rem;
    font-weight: 500;
    padding: .32rem 1.5rem .32rem .6rem;
    line-height: 1.2;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%239b9fc4' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .5rem center;
}
.lang-select:focus-visible { outline: 2px solid var(--accent); }
.lang-select option { color: #1c1a2e; background: #fff; }

/* --- Buttons ------------------------------------------------------------- */
.btn {
    display: inline-block;
    padding: .7rem 1.3rem;
    border-radius: 0;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: .15s;
}

.btn-primary {
    background: var(--accent);
    color: #1b1226;
}

.btn-primary:hover {
    background: var(--accent-press);
    color: #1b1226;
}

.btn-ghost {
    border-color: var(--card-edge);
    color: var(--text);
}

.btn-ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* --- Hero ---------------------------------------------------------------- */
.hero {
    position: relative;
    text-align: center;
    padding: 5.5rem 1.5rem;
    background:
        linear-gradient(rgba(20, 19, 31, .72), rgba(20, 19, 31, .9)),
        url('../img/hero-harpia.jpg') center / cover no-repeat;
    margin: -4.5rem calc(50% - 50vw) 3rem;
    overflow: hidden;
}

/* Light theme: light-blue hero filter instead of the dark navy overlay
   (kept mid-toned so the white hero logo + text stay legible). */
html[data-theme="light"] .hero {
    background:
        linear-gradient(rgba(63, 159, 214, .72), rgba(95, 178, 224, .86)),
        url('../img/hero-harpia.jpg') center / cover no-repeat;
}

.hero-logo {
    display: block;
    width: min(440px, 80%);
    height: auto;
    margin: 0 auto 1.5rem;
}

.hero p.lead {
    color: rgba(244, 246, 255, .88);
    font-size: 1.2rem;
    max-width: 620px;
    margin: 1rem auto 2rem;
}

.hero .btn-ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
}

.hero .btn-ghost:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.hero .actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* --- Section header ------------------------------------------------------ */
.section {
    margin-bottom: 3.5rem;
}

.section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.section-head p {
    color: var(--muted);
}

/* --- Card grid ----------------------------------------------------------- */
.grid {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.card {
    background: var(--card);
    border: 1px solid var(--card-edge);
    border-radius: var(--radius);
    padding: 1.5rem;
    transition: .18s;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
}

.card .icon {
    font-size: 2rem;
}

.card h3 {
    font-size: 1.25rem;
}

.card .tagline {
    color: var(--accent);
    font-size: .9rem;
    font-weight: 600;
}

.card p {
    color: var(--muted);
    font-size: .95rem;
    flex: 1;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.tag {
    font-size: .72rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: var(--bg-soft);
    color: var(--muted);
    border: 1px solid var(--card-edge);
}

.card-actions {
    display: flex;
    gap: 1rem;
    margin-top: .5rem;
    font-size: .9rem;
    font-weight: 600;
}

/* --- Featured game (big rectangle) -------------------------------------- */
.game-featured {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2rem;
    align-items: center;
    margin-bottom: var(--gap);
    padding: 1.75rem;
}

.game-featured .thumb {
    aspect-ratio: 16/9;
    height: 100%;
}

.game-featured-body {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.game-featured-body h3 {
    font-size: 2rem;
    line-height: 1.15;
}

.game-featured-body p {
    font-size: 1.05rem;
}

@media (max-width: 760px) {
    .game-featured {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .game-featured-body h3 {
        font-size: 1.5rem;
    }
}

/* --- Home: featured game (Our Games call-to-action) --------------------- */
.featured-game {
    position: relative;
    display: block;
    overflow: hidden;
    isolation: isolate;
    aspect-ratio: 16 / 9;   /* match the screenshot so nothing gets cropped */
    border: 1px solid var(--card-edge);
    color: #fff;
    text-decoration: none;
    /* only the ember glow reacts to hover — the image itself never moves */
    transition: border-color .3s ease, box-shadow .3s ease;
}

.featured-game__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
}

/* soft scrim at the very bottom so the caption bar text stays readable */
.featured-game__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top,
        rgba(8, 7, 14, .82) 0%,
        rgba(8, 7, 14, .42) 13%,
        rgba(8, 7, 14, 0) 30%);
}

/* thin caption bar pinned to the bottom, content kept to the left so the
   game logo baked into the bottom-right of the art stays clear */
.featured-game__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem 1.3rem;
    padding: 1rem clamp(1.1rem, 3vw, 1.9rem);
}

.featured-game__tagline {
    font-size: 1.05rem;
    color: rgba(244, 246, 255, .92);
    max-width: 42ch;
    margin: 0;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .75);
}

.featured-game__cta {
    flex-shrink: 0;
    margin: 0;
    box-shadow: 0 6px 20px rgba(241, 142, 52, .35);
    transition: background .2s ease, box-shadow .2s ease;
}

/* Light sweep: a glare band that crosses the art on hover. Sits above the
   image but below the caption text so the button stays crisp. */
.featured-game__sweep {
    position: absolute;
    top: -25%;
    bottom: -25%;
    left: -55%;
    width: 42%;
    z-index: 0;
    pointer-events: none;
    transform: skewX(-18deg);
    background: linear-gradient(100deg,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, .5),
        rgba(255, 255, 255, 0));
    opacity: 0;
}

/* Embers host: our particles.js canvas renders here (see embers-featured.js).
   Sits above the art, below the caption text. */
.featured-game__embers {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Hover: subtle accent frame + the glare sweeps. */
.featured-game:hover,
.featured-game:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
}

.featured-game:hover .featured-game__cta,
.featured-game:focus-visible .featured-game__cta {
    background: var(--accent-press);
    box-shadow: 0 8px 26px rgba(241, 142, 52, .6);
}

.featured-game:hover .featured-game__sweep,
.featured-game:focus-visible .featured-game__sweep,
.featured-game:active .featured-game__sweep {
    animation: fg-sweep 1.1s ease-in-out;
}

@keyframes fg-sweep {
    0%   { left: -55%; opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { left: 115%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .featured-game__sweep {
        animation: none !important;
    }
}

@media (max-width: 620px) {
    .featured-game__overlay {
        background: linear-gradient(to top,
            rgba(8, 7, 14, .9) 0%,
            rgba(8, 7, 14, .5) 20%,
            rgba(8, 7, 14, 0) 42%);
    }
    .featured-game__body {
        padding: .85rem 1rem;
        gap: .55rem 1rem;
    }
    .featured-game__tagline {
        font-size: .95rem;
    }
}

/* --- Cards with media (games + tools) ----------------------------------- */
.game-card .thumb,
.tool-card .thumb {
    display: block;
    aspect-ratio: 16/9;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-soft);
}

.game-card .thumb img,
.tool-card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s;
}

.tool-card:hover .thumb img {
    transform: scale(1.04);
}

.tool-card .thumb {
    position: relative;
}

.free-badge {
    background: var(--accent);
    color: #1b1226;
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .2rem .55rem;
}

.tool-card .free-badge {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 2;
}

.free-badge-inline {
    display: inline-block;
    margin-bottom: .75rem;
}

.tool-card p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* clamp long descriptions on cards */
}

/* Whole-card click: stretched link covers the card; Docs link sits above it */
.tool-card {
    position: relative;
    cursor: pointer;
}

.tool-card h3 a.stretched-link {
    color: inherit;
    text-decoration: none;
}

.tool-card .stretched-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.tool-card .card-actions {
    position: relative;
    z-index: 2;
}

/* --- Tool detail page ---------------------------------------------------- */
.tool-hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 2rem;
    align-items: start;
    margin-bottom: 3rem;
}

.tool-hero-media {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--card-edge);
    aspect-ratio: 16/9;
    background: var(--bg-soft);
}

.tool-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tool-hero-media iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.tool-hero-body h1 {
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    margin-bottom: .5rem;
}

.store-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

.store-buttons .btn-store {
    flex: 1 1 0;
    min-width: 160px;
    max-width: 240px;
    text-align: center;
}

.btn-store {
    background: var(--accent);
    color: #1b1226;
}

.btn-store:hover {
    background: var(--accent-press);
    color: #1b1226;
}

.tool-about {
    max-width: 80ch;
}

.tool-about p {
    color: var(--muted);
    max-width: 70ch;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    display: grid;
    gap: .65rem;
}

.feature-list li {
    position: relative;
    padding-left: 1.7rem;
    color: var(--muted);
}

.feature-list li::before {
    content: "🖌️";
    position: absolute;
    left: 0;
    top: 0;
    font-size: .9rem;
}

.feature-list li strong {
    color: var(--text);
    font-weight: 700;
}

.desc-note {
    border-left: 3px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    padding: .8rem 1rem;
    margin: 1rem 0;
    color: var(--text);
}

.gallery {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.shot {
    display: block;
    aspect-ratio: 16/9;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--card-edge);
    background: var(--bg-soft);
}

.shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s;
}

.shot:hover img {
    transform: scale(1.05);
}

@media (max-width: 760px) {
    .tool-hero {
        grid-template-columns: 1fr;
    }
}

/* --- Doc index cards (3-col thumbnail grid) ------------------------------ */
.doc-grid {
    grid-template-columns: repeat(3, 1fr);
}

.doc-card {
    color: var(--text);
    text-align: center;
    align-items: center;
    gap: 1rem;
}

.doc-card:hover {
    color: var(--text);
    text-decoration: none;
}

.doc-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-soft);
    display: grid;
    place-items: center;
}

.doc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s;
}

.doc-card:hover .doc-thumb img {
    transform: scale(1.04);
}

.doc-emoji {
    font-size: 3rem;
}

.doc-card h3 {
    font-size: 1.15rem;
    margin: 0;
}

@media (max-width: 880px) {
    .doc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* --- Docs list ----------------------------------------------------------- */
.doc-list {
    list-style: none;
    display: grid;
    gap: .75rem;
}

.doc-list li {
    background: var(--card);
    border: 1px solid var(--card-edge);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.doc-list .doc-name {
    font-weight: 600;
}

/* --- Tutorials ----------------------------------------------------------- */
.video-grid {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.video-embed {
    aspect-ratio: 16/9;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--card-edge);
}

.trailer-embed {
    max-width: 760px;
}

.video-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- Forms --------------------------------------------------------------- */
.form {
    max-width: 560px;
    display: grid;
    gap: 1.1rem;
}

.hp-field {
    display: none;
}

.form-hint {
    font-size: .9rem;
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-left: 3px solid var(--accent);
    padding: .65rem .85rem;
    margin: 0 0 .25rem;
}

.form-hint[hidden] {
    display: none;
}

.form-note {
    font-size: .8rem;
    color: var(--muted);
    margin: .25rem 0 0;
}

.field {
    display: grid;
    gap: .4rem;
}

.field label {
    font-weight: 600;
    font-size: .95rem;
}

.field input,
.field textarea,
.field select {
    background: var(--bg-soft);
    border: 1px solid var(--card-edge);
    border-radius: 10px;
    color: var(--text);
    padding: .75rem .9rem;
    font: inherit;
    width: 100%;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: 2px solid var(--accent);
    border-color: var(--accent);
}

.field textarea {
    min-height: 140px;
    resize: vertical;
}

.alert {
    padding: .9rem 1.1rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    border: 1px solid;
}

.alert-ok {
    background: color-mix(in srgb, var(--accent-2) 12%, transparent);
    border-color: var(--accent-2);
    color: var(--text);
}

.err-code {
    display: inline-block;
    margin-left: .4rem;
    font-size: .8em;
    font-weight: 700;
    letter-spacing: .04em;
    opacity: .75;
    white-space: nowrap;
}

.alert-err {
    background: rgba(239, 68, 68, .1);
    border-color: #ef4444;
    color: var(--text);
}

/* --- Footer -------------------------------------------------------------- */
.site-footer {
    border-top: 1px solid var(--card-edge);
    background: var(--bg-soft);
    padding: 3rem 0 1.5rem;
}

.footer-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 2fr 1fr 1fr;
}

.footer-grid h4 {
    margin-bottom: .75rem;
    font-size: .95rem;
}

.footer-grid ul {
    list-style: none;
    display: grid;
    gap: .4rem;
}

.footer-grid a {
    color: var(--muted);
}

.footer-grid a:hover {
    color: var(--accent);
}

.footer-bottom {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--card-edge);
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 760px) {
    .nav-toggle {
        display: flex;
    }

    .nav-links {
        position: absolute;
        top: var(--header-h);
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: var(--bg-soft);
        border-bottom: 1px solid var(--card-edge);
        padding: .5rem 1rem 1rem;
        display: none;
    }

    .nav-links.open {
        display: flex;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }
}
/* ===========================================================================
   Documentation search (docs.php)
   =========================================================================== */
.docs-search { position: relative; max-width: 640px; margin-top: 1rem; }
.docs-search-input {
    width: 100%;
    padding: .8rem 1rem;
    font: inherit;
    font-size: 1rem;
    color: var(--text);
    background: var(--bg-soft);
    border: 1px solid var(--card-edge);
    border-radius: var(--radius);
}
.docs-search-input::placeholder { color: var(--muted); }
.docs-search-input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }

.docs-results { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .5rem; }
.docs-results li { margin: 0; }
.docs-results a {
    display: block;
    padding: .7rem .9rem;
    background: var(--bg-soft);
    border: 1px solid var(--card-edge);
    border-left: 3px solid transparent;
}
.docs-results a:hover,
.docs-results a.dr-active { border-left-color: var(--accent); text-decoration: none; }
.docs-results a.dr-active { outline: 1px solid var(--accent); }
.dr-crumb { display: block; font-size: .75rem; color: var(--muted); letter-spacing: .02em; }
.dr-head  { display: block; font-size: 1rem; color: var(--text); margin: .15rem 0; font-weight: 600; }
.dr-text  { display: block; font-size: .85rem; color: var(--muted); line-height: 1.5; }
.docs-results mark, .dr-head mark {
    background: var(--accent);
    color: #1b1226;
    padding: 0 .1em;
}

/* ===========================================================================
   Game landing page (game.php)
   =========================================================================== */

/* --- Hero: full-bleed video/image background --------------------------- */
.game-hero {
    position: relative;
    min-height: min(88vh, 760px);
    /* 2-column grid inside a centered container: col 1 = text, col 2 = empty (art) */
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    text-align: left;
    overflow: hidden;
    padding: 5rem max(1.5rem, calc(50% - var(--maxw) / 2));
    /* break out of .container and cancel main's top padding */
    margin: -4.5rem calc(50% - 50vw) 3.5rem;
}

.game-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.game-hero-bg video,
.game-hero-bg > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* YouTube trailer as a full-cover background (scaled to fill, no controls) */
.game-hero-yt {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.game-hero-yt iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 56.25vw;          /* 16:9 keyed to width */
    min-width: 177.78vh;      /* 16:9 keyed to height — whichever is larger fills */
    min-height: 100vh;
    border: 0;
    pointer-events: none;     /* clicks pass through; it's decorative */
}

/* Poster laid over the iframe to mask YouTube's play/pause overlay. Visible
   until the trailer actually plays, then fades out (JS adds .is-playing). */
.game-hero-yt-cover {
    position: absolute;
    inset: 0;
    z-index: 1;               /* above the iframe, below the scrim */
    background: #000 center/cover no-repeat;
    pointer-events: none;
    opacity: 1;
    transition: opacity .9s ease;
}

.game-hero-yt.is-playing .game-hero-yt-cover {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .game-hero-yt-cover { transition: none; }
}

.game-hero-scrim {
    position: absolute;
    inset: 0;
    /* flat overlay for legibility — text-shadow carries the contrast */
    background: rgba(20, 19, 31, .6);
}

.game-hero-inner {
    position: relative;
    z-index: 1;
    grid-column: 1;          /* first column; second stays empty for the art */
    max-width: 460px;
    margin-left: auto;       /* hug right edge of col 1 -> sits center-left */
    padding-right: clamp(1rem, 3vw, 3rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
}

.game-logo-img {
    width: min(440px, 100%);
    height: auto;
    margin: 0;
    filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .6));
}

.game-hero-title {
    color: #fff;
    font-size: clamp(2.2rem, 6vw, 4rem);
    text-shadow: 0 4px 28px rgba(0, 0, 0, .65);
}

.game-hero-tagline {
    color: rgba(244, 246, 255, .92);
    font-size: clamp(1.05rem, 2.4vw, 1.4rem);
    max-width: 460px;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}

.game-hero-tags { justify-content: flex-start; }

.game-hero-tags .tag {
    background: rgba(20, 19, 31, .55);
    color: #f4f6ff;
    border-color: rgba(255, 255, 255, .25);
    backdrop-filter: blur(4px);
}

.game-hero-cta { margin: .4rem 0 .2rem; }

/* --- Hero hover: fade the logo/tagline out to reveal the trailer -------- */
/* Same idea as the capsule hover — pointer over the hero fades the overlay
   content and lightens the scrim so the background trailer reads clearly. */
.game-hero-inner { transition: opacity .5s ease; }
.game-hero-scrim { transition: background-color .5s ease; }

@media (hover: hover) {
    .game-hero:hover .game-hero-inner { opacity: 0; }
    .game-hero:hover .game-hero-scrim { background: rgba(20, 19, 31, .2); }
}

@media (prefers-reduced-motion: reduce) {
    .game-hero-inner,
    .game-hero-scrim { transition: none; }
}

/* --- Hero "immersive" variant: top nav overlay, centered content, CTA in
   the hero, scroll cue. Opt-in via landing.hero_nav — doesn't affect the
   default (2-column, left-aligned) hero used by other game pages. --------- */
.game-hero-centered { grid-template-columns: 1fr; text-align: center; }

.game-hero-centered .game-hero-inner {
    grid-column: 1;
    margin: 0 auto;
    max-width: 640px;
    align-items: center;
    padding-right: 0;
}

.game-hero-centered .game-hero-tagline { margin: 0 auto; }

.game-hero-topnav {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.4rem max(1.5rem, calc(50% - var(--maxw) / 2));
    background: linear-gradient(to bottom, rgba(10, 9, 15, .7), transparent);
}

.game-hero-brand {
    color: #fff;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .95rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
}

.game-hero-navlinks { display: flex; gap: 1.6rem; }

.game-hero-navlinks a {
    color: rgba(244, 246, 255, .85);
    font-size: .92rem;
    text-decoration: none;
    letter-spacing: .02em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
    transition: color .15s ease;
}

.game-hero-navlinks a:hover { color: #fff; }

.game-hero-quote { font-style: italic; }
.game-hero-quote::before { content: '\201C'; }
.game-hero-quote::after  { content: '\201D'; }

.game-hero-scrollcue {
    position: absolute;
    bottom: 1.8rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    color: rgba(244, 246, 255, .8);
    font-size: .78rem;
    letter-spacing: .04em;
    text-decoration: none;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
    animation: hero-scrollcue-bounce 2.2s ease-in-out infinite;
}

.game-hero-scrollcue svg { width: 16px; height: 16px; }
.game-hero-scrollcue:hover { color: #fff; }

@keyframes hero-scrollcue-bounce {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 6px); }
}

@media (prefers-reduced-motion: reduce) {
    .game-hero-scrollcue { animation: none; }
}

@media (max-width: 720px) {
    .game-hero-topnav { padding: 1rem 1.2rem; }
    .game-hero-navlinks { gap: 1rem; }
    .game-hero-navlinks a { font-size: .82rem; }
    body.theme-horror .game-hero-brand,
    body.theme-horror .game-hero-navlinks a { letter-spacing: .02em; }
}

/* Small pill under the hero CTA, e.g. a tongue-in-cheek content warning. */
.game-hero-note {
    font-size: .76rem;
    letter-spacing: .03em;
    color: rgba(244, 246, 255, .65);
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(20, 19, 31, .4);
    padding: .4rem .9rem;
    max-width: 460px;
}

.game-hero-centered .game-hero-note { margin: 0 auto; }

/* --- Wishlist button (the most important CTA) -------------------------- */
.btn-wishlist {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: #2f8a3e;
    color: #fff;
    font-weight: 800;
    letter-spacing: .01em;
    border: 1px solid rgba(0, 0, 0, .25);
}

.btn-wishlist:hover {
    background: #36994a;
    color: #fff;
    transform: translateY(-2px);
}

.btn-wishlist .wl-star { font-size: 1.1em; line-height: 1; }

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.15rem;
}

/* --- Platform + social rows -------------------------------------------- */
.platform-icons {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.platform-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    font-weight: 600;
    color: #f4f6ff;
    background: rgba(20, 19, 31, .55);
    border: 1px solid rgba(255, 255, 255, .22);
    padding: .35rem .75rem;
    backdrop-filter: blur(4px);
}

.social-row {
    display: flex;
    gap: 1.1rem;
    flex-wrap: wrap;
    justify-content: flex-start;
    font-size: .9rem;
    font-weight: 600;
}

.social-row a { color: var(--accent-2); }
.social-row a:hover { color: var(--accent); }

/* --- Sections ----------------------------------------------------------- */
.game-section { max-width: var(--maxw); }

.game-lead {
    font-size: 1.1rem;
    max-width: 70ch;
    margin-bottom: 2rem;
}

/* --- Feature cards ------------------------------------------------------ */
.feature-grid {
    display: grid;
    gap: 2.75rem;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.feature-card {
    background: none;
    border: 0;
    padding: 1.4rem;
    transition: .18s;
}

.feature-card:hover {
    transform: translateY(-3px);
}

.feature-icon { font-size: 2rem; display: block; margin-bottom: .5rem; }
.feature-card h3 { font-size: 1.1rem; margin-bottom: .35rem; }
.feature-card p { color: var(--muted); font-size: .92rem; }

main.game-landing .feature-img { display: block; max-width: 100%; }
main.game-landing .feature-card-body { width: 100%; }

/* Cover mode: image fills the card with only the title over it. On hover
   the image fades, the title lifts a little and the description reveals. */
main.game-landing .feature-card-cover {
    overflow: visible;         /* let the outward-nudged corners show */
    min-height: 170px;
    justify-content: center;
    background: var(--card);   /* solid fill for cards without an image */
}

main.game-landing .feature-card-cover .feature-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    z-index: 0;
    transition: opacity .25s ease;
}

main.game-landing .feature-card.feature-card-cover::before,
main.game-landing .feature-card.feature-card-cover::after { z-index: 1; }

/* Dark scrim over the cover image so the title stays legible on top of it —
   matters most on mobile, where there's no hover to fade the image away. */
main.game-landing .feature-card-cover .feature-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top,
        rgba(0, 0, 0, .78) 0%,
        rgba(0, 0, 0, .45) 45%,
        rgba(0, 0, 0, .18) 100%);
    transition: opacity .25s ease;
}
/* Image fades on hover to reveal the description; drop the scrim with it. */
main.game-landing .feature-card-cover:hover .feature-scrim { opacity: 0; }

main.game-landing .feature-card-cover .feature-card-body {
    position: relative;
    z-index: 2;
}

main.game-landing .feature-card-cover .feature-card-body h3,
main.game-landing .feature-card-cover .feature-card-body p {
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .9);
}

main.game-landing .feature-card-cover .feature-card-body h3 {
    margin: 0 auto;                  /* centered so scaling stays symmetric */
    max-width: 80%;                  /* long titles wrap instead of overflowing */
    transform: scale(1.16);          /* enlarged by default */
    transform-origin: center bottom;
    transition: transform .40s ease;
}

/* description hidden by default, revealed on hover */
main.game-landing .feature-card-cover .feature-card-body p {
    margin: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: opacity .28s ease, max-height .28s ease, margin .28s ease;
}

/* Reserved-slot card: keeps the grid even until real content is added */
main.game-landing .feature-card-soon {
    background: transparent;
    border: 2px dashed var(--card-edge);
    opacity: .55;
}
main.game-landing .feature-card-soon .feature-soon-mark {
    font-size: 2.4rem;
    font-weight: 400;
    color: var(--muted);
    line-height: 1;
}

main.game-landing .feature-card-cover:hover .feature-img { opacity: .12; }
main.game-landing .feature-card-cover:hover .feature-card-body h3 { transform: scale(1) translateY(-3px); }
main.game-landing .feature-card-cover:hover .feature-card-body p {
    opacity: 1;
    max-height: 9em;
    margin-top: .5rem;
}

/* Image beside the text instead (small square icon) */
main.game-landing .feature-card.feature-card-side {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 1rem;
}

main.game-landing .feature-card-side .feature-img {
    width: 84px;
    height: 84px;
    object-fit: cover;
    margin: 0;
}

main.game-landing .feature-card-side .feature-card-body { width: auto; flex: 1; }

/* --- Repeated wishlist band -------------------------------------------- */
.wishlist-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    background: var(--bg-soft);
    border: 1px solid var(--card-edge);
    border-left: 4px solid var(--accent);
    padding: 2rem;
    margin-bottom: 3.5rem;
}

.wishlist-band h2 { margin-bottom: .25rem; }
.wishlist-band p { margin: 0; }
.wishlist-band-final { border-left-color: #57b94a; }

/* --- Store badges (mobile CTA: Google Play / App Store) ----------------- */
.store-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}

.store-badge {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    height: 56px;
    padding: 0 1.1rem;
    border-radius: 10px;
    background: #000;
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    text-decoration: none;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.store-badge:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, .65);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
    color: #fff;
}

.store-badge .badge-glyph {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
}

.store-badge .badge-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    text-align: left;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.store-badge .badge-top {
    font-size: .62rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .82;
}

.store-badge .badge-name {
    font-size: 1.12rem;
    font-weight: 600;
}

/* --- Image placeholders (work-in-progress pages) ----------------------- */
.img-ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    width: 100%;
    height: 100%;
    min-height: 120px;
    color: var(--muted);
    text-align: center;
    border: 2px dashed var(--card-edge);
    border-radius: 10px;
    background:
        repeating-linear-gradient(45deg,
            transparent, transparent 14px,
            color-mix(in srgb, var(--card-edge) 22%, transparent) 14px,
            color-mix(in srgb, var(--card-edge) 22%, transparent) 15px),
        var(--bg-soft);
}

.img-ph .img-ph-icon { font-size: 1.9rem; line-height: 1; opacity: .55; }

.img-ph .img-ph-label {
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Screenshot slot: the .shot already sets the 16/9 frame; drop its fill so
   the dashed placeholder inside reads cleanly. */
.shot-ph { border: 0; background: none; }

/* Feature-card media placeholder covers the card behind the centered text;
   its hint sits at the bottom so it never collides with the centered title. */
main.game-landing .feature-card-cover .feature-ph {
    position: absolute;
    inset: 0;
    z-index: 0;
    min-height: 0;
    border-radius: 0;
    justify-content: flex-end;
    padding-bottom: .6rem;
    gap: .15rem;
}

main.game-landing .feature-card-cover .feature-ph .img-ph-icon { font-size: 1.2rem; opacity: .4; }

/* --- About / Developer / Newsletter ------------------------------------ */
.game-about { max-width: 75ch; }
.game-about p { color: var(--muted); margin-bottom: 1rem; }

.developer-block {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--card);
    border: 1px solid var(--card-edge);
    padding: 1.75rem;
}

.developer-block .brand-logo { height: 56px; width: 56px; flex: 0 0 auto; }
.developer-block h2 { margin-bottom: .25rem; }
.developer-block p { margin: 0; }

.newsletter-block { max-width: 560px; }
.newsletter-form {
    display: flex;
    gap: .6rem;
    margin: 1rem 0 .25rem;
    flex-wrap: wrap;
}
.newsletter-form input {
    flex: 1 1 220px;
    background: var(--bg-soft);
    border: 1px solid var(--card-edge);
    color: var(--text);
    padding: .75rem .9rem;
    font: inherit;
}
.newsletter-form input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }

.newsletter-status { margin: .25rem 0 .5rem; }
.newsletter-status[hidden] { display: none; }

/* --- FAQ ---------------------------------------------------------------- */
.faq-list { display: grid; gap: .6rem; max-width: 75ch; }

.faq-item {
    background: var(--card);
    border: 1px solid var(--card-edge);
    padding: 0 1.1rem;
}

.faq-item summary {
    cursor: pointer;
    font-weight: 600;
    padding: 1rem 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--accent); font-size: 1.4rem; line-height: 1; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { color: var(--muted); padding: 0 0 1rem; margin: 0; }

/* --- Game landing palette: black bg, red + blue details ----------------
   Scoped to main.game-landing so the shared header/footer (outside <main>)
   keep the vanilla Harpia theme. Forced for both light/dark. */
main.game-landing {
    --bg: #000000;
    --bg-soft: #07090f;
    --card: #0c1018;
    --card-edge: #1c2b4a;     /* blue */
    --text: #f3f6ff;
    --muted: #8e97b5;
    --accent: #ff3b3b;        /* red */
    --accent-press: #d62f2f;
    --accent-2: #3da9ff;      /* blue */
}

/* Full-width black page background behind the landing content
   (header & footer paint their own backgrounds, so they're unaffected). */
body.game-landing { background: #000; }

/* Hero scrim -> flat black instead of navy */
main.game-landing .game-hero-scrim {
    background: rgba(0, 0, 0, .62);
}

/* --- Medieval type (landing content only, NOT the nav/footer) ---------- */
main.game-landing {
    font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
    font-size: 1.05rem;
}

main.game-landing h1,
main.game-landing h2,
main.game-landing h3,
main.game-landing h4,
main.game-landing .game-hero-title,
main.game-landing .btn,
main.game-landing .feature-card h3,
main.game-landing .faq-item summary,
main.game-landing .platform-chip {
    font-family: 'Cinzel', 'Times New Roman', serif;
    letter-spacing: .02em;
}

main.game-landing .game-hero-title { letter-spacing: .04em; }

/* Glass chips on black; blue/red edges */
main.game-landing .game-hero-tags .tag,
main.game-landing .platform-chip {
    background: rgba(0, 0, 0, .55);
    border-color: rgba(61, 169, 255, .45);   /* blue */
}

/* Section headings: plain (no underline) */
main.game-landing .game-section > h2 {
    display: inline-block;
}

/* Feature cards: no frame/background — centered text, Borda corners only. */
main.game-landing .feature-card {
    background: none;
    border: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* --- Radial decoration: slow-spinning, purely ornamental --------------- */
@keyframes radial-spin { to { transform: rotate(360deg); } }

/* Peeks from the side of every Steam CTA band. Clipped by the band so it
   never adds horizontal scroll. */
main.game-landing .wishlist-band {
    position: relative;
    overflow: hidden;
}

main.game-landing .wishlist-band::before {
    content: "";
    position: absolute;
    z-index: 0;
    right: -150px;
    bottom: -150px;
    width: 520px;
    height: 520px;
    background: url('../img/ui/radial.png') center / contain no-repeat;
    opacity: .55;
    pointer-events: none;
    animation: radial-spin 90s linear infinite;
}

main.game-landing .wishlist-band > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
    main.game-landing .wishlist-band::before { animation: none; }
}

/* --- "Button Store" skin — LANDING PAGE ONLY (rest of site uses default) */
main.game-landing .btn,
main.game-landing .btn-primary,
main.game-landing .btn-ghost {
    background: url('../img/ui/button-store.png') center / 100% 100% no-repeat;
    border: 0;
    color: #f3f6ff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
    transition: filter .15s ease, transform .15s ease;
}

main.game-landing .btn:hover,
main.game-landing .btn-primary:hover,
main.game-landing .btn-ghost:hover {
    background: url('../img/ui/button-store.png') center / 100% 100% no-repeat;
    filter: brightness(1.16);
    transform: translateY(-2px);
    color: #fff;
}

/* --- "Borda" corner frame on feature cards (diagonal combo 1-3 / 2-4) -- */
main.game-landing .feature-card { position: relative; }
main.game-landing .feature-card > * { position: relative; z-index: 1; }

main.game-landing .feature-grid .feature-card::before,
main.game-landing .feature-grid .feature-card::after {
    content: "";
    position: absolute;
    width: 84px;                 /* enlarged by default */
    height: 84px;
    max-width: 48%;
    max-height: 70%;
    background: url('../img/ui/borda.png') center / contain no-repeat;
    pointer-events: none;
    z-index: 3;   /* above the cover image + body so both corners always show */
    transition: width .40s ease, height .40s ease;
}

/* every card -> corners top-right + bottom-left, nudged outward so the
   ornament pixels line up with the image edge instead of overlapping it */
main.game-landing .feature-grid .feature-card::before { top: -9px; right: -9px; transform: scale(-1, -1); }
main.game-landing .feature-grid .feature-card::after  { bottom: -9px; left: -9px; transform: none; }

/* on hover everything returns to the previous (normal) state */
main.game-landing .feature-grid .feature-card:hover::before,
main.game-landing .feature-grid .feature-card:hover::after { width: 60px; height: 60px; }

/* --- Wishlist CTA as the official Steam badge image -------------------- */
.btn-wishlist-img {
    display: inline-block;
    line-height: 0;
    padding: 0;
    border: 0;
    background: none;
    transition: transform .15s ease, filter .15s ease;
}

.btn-wishlist-img img {
    display: block;
    height: 56px;
    width: auto;
    max-width: 100%;
}

.btn-wishlist-img.btn-lg img { height: 68px; }

.btn-wishlist-img:hover {
    transform: translateY(-2px);
    filter: brightness(1.05) drop-shadow(0 6px 16px rgba(0, 0, 0, .5));
}

/* --- Steam icon image (platform chips) -------------------------------- */
.pf-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    object-fit: contain;
    vertical-align: middle;
}

/* the steam mark is black art — invert so it reads on the dark chips */
main.game-landing .pf-icon-steam { filter: invert(1); }

/* --- Socials section --------------------------------------------------- */
main.game-landing .social-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.2rem;
}

main.game-landing .social-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.4rem;
    background: var(--card);
    border: 1px solid var(--card-edge);
    color: var(--text);
    font-weight: 600;
    font-size: .95rem;
    transition: transform .15s ease, border-color .15s ease, color .15s ease;
}

main.game-landing .social-link:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
}

/* All social icons render at one uniform size, regardless of source art */
main.game-landing .social-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex: 0 0 auto;
    display: block;
}

/* --- Centered hero (logo + tagline; Steam CTAs live in the bands) ------ */
main.game-landing .game-hero { grid-template-columns: 1fr; }

main.game-landing .game-hero-inner {
    margin: 0 auto;
    max-width: 760px;
    padding-right: 0;
    align-items: center;
    text-align: center;
}

main.game-landing .game-logo-img { margin: 0 auto; }

/* Top wishlist CTA: drop the red left accent (keep the uniform edge) */
main.game-landing .wishlist-band-top { border-left: 1px solid var(--card-edge); }

/* These bands ARE the wishlist button — the whole area is clickable */
main.game-landing a.wishlist-band {
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease;
}

main.game-landing a.wishlist-band:hover {
    border-color: var(--accent);
    color: var(--text);
    transform: translateY(-2px);
}

/* Mid-page + final CTAs: no border at all */
main.game-landing .wishlist-band-mid,
main.game-landing .wishlist-band-final { border: 0; }

/* Bigger Steam badge inside the band buttons */
main.game-landing .wishlist-band-badge {
    height: 92px;
    width: auto;
    max-width: 100%;
    flex: 0 0 auto;
    display: block;
}

@media (max-width: 760px) {
    .game-hero { grid-template-columns: 1fr; }
    .game-hero-inner { margin-left: 0; padding-right: 0; max-width: none; }
    .wishlist-band { flex-direction: column; align-items: flex-start; }
    .developer-block { flex-direction: column; text-align: center; align-items: center; }
    main.game-landing .feature-grid .feature-card::before,
    main.game-landing .feature-grid .feature-card::after { width: 46px; height: 46px; }
}