/* ========================================
   HonchoC64 - Retro Computing Website
   Black background, white menu, slick UI
   ======================================== */

/* Reset & Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg: #000000;
    --bg-dark: #0a0a0a;
    --bg-card: #111111;
    --bg-card-hover: #1a1a1a;
    --text: #ffffff;
    --text-muted: #999999;
    --text-dim: #666666;
    --accent: #00ccff;
    --accent-glow: rgba(0, 204, 255, 0.3);
    --accent-2: #ff6600;
    --accent-3: #00ff88;
    --border: #222222;
    --border-light: #333333;
    --font-display: 'Press Start 2P', monospace;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --nav-height: 70px;
    --container-max: 1200px;
    --transition: 0.3s ease;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-height);
    /* Always reserve the scrollbar's width. Short pages (Contact) have no
       scrollbar, and without this the centred layout sits a few pixels to the
       right of every page that does scroll. */
    scrollbar-gutter: stable;
}

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    /* Sticky footer: on a page whose content is shorter than the window (Contact
       on a tall screen), the footer is pushed down to sit on the bottom edge
       instead of floating with dead space under it. Taller pages are unaffected. */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* sections keep their natural height; only the gap above the footer grows */
body > *:not(.footer) {
    flex-shrink: 0;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

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

a:hover {
    color: #fff;
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* ========================================
   Navigation
   ======================================== */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
}

.nav.scrolled {
    background: rgba(0, 0, 0, 0.95);
}

.nav-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    font-family: var(--font-display);
    font-size: 16px;
    color: #fff;
    letter-spacing: 2px;
    white-space: nowrap;
}

.nav-logo-accent {
    color: var(--accent);
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 8px;
}

.nav-link {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all var(--transition);
    white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    transition: all var(--transition);
    border-radius: 2px;
}

.nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ========================================
   Hero Section
   ======================================== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background: #000000;
}

.hero-scanlines {
    display: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 0 24px;
}

.hero-logo-container {
    margin-bottom: 32px;
}

.hero-logo {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    display: block;
    animation: logoFloat 6s ease-in-out infinite;
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.hero-tagline {
    font-size: 16px;
    color: var(--text-muted);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.hero-tagline .separator {
    color: var(--accent);
    margin: 0 4px;
}

/* badges removed */

.hero-cta {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.scroll-indicator {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    animation: scrollPulse 2s ease-in-out infinite;
}

.scroll-indicator span {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-dim);
}

.scroll-arrow {
    width: 2px;
    height: 24px;
    background: linear-gradient(to bottom, var(--text-dim), transparent);
}

@keyframes scrollPulse {
    0%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); }
    50% { opacity: 0.5; transform: translateX(-50%) translateY(8px); }
}

/* ========================================
   Buttons
   ======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all var(--transition);
    cursor: pointer;
    border: none;
    white-space: nowrap;
}

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

.btn-primary:hover {
    background: #fff;
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 204, 255, 0.3);
}

.btn-outline {
    background: transparent;
    color: #fff;
    border: 1px solid var(--border-light);
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--text-muted);
    color: #fff;
    transform: translateY(-2px);
}

/* ========================================
   About Banner
   ======================================== */
.about-banner {
    padding: 80px 0;
    background: var(--bg-dark);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.about-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    align-items: center;
}

