/* ============================================================
   NES MODE — activated via konami code (see konami.js)
   NES (US) 1986 palette. All styles scoped to body.nes.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body.nes {
    /* NES (US) palette — grey console, cream cards, red accents */
    --fc-bg: #8C8C8C;         /* console dark grey */
    --fc-surface: #C0C0C0;    /* lighter grey face */
    --fc-cream: #E8E2D4;      /* cartridge label cream */
    --fc-red: #D13030;        /* NES logo red */
    --fc-red-dark: #8A1010;
    --fc-ink: #0D0D0D;
    --fc-blue: #5C94FC;
    --fc-green: #00A800;
    --fc-gold: #FCC048;
    --fc-shadow: 4px 4px 0 #0D0D0D;

    /* swap tokens on common vars so page styles inherit */
    --bg: var(--fc-bg) !important;
    --background: var(--fc-bg) !important;
    --surface: var(--fc-cream) !important;
    --surface-alt: #E8DBC3 !important;
    --card: var(--fc-cream) !important;
    --paper: var(--fc-cream) !important;
    --paper-deep: #E8DBC3 !important;
    --text: var(--fc-ink) !important;
    --ink: var(--fc-ink) !important;
    --text-dim: #5C3B3B !important;
    --text-muted: #5C3B3B !important;
    --muted: #5C3B3B !important;
    --primary: var(--fc-red) !important;
    --accent: var(--fc-red) !important;
    --secondary: var(--fc-red-dark) !important;
    --pink: var(--fc-red) !important;
    --pink-deep: var(--fc-red-dark) !important;
    --cyan: var(--fc-blue) !important;
    --cyan-deep: #2B5CBB !important;
    --red: var(--fc-red) !important;
    --border: var(--fc-ink) !important;
    --rule: var(--fc-ink) !important;

    background: var(--fc-bg) !important;
    color: var(--fc-ink) !important;
    font-family: 'Press Start 2P', ui-monospace, Menlo, monospace !important;
    font-size: 11px !important;
    line-height: 1.8 !important;
    letter-spacing: 0 !important;
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><rect x='0' y='0' width='2' height='2' fill='black'/><rect x='0' y='2' width='2' height='2' fill='white'/><rect x='2' y='2' width='2' height='2' fill='black'/><rect x='0' y='4' width='2' height='2' fill='white'/><rect x='2' y='4' width='2' height='2' fill='white'/><rect x='4' y='4' width='2' height='2' fill='black'/><rect x='0' y='6' width='2' height='2' fill='white'/><rect x='2' y='6' width='2' height='2' fill='white'/><rect x='4' y='6' width='2' height='2' fill='white'/><rect x='6' y='6' width='2' height='2' fill='black'/><rect x='0' y='8' width='2' height='2' fill='white'/><rect x='2' y='8' width='2' height='2' fill='white'/><rect x='4' y='8' width='2' height='2' fill='white'/><rect x='6' y='8' width='2' height='2' fill='white'/><rect x='8' y='8' width='2' height='2' fill='black'/><rect x='0' y='10' width='2' height='2' fill='white'/><rect x='2' y='10' width='2' height='2' fill='white'/><rect x='4' y='10' width='2' height='2' fill='white'/><rect x='6' y='10' width='2' height='2' fill='black'/><rect x='0' y='12' width='2' height='2' fill='white'/><rect x='2' y='12' width='2' height='2' fill='black'/><rect x='4' y='12' width='2' height='2' fill='white'/><rect x='6' y='12' width='2' height='2' fill='black'/><rect x='0' y='14' width='2' height='2' fill='black'/><rect x='2' y='14' width='2' height='2' fill='black'/><rect x='6' y='14' width='2' height='2' fill='black'/></svg>") 0 0, auto !important;
}

:root[data-theme="dark"] body.nes {
    --bg: #0D1A33 !important;
    --background: #0D1A33 !important;
    --text: var(--fc-cream) !important;
    --ink: var(--fc-cream) !important;
    background: #0D1A33 !important;
}

/* ============================================================
   FAMICOM (JP) palette override — toggled via the JP/US chrome
   button. Uses cream body, burgundy accents, gold trim. Only
   the colour tokens shift; layout/structure stays identical.
   ============================================================ */
