/* ==========================================================================
   Syoo Games — public site
   Layout, spacing, type scale and colour system follow the narviogames.com
   reference the studio owner asked the site to match.
   ========================================================================== */

:root {
    /* Brand accents (identical in both themes) */
    --color-aqua: #34c5bc;
    --color-sky: #3f9fce;
    --color-water: #1f9e96;
    --color-deep-teal: #173a3c;
    --color-horn-yellow: #ffc24b;
    --color-horn-yellow-dark: #f2a93b;

    /* Light theme surfaces */
    --color-text: #173a3c;
    --color-muted: #51706e;
    --color-surface: #ffffff;
    --color-surface-raised: #f3fdfb;
    --color-surface-alt: #eaf7f5;
    --color-border: #e7f1ef;

    --shadow-soft: 0 14px 34px rgba(23, 58, 60, .07);
    --shadow-soft-lg: 0 16px 40px rgba(23, 58, 60, .08);
    --shadow-card-hover: 0 22px 44px rgba(23, 58, 60, .12);
    --shadow-yellow: 0 10px 22px rgba(242, 169, 59, .4);

    --radius-card: 26px;
    --radius-card-lg: 30px;
    --radius-pill: 999px;

    --font-display: 'Baloo 2', sans-serif;
    --font-body: 'Hanken Grotesk', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Notebook paper: faint ruled lines plus a margin line behind every page */
    --paper-rule: 34px;
    --paper-line: rgba(63, 159, 206, .1);
    --paper-margin: rgba(233, 104, 84, .28);
    --paper-margin-x: calc(50% - 622px);
    --tape: rgba(255, 194, 75, .55);
    --tape-alt: rgba(52, 197, 188, .38);

    --container: 1180px;
    --gutter: 40px;
    --header-h: 66px;
    --section-y: clamp(52px, 6.1vw, 78px);
}

[data-theme='dark'] {
    --color-text: #e4f4f2;
    --color-muted: #8ab2b0;
    --color-surface: #132a2c;
    --color-surface-raised: #0c1e20;
    --color-surface-alt: #1a3538;
    --color-border: #1e3538;

    --paper-line: rgba(126, 211, 204, .06);
    --paper-margin: rgba(240, 120, 100, .2);
    --tape: rgba(242, 184, 70, .8);
    --tape-alt: rgba(52, 197, 188, .62);

    --shadow-soft: 0 14px 34px rgba(0, 0, 0, .28);
    --shadow-soft-lg: 0 16px 40px rgba(0, 0, 0, .35);
    --shadow-card-hover: 0 22px 44px rgba(0, 0, 0, .35);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 24px);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    background-color: var(--color-surface-raised);
    /* Ruled notebook paper: a margin line left of the content column and
       horizontal rules only, which is much calmer to read over than a grid. */
    background-image:
        linear-gradient(to right,
            transparent var(--paper-margin-x),
            var(--paper-margin) var(--paper-margin-x),
            var(--paper-margin) calc(var(--paper-margin-x) + 1px),
            transparent calc(var(--paper-margin-x) + 1px),
            transparent calc(var(--paper-margin-x) + 4px),
            var(--paper-margin) calc(var(--paper-margin-x) + 4px),
            var(--paper-margin) calc(var(--paper-margin-x) + 5px),
            transparent calc(var(--paper-margin-x) + 5px)),
        linear-gradient(to bottom, transparent calc(var(--paper-rule) - 1px), var(--paper-line) calc(var(--paper-rule) - 1px));
    background-size: 100% 100%, 100% var(--paper-rule);
    background-repeat: no-repeat, repeat;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    transition: background-color .25s ease, color .25s ease;
}

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

a { color: var(--color-aqua); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--color-water); }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--color-text);
    margin: 0 0 .4em;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.5rem, 5.7vw, 4.56rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -1.5px;
}