.section-label {
    font-family: var(--font-display);
    font-size: 12px;
    color: var(--accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.about-text p {
    color: var(--text-muted);
    margin-bottom: 16px;
    font-size: 15px;
    line-height: 1.8;
}

.about-text strong {
    color: #fff;
}

.about-stats {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.stat {
    text-align: center;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-card);
}

.stat-number {
    display: block;
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--accent);
    margin-bottom: 8px;
}

.stat-label {
    font-size: 13px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ========================================
   Sections Common
   ======================================== */
.section {
    padding: 100px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 64px;
}

.section-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
    padding: 4px 12px;
    border: 1px solid rgba(0, 204, 255, 0.3);
    border-radius: 4px;
    background: rgba(0, 204, 255, 0.05);
}

.section-title {
    font-family: var(--font-display);
    font-size: 28px;
    color: #fff;
    margin-bottom: 16px;
    letter-spacing: 1px;
}

.section-subtitle {
    font-size: 16px;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

.subsection-title {
    font-family: var(--font-display);
    font-size: 16px;
    color: #fff;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.subsection-desc {
    color: var(--text-muted);
    font-size: 15px;
    margin-bottom: 32px;
}

.subsection-desc a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ========================================
   Public Enemies Section
   ======================================== */
.section-pe {
    background: var(--bg);
    position: relative;
}

.section-pe::before {
    content: '';
    position: absolute;
    inset: 0;
    /* bg-pe-cover.jpg: renamed from bg-pe.jpg when the art was replaced -
       assets are cached immutable for 30 days, so a changed image needs a
       new filename or a bumped ?v=N or browsers keep showing the old one */
    background: url('../img/bg-pe-cover.jpg?v=3') center center / cover no-repeat;
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}

/* Same bg-through treatment as arcades.html: full image width, artwork top
   at the very top, box extended up so the art glows through the page header,
   scrolling with the page. */
.section-pe.bg-through::before {
    top: -440px;
    background-position: top center;
    background-size: 100% auto;
}

/* C64 Scene main page: a column of polaroids of Honcho's own pixel art as the
   bg-through backdrop. The source is a tall strip, so it is sized by width and
   tiled down the page rather than stretched to the section height. */
.section-c64scene {
    background: var(--bg);
    border-top: 1px solid var(--border);
    position: relative;
}

.section-c64scene::before {
    content: '';
    position: absolute;
    inset: 0;
    top: -440px;
    background: url('../img/c64-polaroids.jpg') top center / 820px auto repeat-y;
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}

.section-c64scene > .container {
    position: relative;
    z-index: 1;
}

.section-pe > .container {
    position: relative;
    z-index: 1;
}

.pe-hero {
    text-align: center;
    margin-bottom: 64px;
}

.pe-hero-img {
    max-width: 600px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 0;
    border: none;
}

/* Timeline */
.timeline {
    position: relative;
    max-width: 1080px;   /* wide enough for the comic strips, narrow enough to read */
    margin: 0 auto 80px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 100px;   /* between the year column and the text */
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border-light);
}

.timeline-item {
    display: flex;
    gap: 32px;
    margin-bottom: 48px;
    position: relative;
}

.timeline-marker {
    flex-shrink: 0;
    width: 84px;
    text-align: right;
    position: relative;
}

.timeline-year {
    font-family: var(--font-mono);
    font-size: 17px;
    font-weight: 600;
    color: var(--accent);
    position: relative;
    padding: 4px 0;
}

.timeline-content {
    flex: 1;
    padding-top: 2px;
}

.timeline-content h3 {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 12px;
}

.timeline-content p {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 12px;
}

/* Comic strip under each timeline chapter on public-enemies.html. One row of
   three panels per chapter, split from the full comic page. */
.timeline-comic {
    display: block;
    width: 100%;
    height: auto;
    margin: 20px 0 4px;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: zoom-in;
    transition: border-color var(--transition);
}

.timeline-comic:hover {
    border-color: var(--accent);
}

/* Demos Grid */
.demos-section {
    margin-bottom: 80px;
}

.demos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.demo-card {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: all var(--transition);
}

.demo-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.demo-card-img {
    overflow: hidden;
    background: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo-card-img img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform var(--transition);
}

.demo-card:hover .demo-card-img img {
    transform: scale(1.05);
}

.demo-card-info {
    padding: 16px;
}

.demo-card-info h4 {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 6px;
}

.demo-card-info p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 8px;
}

.demo-platform {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent);
    padding: 2px 8px;
    border: 1px solid rgba(0, 204, 255, 0.3);
    border-radius: 3px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Retro Intro */
.retro-intro-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    padding: 64px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
}

.retro-intro-content p {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 16px;
}

.retro-intro-content strong {
    color: #fff;
}

.retro-intro-img img {
    border-radius: 0;
    border: none;
}

/* ========================================
   C64 Scene Section
   ======================================== */
.section-c64 {
    background: var(--bg-dark);
    border-top: 1px solid var(--border);
}

.c64-bio {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-bottom: 80px;
}

.c64-bio-text p {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 16px;
}

.c64-bio-text strong {
    color: #fff;
}

.c64-groups h3 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 16px;
}

.group-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.group-card {
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color var(--transition);
}

.group-card:hover {
    border-color: var(--accent);
}

.group-card h4 {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
}

.group-role {
    display: inline-block;
    font-size: 12px;
    color: var(--accent);
    margin-right: 12px;
}

.group-period {
    font-size: 12px;
    color: var(--text-dim);
}

/* Productions */
.productions-section {
    margin-bottom: 48px;
}

.productions-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 32px;
}

.production-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 16px 20px;
    border-radius: 8px;
    transition: background var(--transition);
}

.production-card:hover {
    /* translucent rather than --bg-card: over plain black it reads the same,
       but it must not blank out the pixel-art backdrop behind the grid */
    background: rgba(255, 255, 255, 0.07);
}

.prod-year {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-dim);
    width: 50px;
    padding-top: 2px;
}

.prod-info {
    flex: 1;
}

.prod-info h4 {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 4px;
}

.prod-info h4 a {
    color: #fff;
}

.prod-info h4 a:hover {
    color: var(--accent);
}