body.nes.famicom {
    --fc-bg: #E8DEB5;         /* warm cream console body */
    --fc-surface: #D9CCA0;
    --fc-cream: #F5EAC8;      /* lighter cartridge cream */
    --fc-red: #7C1A1A;        /* Famicom burgundy */
    --fc-red-dark: #4A0808;
    --fc-gold: #E8B340;       /* warmer gold trim */
}
body.nes.famicom {
    background-color: var(--fc-bg) !important;
    background-image: linear-gradient(
        to bottom,
        var(--fc-bg) 0%,
        var(--fc-bg) 62%,
        #D4C28F 62%,
        #D4C28F 64%,
        var(--fc-bg) 64%,
        var(--fc-bg) 100%
    ) !important;
}
:root[data-theme="dark"] body.nes.famicom {
    --bg: #1A0F0D !important;
    --background: #1A0F0D !important;
    --text: var(--fc-cream) !important;
    --ink: var(--fc-cream) !important;
    background: #1A0F0D !important;
}

/* Famicom LIGHT — bg is cream, so text on bg must be dark instead of cream.
   The base body.nes rule paints these elements with var(--fc-cream); here we
   retarget them to ink/burgundy for legible contrast against the cream bg. */
:root[data-theme="light"] body.nes.famicom .hero p,
:root[data-theme="light"] body.nes.famicom .hero-subtitle,
:root[data-theme="light"] body.nes.famicom .hero-description,
:root[data-theme="light"] body.nes.famicom .hero-kaomoji,
:root[data-theme="light"] body.nes.famicom .section-eyebrow,
:root[data-theme="light"] body.nes.famicom .section-kaomoji,
:root[data-theme="light"] body.nes.famicom .see-all,
:root[data-theme="light"] body.nes.famicom footer,
:root[data-theme="light"] body.nes.famicom footer *,
:root[data-theme="light"] body.nes.famicom .footer-kaomoji,
:root[data-theme="light"] body.nes.famicom .eyebrow,
:root[data-theme="light"] body.nes.famicom .page-head p,
:root[data-theme="light"] body.nes.famicom .page-head .eyebrow {
    color: var(--fc-ink) !important;
}

:root[data-theme="light"] body.nes.famicom .hero h1,
:root[data-theme="light"] body.nes.famicom .section-head .section-title,
:root[data-theme="light"] body.nes.famicom .page-head h1 {
    color: var(--fc-red) !important;
    text-shadow: 2px 2px 0 var(--fc-gold) !important;
}

/* Page flow is transparent so the grey console shows through.
   Text on grey uses cream so it reads clearly. */
body.nes .hero p,
body.nes .hero-subtitle,
body.nes .hero-description,
body.nes .hero-kaomoji,
body.nes .section-eyebrow,
body.nes .section-kaomoji,
body.nes .see-all,
body.nes footer,
body.nes footer *,
body.nes .footer-kaomoji,
body.nes .eyebrow,
body.nes .page-head p,
body.nes .page-head .eyebrow {
    color: var(--fc-cream) !important;
}

/* Big titles on the grey background — cream with clean shadow */
body.nes .hero h1,
body.nes .section-head .section-title,
body.nes .page-head h1 {
    color: var(--fc-cream) !important;
    text-shadow: 2px 2px 0 var(--fc-ink) !important;
}

/* keep headings red-on-cream ONLY when inside a card */
body.nes .link-card h1, body.nes .link-card h2, body.nes .link-card h3,
body.nes .project h3, body.nes .project p, body.nes .project span,
body.nes .card, body.nes .card *,
body.nes .about-card, body.nes .about-card *,
body.nes .feat *, body.nes .preview *,
body.nes nav, body.nes nav * {
    color: var(--fc-ink) !important;
}
body.nes .link-card .link-card-title,
body.nes .project .project-name,
body.nes .card h1, body.nes .card h2, body.nes .card h3,
body.nes .about-card h1, body.nes .about-card h2, body.nes .about-card h3 {
    color: var(--fc-red) !important;
}


body.nes .section,
body.nes header.hero,
body.nes header:not(nav),
body.nes footer,
body.nes .hero,
body.nes .container,
body.nes .page,
body.nes .masthead {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
}

