:root {
    --bg-main: #10143a;
    --bg-accent: #1c2659;
    --panel: #0e1230;
    --panel-soft: #141a42;
    --text-main: #f5f7ff;
    --text-muted: #b8c0e4;
    --line: #3b4a8a;
    --hot-pink: #ff4f9a;
    --sun: #ffd166;
    --mint: #76f7bf;
    --cyan: #66d9ff;
    --shadow: 0 12px 0 #0a0e25;
    --radius: 16px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background:
        radial-gradient(circle at 15% 15%, #23377e 0%, transparent 30%),
        radial-gradient(circle at 85% 10%, #623b8d 0%, transparent 34%),
        linear-gradient(180deg, var(--bg-accent) 0%, var(--bg-main) 55%, #0b0f2d 100%);
    color: var(--text-main);
    font-family: "VT323", monospace;
    font-size: 1.45rem;
    line-height: 1.4;
    min-height: 100vh;
}

.pixel-noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 50%, transparent 50%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 50%, transparent 50%);
    background-size: 4px 4px, 4px 4px;
    opacity: 0.25;
}

.site-header,
main,
.site-footer {
    width: min(1080px, 92vw);
    margin: 0 auto;
}

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.3rem 0 0.5rem;
}

.brand {
    font-family: "Press Start 2P", cursive;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--sun);
    letter-spacing: 0.08em;
}

.main-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
}

.main-nav a {
    color: var(--text-main);
    text-decoration: none;
    padding: 0.15rem 0.4rem;
    border: 2px solid transparent;
}

.main-nav a:hover,
.main-nav a:focus-visible {
    border-color: var(--cyan);
    outline: none;
}

.main-nav a[aria-current="page"] {
    border-color: var(--sun);
    color: var(--sun);
}

.hero {
    background: linear-gradient(180deg, rgba(18, 25, 64, 0.95), rgba(14, 18, 48, 0.92));
    border: 3px solid var(--line);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    padding: clamp(1.3rem, 3vw, 2.4rem);
    margin-top: 1rem;
    animation: riseIn 650ms ease-out;
}

.hero-kicker {
    font-family: "Press Start 2P", cursive;
    font-size: clamp(0.56rem, 0.95vw, 0.7rem);
    color: var(--mint);
    margin: 0 0 0.9rem;
}

h1,
h2,
h3 {
    margin: 0;
    font-weight: 400;
}

h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    max-width: 19ch;
    line-height: 1.04;
    text-wrap: balance;
}

.hero-copy {
    margin: 1rem 0 0;
    max-width: 56ch;
    color: var(--text-muted);
}

.hero-actions {
    margin-top: 1.3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.btn {
    text-decoration: none;
    display: inline-block;
    border-radius: 10px;
    border: 2px solid currentColor;
    padding: 0.35rem 0.7rem;
    transition: transform 140ms ease, box-shadow 140ms ease;
}

.btn:hover,
.btn:focus-visible {
    transform: translate(-2px, -2px);
    outline: none;
}

.btn-primary {
    color: #0c1030;
    background: var(--sun);
    border-color: #f8be2e;
    box-shadow: 4px 4px 0 #f8be2e;
}

.btn-ghost {
    color: var(--cyan);
    background: transparent;
    box-shadow: 4px 4px 0 #366da9;
}

.section {
    margin-top: 2rem;
    padding-bottom: 0.35rem;
}

.page-hero {
    background: linear-gradient(180deg, rgba(18, 25, 64, 0.95), rgba(14, 18, 48, 0.92));
    border: 3px solid var(--line);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    padding: clamp(1.1rem, 2.2vw, 1.9rem);
}

.section-heading h2 {
    font-family: "Press Start 2P", cursive;
    font-size: clamp(0.8rem, 1.6vw, 1.1rem);
    color: var(--hot-pink);
}

.section-heading p {
    margin: 0.55rem 0 1rem;
    color: var(--text-muted);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.project-card {
    background: linear-gradient(180deg, var(--panel-soft), var(--panel));
    border: 3px solid #304080;
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow);
    animation: riseIn 700ms ease-out both;
}

.project-card:nth-child(2) {
    animation-delay: 70ms;
}

.project-card:nth-child(3) {
    animation-delay: 140ms;
}

.project-card h3 {
    font-size: clamp(1.4rem, 2.3vw, 1.8rem);
    margin-top: 0.35rem;
}

.project-card p {
    margin: 0.55rem 0 0;
    color: var(--text-muted);
}

.project-status {
    font-family: "Press Start 2P", cursive;
    font-size: 0.56rem;
    letter-spacing: 0.03em;
    width: fit-content;
    margin: 0;
    padding: 0.25rem 0.45rem;
    border-radius: 7px;
}

.is-live {
    background: rgba(118, 247, 191, 0.14);
    color: var(--mint);
    border: 2px solid rgba(118, 247, 191, 0.45);
}

.is-testing {
    background: rgba(102, 217, 255, 0.15);
    color: var(--cyan);
    border: 2px solid rgba(102, 217, 255, 0.45);
}

.is-archive {
    background: rgba(255, 79, 154, 0.15);
    color: #ffa7cb;
    border: 2px solid rgba(255, 79, 154, 0.35);
}

.chip-row {
    list-style: none;
    margin: 0.85rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.chip-row li {
    border: 2px dashed #4b5ea2;
    border-radius: 999px;
    padding: 0.12rem 0.55rem;
    color: #d4dbff;
    font-size: 1.1rem;
}

.posts-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
    gap: 1rem;
}

.post-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.8rem;
}