.prod-group {
    font-size: 13px;
    color: var(--text-muted);
    margin-right: 12px;
}

.prod-role {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent);
    opacity: 0.8;
}

.productions-more {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* ========================================
   Arcades Section
   ======================================== */
.section-arcades {
    background: var(--bg);
    border-top: 1px solid var(--border);
    position: relative;
}

.section-arcades::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../img/bg-arcades.jpg') center center / cover no-repeat;
    opacity: 0.20;
    pointer-events: none;
    z-index: 0;
}

/* bg-through: the section art keeps its normal scrolling behaviour, but the
   box is extended upward so the art also glows through the page header above
   (the header's dark background is painted over by the later, positioned
   section), and it is sized to the full image width with the artwork's head
   at the very top - no horizontal crop. Used on arcades.html. */
.section-arcades.bg-through::before {
    top: -440px;
    background: url('../img/bg-arcades.jpg') top center / 100% auto no-repeat;
}

.section-arcades > .container {
    position: relative;
    z-index: 1;
}

.arcade-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 80px;
}

/* A portrait photo in a half-and-half feature runs very tall and leaves the
   text column looking empty. This narrows the picture and gives the words the
   extra room. Collapses to one column on mobile with everything else. */
.feature-narrow-img {
    grid-template-columns: 0.68fr 1.32fr;
}

.arcade-feature-reverse {
    direction: rtl;
}

.arcade-feature-reverse > * {
    direction: ltr;
}

.arcade-feature-text h3 {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
}

.arcade-feature-text p {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 16px;
}

.arcade-feature-img img {
    border-radius: 0;
    border: none;
}

/* Commando Gallery */
.commando-gallery {
    margin-bottom: 48px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.gallery-boards {
    margin-top: 32px;
}

/* A gallery introduced by a prose chapter: .commando-detail already ends with
   32px, which is the gap mojo.html leaves between a chapter and its photo row.
   Without this the two margins stack and the pictures drift away from the
   words that introduce them. */
.commando-detail + .gallery-boards {
    margin-top: 0;
}

.gallery-item {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    border: none;
    background: var(--bg-card);
    transition: all var(--transition);
    cursor: pointer;
}

.gallery-item:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.gallery-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform var(--transition);
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-caption {
    display: block;
    padding: 10px 14px;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-card);
}

/* Prose runs the full container width on every page, so the words line up with
   the feature blocks, galleries, photo rows and screenshots beside them rather
   than sitting in a narrower column inside them. Mojo established this and it
   applies everywhere: there is one measure on this site and no exceptions. */
.commando-detail {
    max-width: none;
    margin: 0 0 48px;
}

.commando-detail p {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 16px;
}

/* A chapter heading inside a prose block. This lived twice, scoped to
   .section-mojo and .section-kfm, which left the Commando story - the page the
   component was named after - styling its headings inline. One rule, every
   story page. */
/* .prose-title is the same heading outside a .commando-detail block, for the
   two places on the site where a heading sits directly on body paragraphs.
   The display font labels a component or opens a page; it never introduces a
   paragraph. */
.commando-detail h3,
.prose-title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 40px 0 16px;
}

.commando-detail h3:first-child,
.commando-detail .feature-kicker + h3,
.prose-title:first-child {
    margin-top: 0;
}

/* The gap between two prose blocks that are separate movements rather than
   consecutive paragraphs. Was three copies of style="margin-top: 48px". */
.detail-gap {
    margin-top: 48px;
}

.commando-video {
    text-align: center;
    margin-top: 48px;
}

.commando-video h4 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
}

.commando-video video {
    width: 100%;
    max-width: 820px;   /* solo media, see the block above .game-shot */
    border-radius: 0;
    border: none;
}

/* ========================================
   Contact Section
   ======================================== */
.section-contact {
    /* --bg, like every other section. It used to be --bg-dark, the same colour
       as .page-header, so the title band and the section read as one flat tone
       instead of the lighter-header-over-darker-body step the site uses. */
    background: var(--bg);
    border-top: 1px solid var(--border);
    position: relative;
}

/* The HONCHO graffiti as the page's backdrop, same treatment as the Last Ninja
   art on C64 Games: full-screen, fixed so it stays put while you scroll.
   cover, so the art fills the height and gets cropped at the sides rather than
   letterboxed. The 2:1 source is square enough that the wall takes the crop. */
.section-contact::before {
    content: '';
    position: fixed;
    /* Full viewport, running behind the menu and the footer. Confining it to the
       band between them was tried and abandoned: the menu scrolls away, so the
       band is not a fixed thing to fit into, and any fit left either black bars
       at the sides or a visible seam. */
    inset: 0;
    background: url('../img/honcho-graffiti.jpg?v=4') center center / cover no-repeat;
    opacity: 0.16;
    pointer-events: none;
    z-index: 0;
}