/* Tile-cards: cream with black border + offset shadow */
body.nes .link-card,
body.nes .project,
body.nes .card,
body.nes .feat,
body.nes .scan,
body.nes .check,
body.nes .preview,
body.nes .preview-stage,
body.nes .about-card {
    background: var(--fc-cream) !important;
    background-image: none !important;
    background-color: var(--fc-cream) !important;
}

/* nav bar stays cream strip on top */
body.nes nav {
    background: var(--fc-cream) !important;
    border-bottom: 3px solid var(--fc-ink) !important;
}

/* cute.js features are paused via attribute-strip in konami.js,
   but belt-and-braces hide any stragglers */
body.nes .cute-ambient,
body.nes .cute-heart,
body.nes .cute-fab,
body.nes .cute-panel,
body.nes .cute-status,
body.nes .leaf {
    display: none !important;
}

/* pause any animations still running on elements */
body.nes .hero-kaomoji,
body.nes .footer-kaomoji,
body.nes .hero-icon {
    animation: none !important;
}

/* NES-style badges for project-tag pills */
body.nes .project-tag,
body.nes .section-kaomoji,
body.nes .project-swatch {
    background: var(--fc-red) !important;
    color: var(--fc-cream) !important;
    border: 2px solid var(--fc-ink) !important;
    box-shadow: 2px 2px 0 var(--fc-ink) !important;
}
body.nes .project-swatch svg { stroke: var(--fc-cream) !important; }
body.nes .project-swatch circle { fill: var(--fc-cream) !important; }

/* swatches / pastel accents become flat red tiles */
body.nes .swatch-pink,
body.nes .swatch-peach,
body.nes .swatch-lavender,
body.nes .swatch-warm {
    background: var(--fc-red) !important;
    color: var(--fc-cream) !important;
}

/* NES console background — grey plastic with subtle texture band */
body.nes {
    background-color: var(--fc-bg) !important;
    background-image: linear-gradient(
        to bottom,
        var(--fc-bg) 0%,
        var(--fc-bg) 62%,
        #7A7A7A 62%,
        #7A7A7A 64%,
        var(--fc-bg) 64%,
        var(--fc-bg) 100%
    ) !important;
}

/* kill radii + pseudo patterns from each theme */
body.nes *,
body.nes *::before,
body.nes *::after {
    border-radius: 0 !important;
    font-family: 'Press Start 2P', ui-monospace, monospace !important;
    letter-spacing: 0 !important;
    text-rendering: geometricPrecision !important;
}

/* wipe heavy backdrop patterns (slab pattern, leaves etc. still fine) */
body.nes::before,
body.nes::after {
    background-image: none !important;
    opacity: 0 !important;
}

/* images pixelated */
body.nes img,
body.nes canvas,
body.nes svg {
    image-rendering: pixelated !important;
    image-rendering: crisp-edges !important;
}

/* HEADINGS — red with chromatic fringe */
body.nes h1,
body.nes h2,
body.nes h3,
body.nes .wordmark,
body.nes .section-title,
body.nes .project-name {
    color: var(--fc-red) !important;
    font-family: 'Press Start 2P', monospace !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    line-height: 1.4 !important;
}
body.nes h1 { font-size: 22px !important; }
body.nes h2 { font-size: 16px !important; }
body.nes h3 { font-size: 12px !important; }
body.nes .wordmark { font-size: 32px !important; line-height: 1.2 !important; }
body.nes .wordmark em { font-size: 22px !important; transform: none !important; display: inline-block !important; color: var(--fc-blue) !important; }
body.nes .wordmark::after { display: none !important; }

body.nes p,
body.nes li,
body.nes span,
body.nes div {
    font-size: 10px !important;
    line-height: 1.8 !important;
}

/* LINKS */
body.nes a {
    color: var(--fc-red) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}
body.nes a:hover { color: var(--fc-blue) !important; }

