/* =====================================================================
   Pokémon sub-app — landing page styles (WIP scaffold).

   Seeds the visual identity in docs/07-design-language.md: a "field guide"
   look — ink-dark ground, cream text, hard 1px rules, monospace wayfinding
   labels, flat accent-tinted banners. Deliberately NOT the main site's
   glassy card language: no gradients-on-cards, no glows, no rounded-2xl.
   Mobile-first throughout.

   Landing layout: masthead → HOME banner → Ribbon Master strip →
   generation sections holding per-game banner cards (typographic until
   art exists; each carries its game accent in --game).
   ===================================================================== */

:root {
    --ground: #12140f;        /* deep ink-olive, not blue, not gray */
    --ground-2: #191c15;
    --paper: #ece7d8;         /* cream ink for text */
    --paper-dim: #a9a595;
    --rule: #3a3d31;          /* hairline borders */
    --red: #de3c28;           /* pokéball red — wayfinding accent, used sparingly */
    --home: #6f8fd4;          /* HOME blue */
    --ribbon: #d8a02e;        /* ribbon gold */
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    --sans: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
}

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

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

body {
    background: var(--ground);
    color: var(--paper);
    font-family: var(--sans);
    line-height: 1.55;
    min-height: 100vh;
    /* faint dot-grid texture, like graph paper in a field journal */
    background-image: radial-gradient(rgba(236, 231, 216, 0.05) 1px, transparent 1px);
    background-size: 22px 22px;
}

/* ---- top bar ---- */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid var(--rule);
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.topbar-back { color: var(--paper-dim); text-decoration: none; }
.topbar-back:hover { color: var(--paper); }

.topbar-badge {
    color: var(--red);
    border: 1px solid var(--red);
    padding: 0.15rem 0.55rem;
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
}

/* ---- layout ---- */
.wrap {
    max-width: 62rem;
    margin: 0 auto;
    padding: 0 1.1rem 3rem;
}

/* ---- masthead (compact, no tall hero) ---- */
.masthead {
    padding: 2rem 0 1.4rem;
}

.hero-kicker {
    font-family: var(--mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--red);
    margin-bottom: 0.5rem;
}

.masthead-title {
    font-size: clamp(1.6rem, 5.5vw, 2.6rem);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

/* ---- shared mono tag ("Not built yet", counts) ---- */
.banner-tag {
    font-family: var(--mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--paper-dim);
    border: 1px solid var(--rule);
    padding: 0.1rem 0.45rem;
    align-self: flex-start;
}

/* ---- banners (HOME + per-game). Flat accent-tinted panels with a
       corner-tick; typographic until art exists. ---- */
.banner {
    --game: var(--paper-dim);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: var(--ground-2);
    border: 1px solid var(--rule);
    padding: 1.1rem 1.1rem 1rem;
    text-decoration: none;
    color: var(--paper);
}
.banner::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 2.4rem; height: 3px;
    background: var(--game);
}

.banner-kicker {
    font-family: var(--mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--game);
}

.banner-name {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.banner-sub { color: var(--paper-dim); font-size: 0.88rem; max-width: 36rem; }

.banner-home {
    --game: var(--home);
    margin-bottom: 0.9rem;
    padding: 1.5rem 1.1rem 1.3rem;
    /* accent-tinted, still flat: a wash, not a gradient card */
    background: color-mix(in srgb, var(--home) 10%, var(--ground-2));
}
.banner-home .banner-name { font-size: clamp(1.5rem, 6vw, 2.2rem); }

a.banner:hover { border-color: var(--game); }

/* ---- Ribbon Master strip ---- */
.strip {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.9rem;
    border: 1px solid var(--rule);
    border-left: 3px solid var(--ribbon);
    background: var(--ground-2);
    padding: 0.75rem 1.1rem;
    margin-bottom: 2rem;
    text-decoration: none;
    color: var(--paper);
}
.strip:hover { border-color: var(--ribbon); }

.strip-kicker {
    font-family: var(--mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ribbon);
}

.strip-sub { color: var(--paper-dim); font-size: 0.85rem; flex: 1 1 14rem; }

/* Living Dex: hangs off the HOME banner as its first live piece */
.strip-home {
    margin: -0.9rem 0 0.9rem;
    border-top: 0;
    border-left-color: var(--home);
    background: color-mix(in srgb, var(--home) 5%, var(--ground-2));
}
.strip-home:hover { border-color: var(--home); }
.strip-home .strip-kicker { color: var(--home); }
.strip-go {
    font-family: var(--mono); font-size: 0.68rem;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--paper);
}

/* ---- generation sections ---- */
.gen { border-top: 1px solid var(--rule); padding: 0.7rem 0; }

.gen-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.8rem;
    font-family: var(--mono);
    font-weight: 400;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--paper);
}
.gen:not(.gen-open) .gen-head { color: var(--paper-dim); }

.gen-meta { font-size: 0.68rem; color: var(--paper-dim); letter-spacing: 0.1em; text-align: right; }

.gen-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    padding: 0.9rem 0 0.6rem;
}

.banner-game { padding: 0.85rem 0.95rem 0.75rem; gap: 0.45rem; }
.banner-game .banner-name { font-size: 1.05rem; }
/* unbuilt games are <span>s: same look, muted name, no pointer */
span.banner-game .banner-name { color: var(--paper-dim); }

/* ---- footer ---- */
.foot {
    border-top: 1px solid var(--rule);
    margin-top: 1rem;
    padding-top: 1.4rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--paper-dim);
    letter-spacing: 0.03em;
}

/* ---- wider screens ---- */
@media (min-width: 720px) {
    .gen-grid { grid-template-columns: repeat(3, 1fr); }
    .masthead { padding-top: 3rem; }
}

/* ---- docs/16: slim footer on every page (Your data · Credits) ---- */
.pk-foot { margin-top: 2rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 0.7rem; color: var(--paper-dim); line-height: 1.7; }
.pk-foot a { color: var(--paper); text-decoration-color: var(--rule); text-underline-offset: 2px; }
.pk-foot a:hover { text-decoration-color: var(--paper-dim); }
.pk-foot-legal { opacity: 0.75; }

/* Your data + Credits pages */
.yd-sec, .cr-sec { border-top: 1px solid var(--rule); margin-top: 1.1rem; padding-top: 0.9rem; }
.yd-list { list-style: none; display: grid; gap: 0.35rem; margin-top: 0.5rem; }
.yd-list li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; }
.yd-list a { color: var(--paper); }
.yd-n { font-family: var(--mono); font-size: 0.74rem; color: var(--paper-dim); white-space: nowrap; }
.cr-sec .ld-sources { margin-top: 0.5rem; font-size: 0.85rem; line-height: 1.6; }
.cr-main { border-left: 0; padding-left: 0; list-style: none; display: grid; gap: 0.35rem; }