.section-contact > .container {
    position: relative;
    z-index: 1;
}

.contact-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
}

.contact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 32px 20px;
    /* translucent, not --bg-card: the graffiti behind has to show through */
    background: rgba(12, 12, 12, 0.55);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: all var(--transition);
    color: var(--text-muted);
}

.contact-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    color: #fff;
}

.contact-card svg {
    color: var(--accent);
}

.contact-card span {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

.contact-card small {
    font-size: 12px;
    color: var(--text-dim);
}

/* ========================================
   The Mojo Journey (mojo.html)
   Same treatment as the C64 Scene page: the Mojo pixel art as the backdrop,
   absolutely positioned so it scrolls with the page, and extended upward so it
   glows through the title header above.
   ======================================== */
.section-mojo {
    background: var(--bg);
    border-top: 1px solid var(--border);
    position: relative;
}

.section-mojo::before {
    content: '';
    position: absolute;
    inset: 0;
    top: -440px;
    background: url('../img/mojo.png?v=2') top center / 100% auto no-repeat;
    image-rendering: pixelated;
    /* A little lower than the C64 Scene page's 0.15: this page is long-form
       prose and screenshots rather than cards. */
    opacity: 0.10;
    pointer-events: none;
    z-index: 0;
}

.section-mojo > .container {
    position: relative;
    z-index: 1;
}

/* C64 screenshots are 384x272, so scale them up hard-edged rather than blurry */
.mojo-shot {
    width: 100%;
    height: auto;
    image-rendering: pixelated;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: zoom-in;
    transition: border-color var(--transition);
}

.mojo-shot:hover {
    border-color: var(--accent);
}

/* Prose blocks line up with the two-column feature blocks rather than sitting
   narrower and centred inside them, which read as wonky. */
/* The three Copenhagen photos, side by side. Mixed portrait and landscape
   originals, so they are cropped to a common ratio to keep the row tidy. */
.mojo-trip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0 0 64px;
}

.mojo-trip figure {
    margin: 0;
}

.mojo-trip img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: zoom-in;
    transition: border-color var(--transition);
}

.mojo-trip img:hover {
    border-color: var(--accent);
}

.mojo-trip figcaption {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-dim);
}

@media (max-width: 768px) {
    .mojo-trip {
        grid-template-columns: 1fr;
    }
}

.mojo-crew {
    max-width: 900px;
    margin: 0 auto 64px;
    text-align: center;
}

.mojo-crew img {
    width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: zoom-in;
    transition: border-color var(--transition);
}

.mojo-crew img:hover {
    border-color: var(--accent);
}

.mojo-crew .gallery-caption {
    display: block;
    position: static;
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-dim);
    background: none;
    padding: 0;
}

.mojo-links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 48px 0 8px;
}

/* ========================================
   Kong-Fu Masters (kong-fu-masters.html)
   Same shape as the Mojo page: the game's own title art as a scrolling
   backdrop, and native-resolution C64 screenshots scaled hard-edged.
   ======================================== */
.section-kfm {
    background: var(--bg);
    border-top: 1px solid var(--border);
    position: relative;
}

.section-kfm::before {
    content: '';
    position: absolute;
    inset: 0;
    top: -440px;
    /* Lobo's key art of the three fighters. Not pixel art, so no pixelated
       rendering, and sized by width so it sits behind the top of the page in
       the same way the Arcades and Public Enemies backdrops do. */
    background: url('../img/kfm/key-art.jpg?v=2') top center / 100% auto no-repeat;
    opacity: 0.20;
    pointer-events: none;
    z-index: 0;
}

.section-kfm > .container {
    position: relative;
    z-index: 1;
}

/* ========================================
   Game Development (game-development.html)
   Section overview, so the fixed full-screen backdrop of C64 Games and
   Contact. The art is a screenshot of 6502 source in a dark editor: mostly
   bright text on grey, which reads far louder than a photo at the same
   opacity, so it sits below the photo backdrops at .10 and works as a dim
   coding texture rather than something you try to read. The JPG is cropped
   to the code itself (no title, menu, tab or status bars, no minimap), so
   any cover crop, portrait phone included, shows only code.
   ======================================== */
.section-gamedev {
    background: var(--bg);
    border-top: 1px solid var(--border);
    position: relative;
}

.section-gamedev::before {
    content: '';
    position: fixed;
    inset: 0;
    background: url('../img/gamedev/bg-code.jpg') center center / cover no-repeat;
    opacity: 0.10;
    pointer-events: none;
    z-index: 0;
}

.section-gamedev > .container {
    position: relative;
    z-index: 1;
}