.post-item {
    background: linear-gradient(180deg, var(--panel-soft), var(--panel));
    border: 2px solid var(--line);
    border-radius: 12px;
    padding: 0.8rem 0.95rem;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.7rem;
}

.post-item time {
    display: inline-block;
    color: var(--sun);
    font-family: "Press Start 2P", cursive;
    font-size: 0.52rem;
}

.tag-row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.tag-row li {
    border: 1px solid #4f63ac;
    border-radius: 999px;
    padding: 0.06rem 0.42rem;
    color: #d3dcff;
    font-size: 1rem;
    line-height: 1.2;
    background: rgba(34, 47, 109, 0.45);
}

.post-item h3 {
    margin-top: 0.35rem;
    font-size: clamp(1.3rem, 2.2vw, 1.65rem);
}

.post-item h3 a {
    color: var(--text-main);
    text-decoration: none;
}

.post-item h3 a:hover,
.post-item h3 a:focus-visible {
    color: var(--mint);
}

.post-item p {
    margin: 0.35rem 0 0;
    color: var(--text-muted);
}

.side-panel {
    background: linear-gradient(180deg, #202f70, #162055);
    border: 3px solid #4e65c1;
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 1rem;
    align-self: start;
}

.side-panel h3 {
    font-family: "Press Start 2P", cursive;
    font-size: 0.7rem;
    color: #ffd98e;
}

.side-panel p {
    margin: 0.7rem 0 0.9rem;
    color: #e3e8ff;
}

.btn-panel {
    color: #ffffff;
    box-shadow: 4px 4px 0 #314ca7;
    background: rgba(255, 255, 255, 0.05);
}

.site-footer {
    margin-top: 2rem;
    margin-bottom: 1.6rem;
    color: #b0bbe7;
    text-align: center;
    border-top: 2px dotted #3f508f;
    padding-top: 0.8rem;
}

.social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    color: #d9e3ff;
}

.social-links a:hover,
.social-links a:focus-visible {
    color: var(--mint);
}

.social-icon {
    display: inline-grid;
    place-items: center;
    min-width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #5d72c2;
    border-radius: 0.3rem;
    font-size: 0;
    color: transparent;
    background: rgba(28, 38, 89, 0.8);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 72% 72%;
}

.social-links a[href*="github.com"] .social-icon {
    background-color: #000000;
    border-color: #000000;
    background-image: url("/assets/logos/github.svg");
}

.social-links a[href*="x.com"] .social-icon,
.social-links a[href*="twitter.com"] .social-icon {
    background-color: #000000;
    border-color: #000000;
    background-image: url("/assets/logos/twitter.svg");
}

.social-links a[href*="itch.io"] .social-icon {
    background-color: #fa5c5c;
    border-color: #fa5c5c;
    background-image: url("/assets/logos/itchio.svg");
}

.social-divider {
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 999px;
    background: #5d72c2;
}

.section-link-row {
    margin: 0.9rem 0 0;
}

.archive-list {
    gap: 1rem;
}

.post-page {
    background: linear-gradient(180deg, var(--panel-soft), var(--panel));
    border: 3px solid #304080;
    border-radius: var(--radius);
    padding: clamp(1rem, 2vw, 1.6rem);
    box-shadow: var(--shadow);
}

