/* AmFun Studio — design tokens + components (from the Claude Design handoff, mobile-first).
   Press Start 2P by CodeMan38, SIL Open Font License 1.1, self-hosted (latin subset). */
@font-face {
  font-family: "Press Start 2P";
  src: url("/fonts/press-start-2p-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --color-bg: #0d0b12;
  --color-panel: #1c1826;
  --color-panel-alt: #17141f;
  --color-border: #2e2840;
  --color-stone: #3a3350;
  --color-text: #e9e4d8;
  --color-text-muted: #a39cb2;
  --color-gold: #f2b544;
  --color-gold-light: #ffd27a;
  --color-blood: #b3262d;
  --color-knight: #4f7cff;

  --font-pixel: "Press Start 2P", ui-monospace, monospace;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-h2: clamp(16px, 3vw, 22px);
  --fs-lead: clamp(17px, 2.4vw, 20px);

  --section-y: clamp(56px, 8vw, 88px);
  --gutter: clamp(16px, 4vw, 24px);
  --header-h: 64px;
  --border: 2px solid var(--color-border);
  --shadow-sm: 3px 3px 0 #000;
  --shadow: 4px 4px 0 #000;
  --shadow-lg: 6px 6px 0 #000;
  color-scheme: dark;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font: 400 17px/1.65 var(--font-body); overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
img { max-width: 100%; height: auto; image-rendering: pixelated; }
a { color: var(--color-gold-light); }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--color-gold-light); outline-offset: 3px; }
h1, h2, h3, .pixel { font-family: var(--font-pixel); font-weight: 400; line-height: 1.5; }
p { text-wrap: pretty; }
.container { max-width: 960px; margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--color-text-muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Skip link */
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 60; padding: 12px 14px; background: var(--color-gold); color: var(--color-bg); font: 10px var(--font-pixel); text-decoration: none; border: 2px solid #000; box-shadow: var(--shadow); }
.skip-link:focus { top: 8px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--color-bg); border-bottom: var(--border); }
.site-header .container { padding-block: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--color-text); }
.brand:hover { color: var(--color-text); }
.mark { width: 32px; height: 32px; flex: none; display: grid; place-items: center; background: var(--color-gold); color: var(--color-bg); font: 14px/1 var(--font-pixel); border: 2px solid #000; box-shadow: var(--shadow-sm); }
.mark--sm { width: 20px; height: 20px; font-size: 9px; box-shadow: none; }
.brand-name { font: 12px var(--font-pixel); letter-spacing: .02em; white-space: nowrap; }
.header-right { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 18px; }
.nav-list a { display: flex; align-items: center; min-height: 44px; color: var(--color-text); text-decoration: none; font-weight: 600; font-size: 15px; }
.nav-list a:hover, .nav-list a[aria-current="page"] { color: var(--color-gold-light); }
.lang-switch { display: flex; border: var(--border); box-shadow: var(--shadow-sm); }
.lang-switch > * { display: grid; place-items: center; min-width: 44px; height: 36px; font: 10px var(--font-pixel); text-decoration: none; }
.lang-switch .is-current { background: var(--color-gold); color: var(--color-bg); }
.lang-switch a { background: var(--color-panel); color: var(--color-text); }
.lang-switch a:hover { color: var(--color-gold-light); }
@media (max-width: 520px) { .nav-list .hide-sm { display: none; } }

/* Buttons & badges */
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; font: 11px/1.4 var(--font-pixel); text-decoration: none; border: 2px solid #000; box-shadow: var(--shadow); transition: transform .08s steps(2), box-shadow .08s steps(2); }
.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #000; }
.btn--primary { background: var(--color-gold); color: var(--color-bg); }
.btn--primary:hover { background: var(--color-gold-light); color: var(--color-bg); }
.btn--secondary { background: var(--color-panel); color: var(--color-text); border-color: var(--color-gold); }
.btn--secondary:hover { color: var(--color-gold-light); }
.btn--sm { font-size: 10px; }
.eyebrow { display: inline-block; margin: 0; font: 10px/1.6 var(--font-pixel); color: var(--color-bg); background: var(--color-gold); padding: 6px 10px; border: 2px solid #000; box-shadow: var(--shadow-sm); }
.badge-soon { display: inline-block; margin: 0; font: 9px/1.6 var(--font-pixel); color: var(--color-text); background: var(--color-bg); border: 2px solid var(--color-knight); padding: 6px 8px; }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--color-gold-light); font-weight: 700; font-size: 16px; }
.link-arrow:hover { color: #fff; }

/* Section headings with a pixel square marker */
.section { padding-top: var(--section-y); }
.section--last { padding-bottom: clamp(64px, 9vw, 104px); }
.section-title { margin: 0 0 28px; display: flex; align-items: center; gap: 14px; font-size: var(--fs-h2); line-height: 1.4; color: var(--color-gold); }
.section-title::before { content: ""; width: 14px; height: 14px; flex: none; background: var(--color-blood); box-shadow: 0 0 0 2px #000; }
.section-title--blue::before { background: var(--color-knight); }
.section-intro { margin: -16px 0 28px; max-width: 60ch; color: var(--color-text-muted); }

/* Home hero */
.hero { position: relative; overflow: hidden; border-bottom: 4px solid #000; background: linear-gradient(180deg, rgba(13,11,18,.55) 0%, rgba(13,11,18,.78) 55%, rgba(13,11,18,.95) 100%), url("/img/hero-bg.jpg") center / cover no-repeat, var(--color-panel); }
.banner { position: absolute; top: 0; width: 44px; height: 84px; background: var(--color-blood); border: 2px solid #000; border-top: 6px solid var(--color-gold); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); display: grid; place-items: start center; padding-top: 16px; }
.banner::after { content: ""; width: 12px; height: 12px; background: var(--color-gold); box-shadow: 0 0 0 2px #000; }
.banner--left { left: clamp(12px, 6vw, 72px); }
.banner--right { right: clamp(12px, 6vw, 72px); }
.hero-body { position: relative; padding-top: clamp(104px, 14vw, 140px); padding-bottom: 196px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.hero h1 { margin: 0; font-size: clamp(28px, 7vw, 56px); line-height: 1.2; text-shadow: 4px 4px 0 #000; }
.hero .lead { margin: 0; max-width: 34ch; font-size: var(--fs-lead); line-height: 1.55; }
.cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.runway { position: absolute; left: 0; right: 0; bottom: 48px; height: 112px; pointer-events: none; }
.kr-track { position: absolute; inset: 0; animation: kr-cross 9s linear infinite; }
.kr-sprite { position: absolute; left: 0; bottom: 0; width: 152px; height: 112px; background: url("/img/knight-run.png") 0 0 no-repeat; image-rendering: pixelated; animation: kr-frames .8s steps(8) infinite; }
@keyframes kr-frames { to { background-position: -1216px 0; } }
@keyframes kr-cross { from { transform: translateX(-160px); } to { transform: translateX(100%); } }
.floor { position: absolute; left: 0; right: 0; bottom: 0; height: 48px; border-top: 4px solid #000; box-shadow: inset 0 2px 0 #4a4262; }
.floor::before, .floor::after { content: ""; display: block; height: 22px; background: repeating-linear-gradient(90deg, var(--color-stone) 0 62px, var(--color-bg) 62px 64px); }
.floor::before { border-bottom: 2px solid var(--color-bg); }
.floor::after { background: repeating-linear-gradient(90deg, var(--color-border) 0 62px, var(--color-bg) 62px 64px); background-position: 32px 0; }

/* Game card (home) */
.game-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px; align-items: center; padding: clamp(20px, 3vw, 32px); background: var(--color-panel); border: var(--border); box-shadow: var(--shadow-lg); }
.game-card__id { display: flex; align-items: center; gap: 20px; }
.game-card__meta { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.game-card h3 { margin: 0; font-size: clamp(14px, 2.2vw, 18px); line-height: 1.4; }
.game-card__text { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.game-card__text p { margin: 0; }
.icon { display: block; flex: none; border: 2px solid #000; box-shadow: var(--shadow); background: var(--color-blood); }
.icon--lg { width: 112px; height: 112px; }
.icon--md { width: 72px; height: 72px; box-shadow: var(--shadow-sm); background: var(--color-knight); }

/* App cards (home) */
.app-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.app-card { display: flex; align-items: flex-start; gap: 18px; padding: 22px; background: var(--color-panel); border: var(--border); box-shadow: var(--shadow); }
.app-card__body { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; min-width: 0; }
.app-card h3 { margin: 0; font-size: 12px; line-height: 1.6; }
.app-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-text-muted); }
.app-card__links { display: flex; flex-wrap: wrap; gap: 0 18px; }
.app-card__links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; font-size: 15px; }

/* Contact panel */
.contact-panel { display: flex; flex-direction: column; gap: 20px; padding: clamp(24px, 4vw, 40px); background: var(--color-panel); border: var(--border); border-top: 6px solid var(--color-blood); box-shadow: var(--shadow-lg); }
.contact-panel p { margin: 0; max-width: 52ch; color: var(--color-text-muted); }
.mail-big { align-self: flex-start; max-width: 100%; overflow-wrap: anywhere; font: clamp(12px, 3.2vw, 22px)/1.6 var(--font-pixel); color: var(--color-gold-light); text-decoration: none; border-bottom: 4px solid var(--color-gold); padding-bottom: 6px; }
.mail-big:hover { color: #fff; border-color: #fff; }

/* Breadcrumbs */
.crumbs { margin-bottom: clamp(28px, 5vw, 48px); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--color-text-muted); }
.crumbs li { display: flex; gap: 8px; }
.crumbs li + li::before { content: "/"; }
.crumbs a { color: var(--color-text-muted); }
.crumbs a:hover { color: var(--color-gold-light); }
.crumbs [aria-current] { color: var(--color-text); }

/* Game page */
.game-hero { position: relative; border-bottom: 4px solid #000; background: linear-gradient(180deg, rgba(13,11,18,.7) 0%, rgba(13,11,18,.92) 100%), url("/img/hero-bg.jpg") center / cover no-repeat, var(--color-panel); }
.game-hero .container { padding-top: 20px; padding-bottom: clamp(48px, 7vw, 72px); }
.game-hero__row { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px; }
.game-hero .icon { width: clamp(96px, 16vw, 144px); height: auto; aspect-ratio: 1; box-shadow: var(--shadow-lg); }
.game-hero__text { flex: 1 1 300px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.game-hero h1 { margin: 0; font-size: clamp(24px, 5.5vw, 44px); line-height: 1.25; text-shadow: 4px 4px 0 #000; }
.game-hero__sub { margin: 0; font-size: var(--fs-lead); }
.store-note { margin-top: 8px; display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px; background: #000; border: var(--border); box-shadow: var(--shadow); cursor: default; }
.store-note__icon { width: 22px; height: 22px; flex: none; background: linear-gradient(135deg, var(--color-knight) 0 50%, var(--color-gold) 50% 100%); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.store-note__text { display: flex; flex-direction: column; gap: 4px; line-height: 1.2; }
.store-note__text small { font: 9px var(--font-pixel); color: var(--color-gold); }
.store-note__text b { font-size: 18px; }

.about { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 32px; align-items: start; }
.about__text { display: flex; flex-direction: column; gap: 16px; }
.about__text p { margin: 0; }
.controls { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.controls__screen { aspect-ratio: 16 / 9; padding: 10px; background: #000; border: var(--border); box-shadow: var(--shadow-lg); }
.controls__halves { height: 100%; display: grid; grid-template-columns: 1fr 1fr; border: var(--border); }
.controls__half { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.controls__half--jump { background: rgba(79,124,255,.16); border-right: 2px dashed var(--color-knight); }
.controls__half--attack { background: rgba(179,38,45,.2); }
.controls__glyph { font: 20px var(--font-pixel); }
.controls__half--jump .controls__glyph { color: var(--color-knight); }
.controls__half--attack .controls__glyph { color: #ff6b70; }
.controls__label { font: 10px var(--font-pixel); }
.controls__hint { font-size: 13px; color: var(--color-text-muted); }
.controls figcaption { font-size: 14px; color: var(--color-text-muted); }

.features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.features li { display: flex; flex-direction: column; gap: 12px; padding: 22px; background: var(--color-panel); border: var(--border); box-shadow: var(--shadow); }
.features__n { font: 10px var(--font-pixel); color: var(--color-gold); }
.features h3 { margin: 0; font-size: 12px; line-height: 1.6; }
.features p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-text-muted); }

.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.shot { aspect-ratio: 16 / 9; display: grid; place-items: center; background: repeating-linear-gradient(45deg, var(--color-panel) 0 12px, var(--color-panel-alt) 12px 24px); border: 2px dashed var(--color-border); font: 9px/1.6 var(--font-pixel); color: var(--color-text-muted); text-align: center; padding: 12px; }

.legal-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 24px; background: var(--color-panel); border: var(--border); box-shadow: var(--shadow); }
.legal-strip > div { display: flex; flex-direction: column; gap: 6px; }
.legal-strip h2 { margin: 0; font-size: 13px; line-height: 1.6; }
.legal-strip p { margin: 0; font-size: 15px; color: var(--color-text-muted); }

/* Reading pages (policies) */
.read { max-width: 760px; margin: 0 auto; padding: 20px var(--gutter) clamp(64px, 9vw, 104px); line-height: 1.7; }
.read-head { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; padding-bottom: 28px; margin-bottom: 8px; border-bottom: var(--border); }
.read-head h1 { margin: 0; font-size: clamp(20px, 4.4vw, 32px); line-height: 1.35; text-shadow: 4px 4px 0 #000; }
.read-head .meta { margin: 0; font-size: 15px; color: var(--color-text-muted); }
.toc { margin: 28px 0 8px; padding: 20px 22px; background: var(--color-panel); border: var(--border); box-shadow: var(--shadow); }
.toc > p { margin: 0 0 10px; font: 10px var(--font-pixel); color: var(--color-gold); }
.toc ol { margin: 0; padding-left: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 2px 24px; font-size: 15px; }
.toc a { color: var(--color-text); }
.toc a:hover { color: var(--color-gold-light); }
.read section { padding-top: 36px; }
.read h2 { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: var(--color-gold); }
.read h3 { margin: 22px 0 10px; font-size: 11px; line-height: 1.6; }
.read p { margin: 0 0 14px; }
.read ul { margin: 0 0 14px; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.read ul ul { margin: 8px 0 0; }
.read code { background: var(--color-panel); padding: 1px 6px; font-size: 15px; }
.table-scroll { overflow-x: auto; border: var(--border); box-shadow: var(--shadow); background: var(--color-bg); }
.table-scroll table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.table-scroll caption { caption-side: top; text-align: left; padding: 14px 16px; font: 10px/1.6 var(--font-pixel); background: var(--color-panel); border-bottom: var(--border); }
.table-scroll thead tr { background: var(--color-panel); }
.table-scroll th, .table-scroll td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--color-border); }
.table-scroll thead th { border-bottom: var(--border); color: var(--color-gold); font-weight: 700; }
.table-scroll tbody th { font-weight: 600; }
.table-scroll td { color: var(--color-text-muted); }
.table-scroll tbody tr:last-child > * { border-bottom: 0; }
.table-hint { margin: 10px 0 0 !important; font-size: 13px; color: var(--color-text-muted); }
.btn-mail { max-width: 100%; overflow-wrap: anywhere; color: var(--color-gold-light); font-size: clamp(10px, 2.6vw, 12px); }

.policy-list { list-style: none !important; padding: 0 !important; gap: 14px !important; }
.policy-list a { display: flex; align-items: center; gap: 16px; padding: 16px 18px; background: var(--color-panel); border: var(--border); box-shadow: var(--shadow); color: var(--color-text); text-decoration: none; }
.policy-list a:hover { border-color: var(--color-gold); color: var(--color-text); }
.policy-list img { width: 56px; height: 56px; border: 2px solid #000; flex: none; }
.policy-list strong { display: block; font: 11px/1.6 var(--font-pixel); color: var(--color-gold-light); }
.policy-list span { font-size: 15px; color: var(--color-text-muted); }

/* 404 */
.notfound { position: relative; overflow: hidden; }
.notfound::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 46px, var(--color-bg) 46px 48px), repeating-linear-gradient(90deg, var(--color-panel) 0 94px, var(--color-bg) 94px 96px); opacity: .9; }
.notfound::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, rgba(242,181,68,.16) 0, rgba(13,11,18,.6) 38%, var(--color-bg) 75%); }
.notfound .container { position: relative; z-index: 1; padding-block: clamp(72px, 12vw, 128px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.notfound__code { margin: 0; font: clamp(56px, 14vw, 112px)/1 var(--font-pixel); color: var(--color-gold); text-shadow: 6px 6px 0 #000, -2px -2px 0 var(--color-blood); }
.notfound h1 { margin: 0; max-width: 22ch; font-size: clamp(15px, 3.4vw, 24px); line-height: 1.6; text-shadow: 4px 4px 0 #000; text-wrap: balance; }
.notfound p { margin: 0; max-width: 44ch; color: var(--color-text-muted); }

/* Footer */
.site-footer { border-top: var(--border); background: var(--color-bg); }
.site-footer::before { content: ""; display: block; height: 8px; background: repeating-linear-gradient(90deg, var(--color-border) 0 30px, var(--color-bg) 30px 32px); }
.site-footer .container { padding-top: 28px; padding-bottom: 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.site-footer__brand { margin: 0; display: flex; align-items: center; gap: 10px; color: var(--color-text-muted); font-size: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.site-footer ul a { display: flex; align-items: center; min-height: 44px; color: var(--color-text); font-size: 14px; }
.site-footer ul a:hover { color: var(--color-gold-light); }

@media (prefers-reduced-motion: reduce) {
  .kr-track, .kr-sprite { animation: none; }
  .kr-track { transform: translateX(12%); }
  .btn { transition: none; }
}