/* ========================================
   Wonder Boy (wonder-boy.html)
   Story page, so the scrolling backdrop of .section-kfm reaching up behind
   the header. The cover art is bright, saturated cartoon colour (blue sky,
   yellow logo), so it runs lower than the Kong-Fu key art at .13. Sized by
   width from the top: the sky and logo sit behind the page header and the
   boy and the jungle land behind the first screens of the story.
   ======================================== */
.section-wonderboy {
    background: var(--bg);
    border-top: 1px solid var(--border);
    position: relative;
}

.section-wonderboy::before {
    content: '';
    position: absolute;
    inset: 0;
    top: -440px;
    background: url('../img/wonderboy/bg-wonder-boy.jpg') top center / 100% auto no-repeat;
    opacity: 0.13;
    pointer-events: none;
    z-index: 0;
}

.section-wonderboy > .container {
    position: relative;
    z-index: 1;
}

/* ========================================
   Populous (populous.html)
   Story page, same scrolling backdrop as .section-wonderboy. The box art is
   saturated (yellow-green island, orange lava), so it sits at the low end
   like the Wonder Boy cover: the logo slab behind the page header, the
   island behind the first chapters.
   ======================================== */
.section-populous {
    background: var(--bg);
    border-top: 1px solid var(--border);
    position: relative;
}

.section-populous::before {
    content: '';
    position: absolute;
    inset: 0;
    top: -440px;
    background: url('../img/populous/bg-populous.jpg') top center / 100% auto no-repeat;
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
}

.section-populous > .container {
    position: relative;
    z-index: 1;
}

.kfm-shot {
    width: 100%;
    height: auto;
    image-rendering: pixelated;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: zoom-in;
    transition: border-color var(--transition);
}

.kfm-shot:hover {
    border-color: var(--accent);
}

/* desktop tool captures shown downscaled: smooth, not nearest-neighbour */
.kfm-shot.shot-smooth {
    image-rendering: auto;
}

.kfm-pair {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 0 0 64px;
}

.kfm-pair figure {
    margin: 0;
}

/* the video still lives in a feature block like the screenshots, so it only
   needs the frame and hover treatment, not its own width */
.kfm-still {
    width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: 4px;
    transition: border-color var(--transition);
}

.kfm-still:hover {
    border-color: var(--accent);
}

.kfm-caption,
.kfm-pair figcaption {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-dim);
}

@media (max-width: 768px) {
    .kfm-pair {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Footer
   ======================================== */
.footer {
    padding: 40px 0;
    border-top: 1px solid var(--border);
    margin-top: auto;   /* takes up the slack, pinning the footer to the bottom */
}

/* The footer has no background of its own, so on an ordinary page the black
   body shows through it. Pages with a full-screen fixed backdrop (Contact, the
   C64 Games family) would otherwise have the art running through the footer,
   so give it a solid black fill there. position + z-index are required: the
   backdrop is a positioned layer and would paint over a plain background. */
.section-contact ~ .footer,
.section-c64games ~ .footer,
.section-gamedev ~ .footer {
    position: relative;
    z-index: 1;
    background: var(--bg);
}

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

.footer-logo {
    font-family: var(--font-display);
    font-size: 12px;
    color: #fff;
    letter-spacing: 2px;
}

.footer-inner p {
    font-size: 13px;
    color: var(--text-dim);
}

.footer-links {
    display: flex;
    gap: 20px;
}

.footer-links a {
    font-size: 13px;
    color: var(--text-muted);
}

.footer-links a:hover {
    color: #fff;
}

/* ========================================
   Lightbox
   ======================================== */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.lightbox.active {
    opacity: 1;
    pointer-events: all;
}

.lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    transition: opacity 0.18s ease;
}

/* While the next picture decodes, hide the one still in the <img> rather than
   letting it flash up, and spin a loader in its place. */
.lightbox.is-loading img {
    opacity: 0;
    transition: none;   /* hide instantly; only the reveal fades, or the old
                           picture stays visible for the whole fade-out */
}

.lightbox.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lightboxSpin 0.8s linear infinite;
}

@keyframes lightboxSpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .lightbox.is-loading::after { animation: none; }
    .lightbox img { transition: none; }
}

.lightbox-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition);
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 1024px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-stats {
        flex-direction: row;
        justify-content: center;
    }

    .c64-bio {
        grid-template-columns: 1fr;
    }

    .retro-intro-section {
        grid-template-columns: 1fr;
        padding: 40px;
    }
}