/* BUTTONS + CARDS — chunky 3px border + hard offset shadow */
body.nes button,
body.nes .project,
body.nes .link-card,
body.nes .feat,
body.nes .scan,
body.nes .check,
body.nes .section.notice,
body.nes .section.gallery-frame,
body.nes .section.download,
body.nes .dl-btn,
body.nes .back,
body.nes .theme-toggle,
body.nes .lock-out,
body.nes .preview {
    background: var(--fc-cream) !important;
    color: var(--fc-ink) !important;
    border: 3px solid var(--fc-ink) !important;
    box-shadow: var(--fc-shadow) !important;
    transition: none !important;
    filter: none !important;
    transform: none !important;
}

body.nes button:hover,
body.nes .project:hover,
body.nes .link-card:hover,
body.nes .scan:hover,
body.nes .check:hover,
body.nes .dl-btn:hover,
body.nes .back:hover,
body.nes .theme-toggle:hover {
    background: var(--fc-gold) !important;
    transform: translate(-1px, -1px) !important;
    box-shadow: 5px 5px 0 var(--fc-ink) !important;
}
body.nes button:active,
body.nes .project:active,
body.nes .link-card:active,
body.nes .dl-btn:active,
body.nes .back:active {
    transform: translate(2px, 2px) !important;
    box-shadow: 2px 2px 0 var(--fc-ink) !important;
}

/* primary action buttons stay red */
body.nes .dl-btn,
body.nes .scan-arrow,
body.nes .lock-btn {
    background: var(--fc-red) !important;
    color: var(--fc-cream) !important;
}
body.nes .dl-btn:hover,
body.nes .lock-btn:hover {
    background: var(--fc-red-dark) !important;
    color: var(--fc-cream) !important;
}

/* strip theme-toggle + back shape */
body.nes .theme-toggle,
body.nes .back,
body.nes .lock-out {
    padding: 8px 14px !important;
    font-size: 9px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}

/* SCAN LINES — full viewport overlay */
body.nes::after {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 9998 !important;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.08) 0 2px,
        transparent 2px 4px
    ) !important;
    opacity: 0.9 !important;
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.08) 0 2px,
        transparent 2px 4px
    ) !important;
    mix-blend-mode: multiply !important;
}

/* CRT vignette */
body.nes > *:not(.nes-ui) {
    /* leave content unaffected; vignette is a separate fixed layer */
}

/* kill emoji-heavy ambient animations that look off in 8-bit */
body.nes .leaf,
body.nes .hero-icon,
body.nes .link-card-icon {
    animation: none !important;
}
body.nes .leaf { opacity: 0 !important; }

/* NES UI CHROME — injected by konami.js */
.nes-flash {
    position: fixed;
    inset: 0;
    background: #CE1126;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
}
.nes-flash.on {
    animation: fc-flash 340ms ease-out forwards;
}
@keyframes fc-flash {
    0% { opacity: 0; }
    10% { opacity: 1; }
    100% { opacity: 0; }
}

.nes-ribbon {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 9999;
    background: #0D0D0D;
    color: #F2E9D8;
    border: 3px solid #F2E9D8;
    padding: 6px 10px;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 4px 4px 0 #CE1126;
    user-select: none;
}
.nes-ribbon b { color: #FCC048; font-weight: 400; }

.nes-sound {
    position: fixed;
    bottom: 10px;
    left: 10px;
    z-index: 9999;
    background: #F2E9D8;
    color: #0D0D0D;
    border: 3px solid #0D0D0D;
    padding: 6px 10px;
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    cursor: pointer;
    box-shadow: 3px 3px 0 #0D0D0D;
    user-select: none;
}
.nes-sound:hover { background: #FCC048; }
.nes-sound:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #0D0D0D; }

.nes-palette {
    position: fixed;
    bottom: 50px;
    left: 10px;
    z-index: 9999;
    background: #F2E9D8;
    color: #0D0D0D;
    border: 3px solid #0D0D0D;
    padding: 6px 10px;
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    letter-spacing: 0.05em;
    cursor: pointer;
    box-shadow: 3px 3px 0 #0D0D0D;
    user-select: none;
}
.nes-palette:hover { background: #FCC048; }
.nes-palette:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #0D0D0D; }

/* In Famicom palette, retint the chrome buttons + ribbon shadow to match */
body.nes.famicom .nes-ribbon { box-shadow: 4px 4px 0 #7C1A1A; }
body.nes.famicom .nes-ribbon b { color: #E8B340; }