.post-meta-inline {
    margin: 0.65rem 0 1rem;
}

.post-page p {
    margin: 0.8rem 0;
    color: #d4dcff;
}

.post-page h2,
.post-page h3 {
    margin-top: 1.2rem;
    line-height: 1.2;
}

.heading-anchor {
    margin-left: 0.45rem;
    color: var(--cyan);
    text-decoration: none;
    opacity: 0;
    transition: opacity 130ms ease;
}

.post-page h2:hover .heading-anchor,
.post-page h2:focus-within .heading-anchor,
.post-page h3:hover .heading-anchor,
.post-page h3:focus-within .heading-anchor {
    opacity: 1;
}

.code-block {
    margin: 1rem 0;
    border: 2px solid #4f63ac;
    border-radius: 12px;
    padding: 0.75rem;
    background: #0b122f;
    overflow-x: auto;
}

.code-block code {
    font-family: "Courier New", monospace;
    font-size: 0.95rem;
    color: #d6e3ff;
}

.hljs-comment,
.hljs-quote {
    color: #90a2d4;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
    color: #ffd166;
}

.hljs-string,
.hljs-doctag,
.hljs-addition,
.hljs-attribute,
.hljs-regexp {
    color: #76f7bf;
}

.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-link {
    color: #66d9ff;
}

.hljs-title,
.hljs-section,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
    color: #ff8dbd;
}

.callout {
    margin: 1rem 0;
    padding: 0.8rem 0.9rem;
    border: 2px solid #4f63ac;
    border-radius: 12px;
    background: rgba(19, 29, 72, 0.7);
}

.callout-title {
    margin: 0;
    font-family: "Press Start 2P", cursive;
    font-size: 0.5rem;
    letter-spacing: 0.02em;
}

.callout p:last-child,
.callout ul:last-child,
.callout ol:last-child {
    margin-bottom: 0;
}

.callout-note {
    border-color: #66d9ff;
    background: rgba(16, 60, 93, 0.35);
}

.callout-tip {
    border-color: #76f7bf;
    background: rgba(15, 88, 67, 0.28);
}

.callout-warning {
    border-color: #ffd166;
    background: rgba(105, 78, 12, 0.3);
}

.callout-danger {
    border-color: #ff4f9a;
    background: rgba(93, 15, 52, 0.32);
}

.post-figure {
    margin: 1.1rem 0;
}

.post-image {
    display: block;
    width: min(100%, 900px);
    height: auto;
    border-radius: 12px;
    border: 2px solid #4f63ac;
}

.post-figure figcaption {
    margin-top: 0.45rem;
    color: var(--text-muted);
}

.breadcrumb {
    margin: 0 0 0.6rem;
    color: #b7c4fd;
}

.post-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1rem;
}

.two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.content-card {
    background: linear-gradient(180deg, var(--panel-soft), var(--panel));
    border: 2px solid var(--line);
    border-radius: 12px;
    padding: 0.9rem;
}

.content-card h2 {
    font-size: 1.5rem;
}

.plain-list {
    margin: 0.45rem 0 0;
    padding-left: 1.1rem;
}

.plain-list li {
    margin: 0.22rem 0;
    color: #d6defd;
}

a {
    color: #ace7ff;
}

a:focus-visible {
    outline: 3px solid var(--sun);
    outline-offset: 2px;
}

@keyframes riseIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.post-siblings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.prev-post,
.next-post {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sibling-label {
    font-family: "Press Start 2P", cursive;
    font-size: 0.52rem;
    color: var(--mint);
    margin: 0;
}

.prev-post .btn,
.next-post .btn {
    text-align: left;
}

.next-post .btn {
    text-align: right;
}

.tag-row a,
.chip-row a {
    color: inherit;
    text-decoration: none;
}

.tag-row a:hover,
.tag-row a:focus-visible,
.chip-row a:hover,
.chip-row a:focus-visible {
    opacity: 0.8;
    text-decoration: underline;
}

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

    .posts-layout {
        grid-template-columns: 1fr;
    }

    .two-col {
        grid-template-columns: 1fr;
    }

    .post-siblings {
        grid-template-columns: 1fr;
    }

    .site-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 500px) {
    body {
        font-size: 1.3rem;
    }

    .hero,
    .project-card,
    .post-item,
    .side-panel {
        padding: 0.85rem;
    }

    .prev-post .btn,
    .next-post .btn {
        text-align: center;
    }
}