@media (max-width: 768px) {
    :root {
        --nav-height: 60px;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: rgba(0, 0, 0, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        padding: 100px 32px 32px;
        gap: 4px;
        transition: right 0.4s ease;
        border-left: 1px solid var(--border);
    }

    .nav-links.open {
        right: 0;
    }

    .nav-link {
        font-size: 16px;
        padding: 12px 16px;
    }

    .hero-logo {
        max-width: 320px;
    }

    .hero-tagline {
        font-size: 12px;
        letter-spacing: 2px;
    }

    .section-title {
        font-size: 20px;
    }

    .section {
        padding: 64px 0;
    }

    .arcade-feature,
    .arcade-feature-reverse {
        grid-template-columns: 1fr;
        direction: ltr;
    }

    .arcade-feature-reverse > * {
        direction: ltr;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .timeline::before {
        left: 66px;
    }

    .timeline-marker {
        width: 58px;
    }

    .timeline-year {
        font-size: 14px;
    }

    .timeline-item {
        gap: 16px;
    }

    .demos-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-stats {
        flex-direction: column;
    }

    .contact-links {
        grid-template-columns: 1fr 1fr;
    }

    .footer-inner {
        flex-direction: column;
        text-align: center;
    }

    .retro-intro-section {
        padding: 32px 24px;
    }

    .commando-video video {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }

    .hero-logo {
        max-width: 260px;
    }

    .hero-cta {
        flex-direction: column;
        align-items: center;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }

    .demos-grid {
        grid-template-columns: 1fr;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .contact-links {
        grid-template-columns: 1fr;
    }

    .section-title {
        font-size: 18px;
    }

    .subsection-title {
        font-size: 14px;
    }

    .production-card {
        flex-direction: column;
        gap: 4px;
        padding: 12px 16px;
    }

    .prod-year {
        width: auto;
    }
}

/* ========================================
   Animations
   ======================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   Page Header (subpages)
   ======================================== */
.page-header {
    padding: 200px 0 60px;
    text-align: center;
    background: var(--bg-dark);
    border-bottom: 1px solid var(--border);
}

.page-title {
    font-family: var(--font-display);
    font-size: 32px;
    color: #fff;
    margin: 16px 0 12px;
    letter-spacing: 1px;
}

.page-subtitle {
    font-size: 16px;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* ========================================
   Section Cards (Home page)
   ======================================== */
.section-cards {
    background: var(--bg-dark);
    border-top: 1px solid var(--border);
}

/* Three per row, and a short final row centres under them rather than sitting
   off to one side. Flex rather than grid precisely so the last row can centre. */
.cards-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

.cards-grid > .card-link {
    flex: 0 1 calc(33.333% - 16px);
    display: flex;
}

@media (max-width: 1024px) {
    .cards-grid > .card-link {
        flex-basis: calc(50% - 12px);
    }
}

.card-link {
    text-decoration: none;
    color: inherit;
}

/* Cards sit in a flex row, so each one fills the height of its row and the
   bodies line up. The image panel is a fixed shape and the artwork is fitted
   inside it rather than cropped, so nothing on any card gets cut off. */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: all var(--transition);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.card-img {
    overflow: hidden;
    background: #0a0a0a;
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--transition);
}

.card:hover .card-img img {
    transform: scale(1.03);
}

.card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.card-body h3 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}

.card-body p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 12px;
}

.card-action {
    font-size: 13px;
    color: var(--accent);
    font-weight: 500;
    margin-top: auto;   /* the call to action sits on the bottom edge of every card */
    padding-top: 12px;
}

/* ========================================
   C64 Bio Sidebar
   ======================================== */
.c64-bio-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.group-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.group-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.group-item:last-child {
    border-bottom: none;
}

.group-name {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin-right: 12px;
}

.c64-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 12px;
}

/* ========================================
   Production Type & Count
   ======================================== */
.prod-type {
    font-size: 12px;
    color: var(--text-dim);
    margin-right: 12px;
}

.prod-count {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 400;
}

/* ========================================
   Arcade Story Elements (arcades.html)
   ======================================== */