h2, .section-title {
    font-size: clamp(1.9rem, 3.42vw, 2.74rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -1px;
}

h3 { font-size: 1.32rem; font-weight: 600; line-height: 1.25; letter-spacing: -.3px; }
h4 { font-size: 1.05rem; font-weight: 600; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: .35em; }

hr { border: 0; border-top: 1px solid var(--color-border); margin: 2.4rem 0; }

code, kbd, pre { font-family: var(--font-mono); font-size: .88em; }

::selection { background: var(--color-aqua); color: #fff; }

:focus-visible {
    outline: 2px solid var(--color-aqua);
    outline-offset: 3px;
    border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container--narrow { max-width: 820px; }

.section { padding-block: var(--section-y); }
/* Translucent so the ruled paper keeps running through the band. */
.section--alt { background: color-mix(in srgb, var(--color-surface) 62%, transparent); }

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.section-head .section-title { margin: 8px 0 0; }
.section-head p { color: var(--color-muted); margin: 10px 0 0; max-width: 56ch; }

.section-label {
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-aqua);
    margin: 0;
}

.lede { color: var(--color-muted); font-size: 1.25rem; line-height: 1.5; max-width: 560px; }

.link-arrow {
    font-weight: 600;
    font-size: .95rem;
    color: var(--color-aqua);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.link-arrow::after { content: '→'; transition: transform .2s ease; }
.link-arrow:hover::after { transform: translateX(4px); }

.skip-link {
    position: absolute;
    left: 14px;
    top: -60px;
    z-index: 200;
    background: var(--color-horn-yellow);
    color: var(--color-deep-teal);
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    transition: top .18s ease;
}
.skip-link:focus { top: 12px; color: var(--color-deep-teal); }

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

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 28px;
    border: 0;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}

.btn-primary {
    background: var(--color-horn-yellow);
    color: var(--color-deep-teal);
    box-shadow: var(--shadow-yellow);
}
.btn-primary:hover {
    background: var(--color-horn-yellow-dark);
    color: var(--color-deep-teal);
    transform: translateY(-2px);
}

.btn-secondary {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
[data-theme='dark'] .btn-secondary { border-color: #2a5055; }
.btn-secondary:hover {
    color: var(--color-text);
    border-color: var(--color-aqua);
    background: rgba(52, 197, 188, .08);
}

.btn-dark {
    background: var(--color-deep-teal);
    color: #e4f4f2;
}
[data-theme='dark'] .btn-dark { background: #0f2a2c; }
.btn-dark:hover { background: #0e2c2e; color: #fff; }
[data-theme='dark'] .btn-dark:hover { background: #071b1d; }

.btn-sm { padding: 11px 20px; font-size: .9rem; }
.btn-block { width: 100%; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--color-surface-raised) 88%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease;
}
.site-header.is-stuck { border-bottom-color: var(--color-border); }

.nav-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px var(--gutter);
    max-width: var(--container);
    margin-inline: auto;
    min-height: var(--header-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-right: auto;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 1.32rem;
    font-weight: 600;
    letter-spacing: -.4px;
}
.brand:hover { color: var(--color-text); }
.brand img { width: 30px; height: 30px; object-fit: contain; transition: transform .28s cubic-bezier(.34, 1.56, .64, 1); }
.brand:hover img { transform: rotate(-8deg) scale(1.08); }

.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a {
    color: var(--color-muted);
    font-size: .97rem;
    font-weight: 600;
    transition: color .18s ease;
}
.nav-links a:hover, .nav-links a.is-active { color: var(--color-text); }
.nav-links a.is-active { color: var(--color-aqua); }

.header-tools { display: flex; align-items: center; gap: 12px; }

.icon-btn {
    width: 38px; height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}
.icon-btn:hover { background: var(--color-surface-alt); color: var(--color-text); }
.icon-btn svg { width: 18px; height: 18px; }

.lang-switch {
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .06em;
    transition: border-color .18s ease, color .18s ease;
}
[data-theme='dark'] .lang-switch { border-color: #2a5055; }
.lang-switch:hover { color: var(--color-text); border-color: var(--color-aqua); }

.nav-toggle {
    display: none;
    width: 38px; height: 38px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
}
.nav-toggle span {
    display: block;
    width: 18px; height: 2px;
    background: currentColor;
    border-radius: 2px;
    position: relative;
    transition: background-color .18s ease;
}
.nav-toggle span::before, .nav-toggle span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 18px; height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .22s ease;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded='true'] span { background: transparent; }
.nav-toggle[aria-expanded='true'] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span::after { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;
    padding: clamp(44px, 5.3vw, 68px) var(--gutter) clamp(56px, 6.8vw, 88px);
    text-align: center;
}
.hero__inner { max-width: 820px; margin-inline: auto; position: relative; z-index: 1; }

.hero__mascot {
    width: clamp(190px, 23vw, 300px);
    margin: 0 auto 10px;
    position: relative;
}
.hero__mascot img { width: 100%; animation: bob 6s ease-in-out infinite; }
.hero__mascot::after {
    content: '';
    position: absolute;
    inset: 6% 2% -10%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(52, 197, 188, .32), transparent 72%);
    filter: blur(12px);
}

@keyframes bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) { .hero__mascot img { animation: none; } }

.hero h1 { margin: 14px 0 0; }
.hero__sub {
    color: var(--color-muted);
    font-size: 1.25rem;
    line-height: 1.5;
    max-width: 560px;
    margin: 20px auto 0;
}
.hero__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

/* Floating bubbles behind the hero */
.hero__bubbles { position: absolute; inset: 0; pointer-events: none; }
.hero__bubbles span {
    position: absolute;
    border-radius: 50%;
    background: var(--color-aqua);
    opacity: .12;
    animation: drift 14s ease-in-out infinite;
}
.hero__bubbles span:nth-child(1) { width: 10px;  height: 10px;  left: 6%;  top: 62%; animation-delay: 0s; }
.hero__bubbles span:nth-child(2) { width: 22px;  height: 22px;  left: 14%; top: 78%; animation-delay: 1.6s; }
.hero__bubbles span:nth-child(3) { width: 7px;   height: 7px;   left: 42%; top: 86%; animation-delay: 3.1s; }
.hero__bubbles span:nth-child(4) { width: 14px;  height: 14px;  left: 72%; top: 70%; animation-delay: 2.2s; }
.hero__bubbles span:nth-child(5) { width: 28px;  height: 28px;  left: 88%; top: 58%; animation-delay: 4s; }
.hero__bubbles span:nth-child(6) { width: 9px;   height: 9px;   left: 58%; top: 92%; animation-delay: 5.2s; }

@keyframes drift {
    0%, 100% { transform: translateY(0) scale(1); opacity: .12; }
    50% { transform: translateY(-26px) scale(1.12); opacity: .2; }
}

/* --------------------------------------------------------------------------
   Page hero (interior pages)
   -------------------------------------------------------------------------- */

.page-hero {
    position: relative;
    text-align: center;
    padding: clamp(48px, 6vw, 76px) var(--gutter) clamp(34px, 4.4vw, 54px);
    background: radial-gradient(120% 90% at 50% -20%, var(--color-surface-alt), transparent 60%);
}
[data-theme='dark'] .page-hero {
    background: radial-gradient(120% 90% at 50% -20%, #0d2e30, transparent 60%);
}
.page-hero .section-label { margin-bottom: 10px; }
.page-hero h1 { margin: 0; }
.page-hero p {
    color: var(--color-muted);
    font-size: 1.12rem;
    max-width: 580px;
    margin: 16px auto 0;
}
.page-hero--left { text-align: left; }
.page-hero--left p { margin-inline: 0; }


/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 22px;
    box-shadow: var(--shadow-soft);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: var(--radius-pill);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.chip-teal  { background: rgba(31, 158, 150, .12); color: var(--color-water); }
.chip-blue  { background: rgba(63, 159, 206, .14); color: #2d7fa8; }
.chip-yellow{ background: rgba(255, 194, 75, .18); color: #b07a12; }
[data-theme='dark'] .chip-teal   { background: rgba(31, 158, 150, .14); color: #3dc5bc; }
[data-theme='dark'] .chip-blue   { background: rgba(63, 159, 206, .14); color: #64b6e0; }
[data-theme='dark'] .chip-yellow { background: rgba(255, 194, 75, .14); color: #d9a840; }

.chip--dot::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.tag {
    display: inline-flex;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: rgba(31, 158, 150, .1);
    color: var(--color-water);
    font-size: .8rem;
    font-weight: 600;
}
[data-theme='dark'] .tag { background: rgba(31, 158, 150, .12); color: #5ab5ae; }
a.tag:hover { background: rgba(31, 158, 150, .2); }

/* Game cards ------------------------------------------------------------- */

.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: 26px;
}

.game-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-soft);
    transition: transform .22s ease, box-shadow .22s ease;
}
.game-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }

.game-card__art {
    position: relative;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #b9e8c8, #f2e9a0 55%, #ffd98a);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.game-card__art img { width: 100%; height: 100%; object-fit: cover; }
.game-card__art--alt { background: linear-gradient(135deg, #16343d, #1d4557 60%, #14303a); }
.game-card__art .placeholder-mark { width: 38%; max-width: 130px; opacity: .55; object-fit: contain; height: auto; }

.game-card__chips {
    position: absolute;
    left: 16px; bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    z-index: 2;
}
.game-card__chips .chip { background: rgba(255, 255, 255, .92); color: var(--color-deep-teal); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.game-card__chips .chip--status { background: var(--color-horn-yellow); color: var(--color-deep-teal); }
.game-card__chips .chip--meta { font-family: var(--font-mono); font-weight: 500; font-size: .72rem; }

.game-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.game-card__body h3 { margin: 0; font-size: 1.42rem; }
.game-card__body h3 a { color: var(--color-text); }
.game-card__body h3 a:hover { color: var(--color-aqua); }
.game-card__body p { color: var(--color-muted); font-size: .95rem; margin: 0; }
.game-card__foot { margin-top: auto; padding-top: 8px; }

/* Devlog cards ----------------------------------------------------------- */

.devlog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 24px;
}

.devlog-card { padding: 22px; display: flex; flex-direction: column; gap: 11px; }
.devlog-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.devlog-card__date {
    font-family: var(--font-mono);
    font-size: .76rem;
    color: var(--color-muted);
    white-space: nowrap;
}
.devlog-card h3 { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.devlog-card h3 a { color: var(--color-text); }
.devlog-card h3 a:hover { color: var(--color-aqua); }
.devlog-card p { color: var(--color-muted); font-size: .93rem; margin: 0; }
.devlog-card__foot { margin-top: auto; padding-top: 4px; }

/* Wide list rows used on the devlog index */
.devlog-list { display: grid; gap: 18px; max-width: 880px; margin-inline: auto; }
.devlog-row { padding: 24px 26px; }
.devlog-row h3 { font-size: 1.28rem; }

/* --------------------------------------------------------------------------
   About teaser band
   -------------------------------------------------------------------------- */

.about-teaser { background: color-mix(in srgb, var(--color-surface) 62%, transparent); }
.about-teaser__inner {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
    padding-block: var(--section-y);
}
.about-teaser__art {
    position: relative;
    width: 100%;
    max-width: 280px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, #d8f6f2, #9fe2dc 70%, #6fcdc6);
    display: grid;
    place-items: center;
    justify-self: center;
    box-shadow: 0 18px 44px rgba(31, 158, 150, .22);
}
[data-theme='dark'] .about-teaser__art {
    background: radial-gradient(circle at 50% 40%, #b9eee9, #7ed3cc 70%, #3fa8a2);
}
.about-teaser__art img { width: 74%; height: auto; object-fit: contain; }
.about-teaser h2 { margin: 8px 0 14px; }
.about-teaser p { color: var(--color-muted); max-width: 52ch; }
.about-teaser .btn { margin-top: 22px; }

/* --------------------------------------------------------------------------
   Article / prose
   -------------------------------------------------------------------------- */

.prose { font-size: 1.05rem; line-height: 1.75; color: var(--color-text); max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2em; font-size: 1.85rem; }
.prose h3 { margin-top: 1.7em; font-size: 1.3rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p { color: var(--color-muted); }
.prose strong { color: var(--color-text); font-weight: 700; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose li { color: var(--color-muted); }
.prose li::marker { color: var(--color-aqua); }
.prose blockquote {
    margin: 1.6em 0;
    padding: 2px 0 2px 22px;
    border-left: 3px solid var(--color-aqua);
    color: var(--color-muted);
    font-size: 1.06em;
}
.prose img, .prose figure img { border-radius: 18px; }
.prose figure { margin: 1.8em 0; }
.prose figcaption {
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: .8rem;
    color: var(--color-muted);
    text-align: center;
}
.prose code {
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--color-surface-alt);
    color: var(--color-water);
}
[data-theme='dark'] .prose code { color: #4fd3c9; }
.prose pre.code-block {
    margin: 1.6em 0;
    padding: 20px 22px;
    border-radius: 18px;
    background: var(--color-deep-teal);
    color: #d8ece9;
    overflow-x: auto;
    line-height: 1.6;
}
[data-theme='dark'] .prose pre.code-block { background: #0a1a1c; border: 1px solid var(--color-border); }
.prose pre.code-block code { background: none; padding: 0; color: inherit; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose th, .prose td { padding: 10px 14px; border-bottom: 1px solid var(--color-border); text-align: left; }

.embed {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
}
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.article-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: .8rem;
    color: var(--color-muted);
    margin-bottom: 16px;
}
.article-meta .dot { opacity: .5; }

.article-cover {
    margin: 0 0 34px;
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.article-foot {
    margin-top: 42px;
    padding-top: 26px;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.share-row { display: flex; gap: 8px; }
.share-row a, .share-row button {
    width: 38px; height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
[data-theme='dark'] .share-row a, [data-theme='dark'] .share-row button { border-color: #2a5055; }
.share-row a:hover, .share-row button:hover {
    color: var(--color-aqua);
    border-color: var(--color-aqua);
    background: rgba(52, 197, 188, .1);
}
.share-row svg { width: 16px; height: 16px; }

.post-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 16px;
    margin-top: 32px;
}
.post-nav a { padding: 18px 20px; display: block; }
.post-nav span {
    display: block;
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--color-muted);
    margin-bottom: 6px;
}
.post-nav strong { font-family: var(--font-display); font-weight: 600; color: var(--color-text); line-height: 1.3; }
.post-nav a.is-next { text-align: right; }

.toc { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; font-size: .9rem; }
.toc h2 {
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-aqua);
    margin-bottom: 12px;
}
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; border-left: 1px solid var(--color-border); }
.toc li { margin: 0; }
.toc a {
    display: block;
    padding-left: 14px;
    margin-left: -1px;
    border-left: 2px solid transparent;
    color: var(--color-muted);
    line-height: 1.4;
}
.toc a:hover, .toc a.is-active { color: var(--color-text); border-left-color: var(--color-aqua); }

/* Articles are wide enough for 16:9 screenshots; the contents list only takes
   a column when the post has one. */
.container--article { max-width: 1120px; }
.container--article .article-cover { max-width: 1040px; margin-inline: auto; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; max-width: 800px; margin-inline: auto; }
.article-layout .prose { max-width: none; }
@media (min-width: 1080px) {
    .article-layout--toc { grid-template-columns: 220px minmax(0, 1fr); max-width: none; }
}

/* --------------------------------------------------------------------------
   Filters + pagination
   -------------------------------------------------------------------------- */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 32px;
}
.filter-pill {
    padding: 9px 18px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-muted);
    font-size: .9rem;
    font-weight: 600;
    transition: all .18s ease;
}
[data-theme='dark'] .filter-pill { border-color: #2a5055; }
.filter-pill:hover { color: var(--color-text); border-color: var(--color-aqua); }
.filter-pill.is-active {
    background: var(--color-aqua);
    border-color: var(--color-aqua);
    color: #08272a;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 40px;
    padding: 0;
    list-style: none;
}
.pagination li { margin: 0; }
.pagination a, .pagination span {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: .85rem;
}
[data-theme='dark'] .pagination a, [data-theme='dark'] .pagination span { border-color: #2a5055; }
.pagination a:hover { color: var(--color-text); border-color: var(--color-aqua); }
.pagination .is-active { background: var(--color-aqua); border-color: var(--color-aqua); color: #08272a; }
.pagination .is-disabled { opacity: .4; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.field { display: grid; gap: 7px; margin-bottom: 18px; }
.field label { font-size: .88rem; font-weight: 600; color: var(--color-text); }
.field .error { color: #d4574a; font-size: .85rem; }

input[type='text'], input[type='email'], input[type='url'], input[type='search'], textarea, select {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: .97rem;
    transition: border-color .18s ease, box-shadow .18s ease;
}
[data-theme='dark'] input[type='text'], [data-theme='dark'] input[type='email'],
[data-theme='dark'] input[type='url'], [data-theme='dark'] textarea, [data-theme='dark'] select {
    border-color: #2a5055;
    background: var(--color-surface);
}
textarea { min-height: 170px; resize: vertical; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: var(--color-muted); }
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--color-aqua);
    box-shadow: 0 0 0 3px rgba(52, 197, 188, .18);
}
.field.has-error input, .field.has-error textarea { border-color: #d4574a; }

.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.alert {
    padding: 15px 20px;
    border-radius: 18px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    margin-bottom: 22px;
}
.alert--success { border-color: rgba(31, 158, 150, .4); background: rgba(31, 158, 150, .12); }
.alert--error { border-color: rgba(212, 87, 74, .4); background: rgba(212, 87, 74, .12); }

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.gallery a {
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
}
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gallery a:hover img { transform: scale(1.05); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
}
[data-theme='dark'] .site-footer { background: #122a2c; }

.footer-inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 39px;
    padding: 58px var(--gutter) 39px;
    max-width: var(--container);
    margin-inline: auto;
}
.footer-brand .brand { margin-right: 0; }
.footer-brand p { color: var(--color-muted); font-size: .92rem; margin-top: 12px; max-width: 28ch; }
.footer-col h4 {
    font-family: var(--font-body);
    font-size: .95rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-col li { margin: 0; }
.footer-col a { color: var(--color-muted); font-size: .93rem; }
.footer-col a:hover { color: var(--color-aqua); }

.footer-bottom {
    border-top: 1px solid var(--color-border);
    padding: 20px var(--gutter);
    max-width: var(--container);
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: .85rem;
    color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   Error page
   -------------------------------------------------------------------------- */

.error-page { text-align: center; padding-block: clamp(56px, 8vw, 110px); }
.error-page img { max-width: 180px; margin: 0 auto 24px; }
.error-code { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .3em; color: var(--color-aqua); margin-bottom: 8px; }
.error-page p { color: var(--color-muted); max-width: 44ch; margin: 0 auto 26px; }
.error-page .hero__actions { margin-top: 0; }

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: clamp(16px, 4vw, 56px);
    background: rgba(9, 26, 28, .93);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .2s ease;
}
.lightbox.is-open { opacity: 1; }
.lightbox img { max-width: 100%; max-height: 88vh; width: auto; border-radius: 20px; }
.lightbox__close {
    position: absolute;
    top: 18px; right: 18px;
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .26); }

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */

/* Only hide content when JavaScript is actually running — otherwise a blocked
   or slow script would leave the page looking empty. */
.js .reveal { transition: opacity .55s ease, transform .55s ease; }
.js .reveal:not(.is-visible) { opacity: 0; transform: translateY(16px); }
@media (prefers-reduced-motion: reduce) { .js .reveal:not(.is-visible) { opacity: 1; transform: none; } }
/* site.js removes the "reveal" class once an element has arrived, so hover
   transitions go back to their own timing. */

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
    .about-teaser__inner { grid-template-columns: minmax(0, 1fr); text-align: center; }
    .about-teaser p { margin-inline: auto; }
    .toc { display: none; }
    .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    :root { --gutter: 20px; }

    .nav-toggle { display: inline-flex; }

    .nav-links {
        position: fixed;
        inset: var(--header-h) 0 auto;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 14px var(--gutter) 24px;
        background: var(--color-surface-raised);
        border-bottom: 1px solid var(--color-border);
        transform: translateY(-12px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease, transform .2s ease;
        max-height: calc(100dvh - var(--header-h));
        overflow-y: auto;
    }
    .nav-links.is-open { opacity: 1; transform: none; pointer-events: auto; }
    .nav-links a { padding: 12px 14px; border-radius: 14px; font-size: 1.02rem; }
    .nav-links a.is-active { background: var(--color-surface-alt); }

    .header-tools .btn { display: none; }
    .section-head { flex-direction: column; align-items: flex-start; }
    .footer-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .post-nav a.is-next { text-align: left; }
}

@media (max-width: 520px) {
    .hero__actions .btn { width: 100%; }
    .game-card__body, .devlog-row { padding: 20px; }
}

@media print {
    .site-header, .site-footer, .share-row, .post-nav { display: none !important; }
    body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   Interior page helpers
   Added for the games / game detail / devlog / about / press templates. These
   are the only pieces the interior pages needed that the blocks above did not
   already provide.
   -------------------------------------------------------------------------- */

/* Vertical rhythm for a stacked main column (game detail, press kit). */
.stack { display: grid; gap: clamp(34px, 4vw, 52px); }

/* Centred "nothing here yet" line used by empty lists. */
.empty-note {
    text-align: center;
    color: var(--color-muted);
    font-size: 1.08rem;
    max-width: 46ch;
    margin-inline: auto;
    padding-block: 18px;
}

/* Tag list under an article body. */
.tag-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 36px; }

/* Two-column interior hero (about page): mascot left, copy right. */
.page-hero__grid {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
}
.page-hero__grid .about-teaser__art { margin: 0; }

@media (max-width: 1000px) {
    .page-hero--left .page-hero__grid { grid-template-columns: minmax(0, 1fr); text-align: center; }
    .page-hero--left .page-hero__grid .breadcrumbs { justify-content: center; }
    .page-hero--left .page-hero__grid p { margin-inline: auto; }
}

/* Game logo standing in for the <h1> on a game detail hero. */
.page-hero__logo {
    max-width: 340px;
    width: 100%;
    margin: 4px auto 0;
    object-fit: contain;
}

/* --------------------------------------------------------------------------
   Notebook details
   The page background is ruled notebook paper (see body). Devlog cards and the
   screenshots inside an entry are "taped" onto it with a strip of washi tape.
   -------------------------------------------------------------------------- */

.devlog-card,
.prose figure { position: relative; }

.devlog-card::before,
.prose figure::before {
    content: '';
    position: absolute;
    z-index: 2;
    top: -11px;
    left: 50%;
    width: 86px;
    height: 22px;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 6px, transparent 6px 12px),
        var(--tape);
    transform: translateX(-50%) rotate(-2.5deg);
    /* Torn ends */
    clip-path: polygon(0 8%, 4% 0, 96% 4%, 100% 0, 97% 50%, 100% 100%, 3% 94%, 0 100%, 3% 50%);
    pointer-events: none;
}

.devlog-card:nth-child(even)::before { background-color: var(--tape-alt); transform: translateX(-50%) rotate(2deg); }
.devlog-card:nth-child(3n)::before { left: 26%; }

/* Wide rows on the devlog index: tape the top-left corner instead. */
.devlog-row::before,
.devlog-row:nth-child(n)::before { left: 44px; transform: rotate(-4deg); }
.devlog-row:nth-child(even)::before { transform: rotate(3deg); }

.prose figure::before { width: 110px; height: 26px; top: -13px; }
.prose figure:nth-of-type(even)::before { background-color: var(--tape-alt); transform: translateX(-50%) rotate(1.8deg); }

@media print {
    .devlog-card::before, .prose figure::before { display: none; }
}

/* --------------------------------------------------------------------------
   Motion and notebook doodles
   Everything here is decoration: it is switched off for visitors who ask for
   reduced motion (see the global rule near the top of this file).
   -------------------------------------------------------------------------- */

:root {
    --ink: #3f8fd0;          /* ballpoint pen */
    --ink-warm: #f2a93b;     /* highlighter */
    --ink-coral: #e96854;    /* red pen */
    --font-hand: 'Caveat', 'Segoe Print', cursive;
}

/* 1. Highlighter stroke over the last word of the hero title --------------- */

.marker {
    white-space: nowrap;
    padding: 0 .1em;
    margin: 0 -.1em;
    border-radius: .35em .15em .4em .2em;
    background-image: linear-gradient(100deg,
        rgba(255, 194, 75, 0) 0%,
        rgba(255, 194, 75, .75) 3%,
        rgba(255, 205, 105, .6) 50%,
        rgba(255, 194, 75, .45) 95%,
        rgba(255, 194, 75, 0) 100%);
    background-repeat: no-repeat;
    background-position: 0 58%;
    background-size: 0% 80%;
    animation: marker-in .85s cubic-bezier(.65, .05, .25, 1) .6s forwards;
}
@keyframes marker-in { to { background-size: 100% 80%; } }

/* Squiggle drawn under interior page titles */
.page-hero h1::after {
    content: '';
    display: block;
    width: 128px;
    height: 14px;
    margin: 14px auto 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 134 14'%3E%3Cpath d='M3 8C13 2 21 2 29 8S45 14 55 8 71 2 81 8 97 14 107 8 123 2 131 8' fill='none' stroke='%23f2a93b' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    clip-path: inset(0 100% 0 0);
    animation: squiggle-in .8s cubic-bezier(.65, .05, .25, 1) .35s forwards;
}
.page-hero--left h1::after { margin-left: 0; }
@keyframes squiggle-in { to { clip-path: inset(0 0 0 0); } }
@media (max-width: 1000px) {
    .page-hero--left .page-hero__grid h1::after { margin-inline: auto; }
}

/* 2. Devlog cards land on the page and get taped down ---------------------- */

.js .devlog-card.reveal {
    transition: opacity .4s ease, transform .75s cubic-bezier(.2, 1.45, .4, 1);
}
.js .devlog-card.reveal:not(.is-visible) { transform: translateY(-26px) rotate(-2.5deg) scale(1.03); }
.js .devlog-card.reveal:nth-child(even):not(.is-visible) { transform: translateY(-26px) rotate(2deg) scale(1.03); }

.js .devlog-card.reveal::before {
    transition: opacity .2s ease .38s, scale .4s cubic-bezier(.3, 1.7, .5, 1) .38s;
}
.js .devlog-card.reveal:not(.is-visible)::before { opacity: 0; scale: 1.45; }

/* 3. Pen doodles ----------------------------------------------------------- */

.doodle {
    position: absolute;
    z-index: 0;
    color: var(--ink);
    overflow: visible;
    pointer-events: none;
}
.doodle path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.js .doodle.reveal { transform: none; }
.js .doodle path {
    stroke-dasharray: 1 2;
    stroke-dashoffset: 1.05;
    transition: stroke-dashoffset 1s cubic-bezier(.55, .1, .3, 1) .15s;
}
.js .doodle.is-visible path { stroke-dashoffset: 0; }
.js .doodle.is-visible path:nth-child(2) { transition-delay: .85s; }
.js .doodle.is-visible path:nth-child(3) { transition-delay: 1.05s; }
.js .doodle.is-visible path:nth-child(4) { transition-delay: 1.2s; }

.doodle--sparkle { width: 30px; height: 30px; color: var(--ink-warm); }
.doodle--sparkle path { stroke-width: 2.6; }
.doodle--sparkle.is-visible { animation: twinkle 3.4s ease-in-out 1.6s infinite; }
@keyframes twinkle {
    0%, 100% { scale: 1; rotate: 0deg; }
    50% { scale: .78; rotate: 12deg; }
}
.doodle--hero-a { top: 18px; left: calc(50% - clamp(150px, 17vw, 215px)); }
.doodle--hero-b { top: 104px; left: calc(50% + clamp(120px, 14vw, 180px)); width: 22px; height: 22px; }
.doodle--hero-b.is-visible { animation-delay: 2.4s; }

.hero__actions { position: relative; }
.hero__note {
    position: absolute;
    right: calc(50% + 186px);
    top: -44px;
    width: 176px;
    height: 104px;
    pointer-events: none;
    color: var(--ink);
}
.hero__note-text {
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--font-hand);
    font-weight: 600;
    font-size: 1.7rem;
    line-height: 1;
    white-space: nowrap;
    rotate: -6deg;
}
.js .hero__note-text { opacity: 0; animation: note-in .5s ease 1.2s forwards; }
@keyframes note-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
.doodle--note-arrow { right: -14px; top: 30px; width: 130px; height: 72px; }
.doodle--note-arrow path { stroke-width: 2.2; }
.js .doodle--note-arrow.is-visible path { transition-delay: 1.5s; }
.js .doodle--note-arrow.is-visible path:nth-child(2) { transition-delay: 2.35s; }

.section-head > div { position: relative; }
.doodle--title { left: calc(100% + 20px); bottom: 2px; width: 72px; height: 46px; rotate: -8deg; }
.doodle--plane-title { width: 120px; height: 55px; bottom: 6px; rotate: -4deg; }
.doodle--plane-title.is-visible { animation: plane-float 5s ease-in-out 1.8s infinite; }
@keyframes plane-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 6px -6px; }
}

.doodle--about { top: -4px; right: -18px; width: 48px; height: 44px; color: var(--ink-coral); rotate: 12deg; }
.doodle--about.is-visible { animation: heartbeat 2.6s ease-in-out 1.6s infinite; }
@keyframes heartbeat {
    0%, 60%, 100% { scale: 1; }
    70% { scale: 1.16; }
    80% { scale: .96; }
    90% { scale: 1.08; }
}

@media (max-width: 1000px) {
    .hero__note, .doodle--title { display: none; }
}
@media (max-width: 820px) {
    .doodle--hero-a, .doodle--hero-b { display: none; }
}

/* 4. Syoo peeks over the footer ------------------------------------------- */

/* The top margin leaves room above the footer so Syoo never overlaps the
   cards of the last section. */
.site-footer { position: relative; margin-top: 36px; }
.footer-peek {
    position: absolute;
    z-index: 5;
    right: max(20px, calc(50% - 520px));
    bottom: 100%;
    width: 128px;
    height: 112px;
    /* Clip only the bottom edge (the footer line): the head reaches the
       image's left and top edges and must not be cut there. */
    clip-path: inset(-80px -80px 0 -80px);
}
.footer-peek img {
    width: 100%;
    height: auto;
    transform: translateY(110%) rotate(10deg);
    transform-origin: 50% 100%;
    transition: transform .7s cubic-bezier(.3, 1.35, .5, 1);
}
.footer-peek.is-peeking img { transform: translateY(5%) rotate(-3deg); }
.footer-peek.is-peeking:hover img { transform: translateY(56%) rotate(4deg); transition-duration: .35s; }
@media (max-width: 520px) {
    .footer-peek { width: 96px; height: 84px; }
}

/* 5. Reading progress on devlog entries ----------------------------------- */

.read-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 6px;
    pointer-events: none;
}
.read-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 194, 75, .6), rgba(242, 169, 59, .95));
    border-radius: 0 4px 4px 0;
    transform: scaleX(0);
    transform-origin: 0 50%;
}

/* 6. Game cards tilt towards the pointer ---------------------------------- */

.game-card__art img { transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.game-card:hover .game-card__art img { transform: scale(1.06); }
.game-card__art::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 0%), rgba(255, 255, 255, .3), transparent 55%);
    opacity: 0;
    transition: opacity .3s ease;
}
.game-card.is-tilting {
    transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    transition: transform .12s ease-out, box-shadow .22s ease;
}
.game-card.is-tilting .game-card__art::after { opacity: 1; }

/* 7. Poke the mascot ------------------------------------------------------ */

button.hero__mascot {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.hero__mascot img { aspect-ratio: 900 / 827; object-fit: contain; }
.hero__mascot:focus-visible { border-radius: 50%; }
.hero__mascot.is-poked { animation: poke .75s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes poke {
    0%   { transform: none; }
    18%  { transform: scale(1.1, .88); }
    42%  { transform: translateY(-30px) scale(.95, 1.07) rotate(-4deg); }
    68%  { transform: translateY(0) scale(1.05, .95); }
    84%  { transform: scale(.98, 1.02) rotate(2deg); }
    100% { transform: none; }
}

.poke-bit {
    position: absolute;
    left: 50%;
    top: 42%;
    z-index: 2;
    pointer-events: none;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.7rem;
    line-height: 1;
    animation: poke-bit-move 1s cubic-bezier(.2, .8, .3, 1) forwards, poke-bit-fade 1s linear forwards;
}
@keyframes poke-bit-move {
    from { transform: translate(-50%, -50%) scale(.4); }
    to   { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.15) rotate(var(--rot)); }
}
@keyframes poke-bit-fade {
    0%   { opacity: 0; }
    12%  { opacity: 1; }
    65%  { opacity: 1; }
    100% { opacity: 0; }
}

.about-teaser__art:hover img { animation: wiggle .8s ease-in-out; }
@keyframes wiggle {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-7deg); }
    45% { transform: rotate(6deg); }
    70% { transform: rotate(-3deg); }
}

@media (prefers-reduced-motion: reduce) {
    .marker { background-size: 100% 80%; animation: none; }
    .page-hero h1::after { clip-path: none; animation: none; }
    .js .doodle path { stroke-dashoffset: 0; }
    .js .hero__note-text { opacity: 1; animation: none; }
    .doodle { animation: none !important; }
}

/* 8. Floating doodles ----------------------------------------------------- */

/* Drawn by site.js. z-index -1 keeps them above the ruled paper but behind
   all text and cards. */
.particles {
    position: fixed;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

@media print {
    .doodle, .hero__note, .footer-peek, .read-progress, .particles { display: none !important; }
}