.feature-kicker {
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

/* Story-page backgrounds. Commando gets its poster art, pushed down so the
   game logo clears the page heading; GnG keeps the big section artwork
   (bg-arcades.jpg) it inherits from .section-arcades. */
/* Sized by width like the arcades art, not cover: with bg-through extending the
   box 440px upward, cover would scale the poster up until only a couple of
   letters filled the screen. */
.section-arcades.story-bg-commando::before {
    background: url('../img/commando/commando_poster.jpg') top center / 100% auto no-repeat;
    opacity: 0.16;
}

.section-arcades.story-bg-commando {
    padding-top: 140px;
}

/* Attract-mode menu: arcade "game select" style project links.
   Reuse this for every project's story/schematics links. */
.attract-menu {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.attract-menu a,
.attract-menu .locked {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 1px;
    color: #fff;
    text-decoration: none;
    transition: all var(--transition);
}

.attract-menu a:hover {
    color: var(--accent);
    text-shadow: 0 0 14px var(--accent-glow);
}

.attract-cursor {
    color: var(--accent);
    font-size: 11px;
    animation: attractBlink 1.1s steps(2, start) infinite;
}

.attract-menu a:hover .attract-cursor {
    animation: none;
}

.attract-menu .locked {
    color: var(--text-dim);
}

.attract-menu .locked .attract-cursor {
    color: var(--text-dim);
    animation: none;
}

.attract-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid var(--border-light);
    color: var(--text-dim);
}

.attract-tag.live {
    color: var(--accent-3);
    border-color: rgba(0, 255, 136, 0.4);
    background: rgba(0, 255, 136, 0.07);
}

/* in progress: the sitewide orange, the counterpart of .live's green */
.attract-tag.wip {
    color: var(--accent-2);
    border-color: rgba(255, 102, 0, 0.4);
    background: rgba(255, 102, 0, 0.07);
}

@keyframes attractBlink {
    50% { opacity: 0; }
}

/* Story pages */
.story-wip {
    font-style: italic;
    color: var(--text-dim);
}

.story-backlink {
    margin-top: 48px;
    font-size: 14px;
}

.project-banner-locked {
    opacity: 0.65;
}

.project-banner-locked:hover {
    border-color: rgba(0, 204, 255, 0.3);
    box-shadow: none;
    transform: none;
}

.project-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 56px;
    padding: 28px 32px;
    background: linear-gradient(135deg, rgba(0, 204, 255, 0.08), rgba(0, 255, 136, 0.05));
    border: 1px solid rgba(0, 204, 255, 0.3);
    border-radius: 14px;
    transition: all var(--transition);
}

.project-banner:hover {
    border-color: var(--accent);
    box-shadow: 0 8px 28px var(--accent-glow);
    transform: translateY(-2px);
}

.project-banner h4 {
    font-family: var(--font-display);
    font-size: 14px;
    color: #fff;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.project-banner p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

.project-banner-cta {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--accent);
    white-space: nowrap;
}

@media (max-width: 600px) {
    .project-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px;
    }

    .attract-menu a,
    .attract-menu .locked {
        font-size: 11px;
        gap: 10px;
    }

    .attract-tag {
        font-size: 9px;
        padding: 2px 6px;
    }
}

/* ========================================
   Responsive: cards grid
   ======================================== */
@media (max-width: 768px) {
    .cards-grid > .card-link {
        flex-basis: 100%;
    }

    .page-title {
        font-size: 24px;
    }

    .page-header {
        padding: 140px 0 40px;
    }
}

@media (max-width: 480px) {
    .page-title {
        font-size: 20px;
    }
}

/* C64 photo carousel (index.html, About section). 4:3 crossfade gallery fed
   by img/c64/gallery-*.jpg; behaviour in js/main.js. Dots + arrows, 5s
   auto-advance, paused on hover, disabled for prefers-reduced-motion. */
.c64-carousel { max-width: 820px; margin: 56px auto 0; }
.c64-carousel-frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden;
    border: 1px solid #222; background: var(--bg-dark); }
.c64-slide { position: absolute; inset: 0; margin: 0; opacity: 0;
    transition: opacity .8s ease; }
.c64-slide.is-active { opacity: 1; }
.c64-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c64-slide figcaption { position: absolute; left: 0; right: 0; bottom: 0;
    padding: 30px 16px 13px; font-family: var(--font-mono); font-size: 15px;
    line-height: 1.5; color: #fff;
    background: linear-gradient(transparent, rgba(0,0,0,.78)); }
.c64-carousel-btn { position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border: 1px solid #333; cursor: pointer;
    background: rgba(0,0,0,.5); color: #fff; font-size: 22px; line-height: 1;
    transition: color .2s, border-color .2s; }
.c64-carousel-btn:hover { color: var(--accent); border-color: var(--accent); }
.c64-carousel-btn.prev { left: 12px; }
.c64-carousel-btn.next { right: 12px; }
.c64-carousel-dots { text-align: center; margin-top: 14px; }
.c64-carousel-dots button { width: 10px; height: 10px; margin: 0 5px; padding: 0;
    border: 1px solid #444; background: transparent; cursor: pointer;
    transition: background .2s, border-color .2s; }
.c64-carousel-dots button.is-active { background: var(--accent);
    border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .c64-slide { transition: none; }
}

/* Compo trophies on production cards (c64.html). Generated by
   scripts/gen_c64.py from CSDb achievements; podium places only.
   Gold = 1st, silver = 2nd, bronze = 3rd. Symbol #trophySym in c64.html. */
.prod-trophy { width: 16px; height: 16px;
    vertical-align: -2px; display: inline-block; }
.prod-award { margin-left: 8px; white-space: nowrap; }
.prod-award .prod-place { font-family: var(--font-mono); font-size: 12px;
    margin-right: 4px; color: inherit; }
.trophy-gold { color: #f5c542; }
.trophy-silver { color: #c3cbd6; }
.trophy-bronze { color: #cd7f32; }
.trophy-gold .prod-trophy { filter: drop-shadow(0 0 3px rgba(245,197,66,.55)); }
.trophy-silver .prod-trophy { filter: drop-shadow(0 0 3px rgba(195,203,214,.5)); }
.trophy-bronze .prod-trophy { filter: drop-shadow(0 0 3px rgba(205,127,50,.5)); }

/* Group names in the c64 sidebar link to their CSDb pages */
.group-name a { color: inherit; text-decoration: none;
    transition: color .2s; }
.group-name a:hover { color: var(--accent); }

/* Compo filter chips above the productions grid (c64.html) */
.prod-filters { display: flex; flex-wrap: wrap; align-items: center;
    gap: 10px; margin: 0 0 22px; }
.prod-filter { font-family: var(--font-mono); font-size: 13px;
    padding: 4px 8px; background: transparent; border: none;
    color: var(--text-muted); cursor: pointer; transition: color .2s; }
.prod-filter .prod-trophy { margin-right: 6px; }
.prod-filter.trophy-gold { color: #f5c542; }
.prod-filter.trophy-silver { color: #c3cbd6; }
.prod-filter.trophy-bronze { color: #cd7f32; }
.prod-filter:not(.is-on) { color: #454545; }
.prod-filter:not(.is-on) .prod-trophy { filter: none; }
.prod-filter:hover { text-decoration: underline; }
.filter-hint { font-family: var(--font-mono); font-size: 11px;
    color: var(--text-dim); }
.production-card.pf-hidden { display: none; }

/* Filtering the productions grid animates via the View Transitions API:
   cards fade out/in and survivors slide to their new slots. Browsers
   without support (or reduced-motion users) fall back to instant. */
::view-transition-group(*) { animation-duration: .28s; }
::view-transition-old(*), ::view-transition-new(*) { animation-duration: .22s; }

/* ========================================
   C64 Games (c64-games.html + games/*.html)
   Generated by scripts/gen_c64games.py - the sub-home carries the intro,
   the clickable release-order carousel (same .c64-carousel component as the
   home page) and the two-column game list; every game page reuses the same
   Last Ninja background so the whole section feels like one place.
   ======================================== */
.section-c64games {
    background: var(--bg);
    border-top: 1px solid var(--border);
    position: relative;
}

.section-c64games::before {
    content: '';
    position: fixed;         /* full-screen art, stays put while you scroll */
    inset: 0;
    background: url('../img/c64games/bg-last-ninja.jpg?v=2') center top / cover no-repeat;
    opacity: 0.16;
    pointer-events: none;
    z-index: 0;
}

.section-c64games > .container {
    position: relative;
    z-index: 1;
}

/* every carousel slide links to its game page */
.c64-slide > a {
    display: block;
    position: absolute;
    inset: 0;
    color: inherit;
    text-decoration: none;
}

/* two-column, release-ordered game list under the carousel */
.game-list {
    max-width: 820px;
    margin: 40px auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
}

.game-list a {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 9px 6px;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
}

.game-list a:hover {
    background: rgba(255, 255, 255, 0.05);
}

.gl-year {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--accent);
    flex-shrink: 0;
}

.gl-title {
    color: var(--text-muted);
    font-size: 15px;
    transition: color var(--transition);
}

.game-list a:hover .gl-title {
    color: #fff;
}

/* game pages: mono year+publisher under the title, screenshot below the story */
.game-sub {
    font-family: var(--font-mono);
    color: var(--accent);
    letter-spacing: 1px;
}

/* SOLO MEDIA: a picture or a video standing on its own in the container,
   rather than sized by a grid column. One width for every one of them, and it
   is the width the C64 Games carousel already uses, so a game screenshot is
   the same size on the section's front page and on the game's own page.

   Do not add a sixth value here. This idea has had five: 560 for the two
   title screens, 720 then 1152 then 560 for the game screenshot, 800 for the
   video, 820 for the carousel. check_style.py fails if they diverge again. */
.mojo-hero,
.kfm-hero,
.game-shot {
    max-width: 820px;
    margin: 0 auto 48px;
}

.game-shot {
    margin: 40px auto 0;
}

.game-shot img {
    width: 100%;
    display: block;
    border: 1px solid var(--border);
    background: var(--bg-dark);
    image-rendering: pixelated;   /* C64 pixels deserve hard edges */
}

.game-shot figcaption {
    padding: 10px 2px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-dim);
}

/* Its own width, rather than borrowing one by wearing .commando-detail. */
.game-nav {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 48px 0 0;
    font-size: 14px;
}

@media (max-width: 600px) {
    .game-list {
        grid-template-columns: 1fr;
    }
}