/* Battle Arena Masters (BAM) – site styles
   Dark navy, warm gold, subtle turquoise. Mobile first. No external fonts (privacy + speed). */

:root {
  --bg: #0a1020;
  --bg-alt: #0e1730;
  --surface: #131d38;
  --surface-2: #1a274a;
  --border: #2a3a66;
  --text: #e9edf7;
  --muted: #aab5cf;
  --gold: #f1c35e;
  --gold-strong: #e2a83a;
  --gold-ink: #1d1404;
  --teal: #4fd6cf;
  --teal-soft: rgba(79, 214, 207, .14);
  --success: #74e0a8;
  --danger: #ff8a8a;
  --radius: 14px;
  --radius-small: 8px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Trebuchet MS", "Avenir Next", system-ui, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--font);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
main:focus { outline: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: #8ef0ea; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; margin: 0 0 .5em; letter-spacing: .01em; }
h1 { font-size: clamp(2rem, 6vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.mt { margin-top: 2.5rem; }

.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 780px; }
.wrap.narrow { max-width: 820px; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--gold); color: var(--gold-ink); padding: 10px 16px; border-radius: var(--radius-small); font-weight: 700; }
.skip-link:focus { top: 12px; }

.demo-banner { background: #2a2210; color: #f6deaa; border-bottom: 1px solid #5a4818; text-align: center; font-size: .875rem; padding: 8px 20px; }

/* ---------- Header & navigation ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(10, 16, 32, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand-text { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: .04em; text-transform: uppercase; margin: 0; }
.brand-sub { color: var(--gold); }
.logo { display: block; max-width: 100%; height: auto; }
.brand .logo-wordmark { width: auto; height: 40px; }
.footer-logo { margin: 0 0 10px; }
.footer-logo .logo { width: auto; height: 48px; }
.nav-toggle { display: none; align-items: center; gap: 10px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-small); padding: 10px 14px; font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; content: ""; }
.nav-toggle-bars::before { position: absolute; top: -6px; }
.nav-toggle-bars::after { position: absolute; top: 6px; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.site-nav a, .linklike { display: block; padding: 10px 10px; border-radius: var(--radius-small); color: var(--text); text-decoration: none; font-weight: 600; font-size: .95rem; }
.site-nav a:hover { background: var(--surface); color: var(--text); }
.site-nav a[aria-current="page"] { color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }
.site-nav .nav-cta a { padding: 8px 14px; color: var(--gold-ink); }
.site-nav .nav-cta a[aria-current="page"] { box-shadow: 0 0 0 2px var(--text); color: var(--gold-ink); }
.linklike { background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer; }

/* With JS on small screens, the menu collapses behind a button. Without JS it simply wraps. */
@media (max-width: 1199px) {
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav { display: none; width: 100%; padding-bottom: 12px; }
  .js .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; }
  .site-nav a { padding: 12px 14px; font-size: 1.05rem; }
  .site-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--gold); background: var(--surface); }
  .site-nav .nav-cta { margin-top: 8px; }
  .site-nav .nav-cta a { text-align: center; }
}

/* ---------- Buttons & badges ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 20px; border-radius: 999px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; border: 2px solid transparent; line-height: 1.2; text-align: center; }
.btn-small { min-height: 38px; padding: 6px 14px; font-size: .9rem; }
.btn-gold, .btn-primary { background: var(--gold); color: var(--gold-ink); }
.btn-gold:hover, .btn-primary:hover { background: #ffd57f; color: var(--gold-ink); }
.btn-teal { background: var(--teal); color: #04201e; }
.btn-teal:hover { background: #86eee8; color: #04201e; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--gold); color: var(--text); }
.btn-danger { background: transparent; color: var(--danger); border-color: #7a3b3b; }
.btn-danger:hover { background: #3a1919; color: #ffb3b3; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.actions.center { justify-content: center; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); vertical-align: middle; }
.badge-demo, .badge-draft { background: #3a2c0c; border-color: #8a6a1e; color: #ffd98a; }
.badge-cat { color: var(--teal); border-color: rgba(79, 214, 207, .4); background: var(--teal-soft); }
.badge-featured { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.status-completed { background: rgba(116, 224, 168, .14); border-color: rgba(116, 224, 168, .5); color: var(--success); }
.status-in_progress { background: rgba(241, 195, 94, .16); border-color: rgba(241, 195, 94, .6); color: var(--gold); }
.status-planned { background: rgba(170, 181, 207, .12); border-color: rgba(170, 181, 207, .45); color: #cdd6ea; }
.version { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: .75em; font-size: .875rem; color: var(--muted); }
.meta-small { font-size: .875rem; color: var(--muted); margin: 0; }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .8rem; font-weight: 700; color: var(--gold); margin-bottom: .6em; }
.lead { font-size: 1.125rem; color: #cfd7ea; max-width: 62ch; }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(700px 400px at 85% 20%, rgba(79, 214, 207, .12), transparent 60%),
    radial-gradient(600px 400px at 10% 90%, rgba(241, 195, 94, .10), transparent 60%),
    linear-gradient(180deg, #0c1428, var(--bg));
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.hero-inner { display: grid; gap: 32px; padding-top: 40px; padding-bottom: 48px; align-items: center; }
.hero h1 { max-width: 16ch; }
.hero-stat { color: var(--muted); }
.hero-stat strong { color: var(--gold); font-size: 1.3rem; }
.hero-visual { display: flex; justify-content: center; }
.phone { width: min(300px, 78vw); border-radius: 34px; padding: 10px; background: #050912; border: 1px solid #2f3e68; box-shadow: 0 0 0 1px rgba(241, 195, 94, .25), 0 30px 60px rgba(0, 0, 0, .55), 0 0 80px rgba(79, 214, 207, .12); }
.phone img { border-radius: 26px; width: 100%; }
@media (min-width: 900px) {
  .hero-inner { grid-template-columns: 1.15fr .85fr; padding-top: 72px; padding-bottom: 80px; }
  .phone { transform: rotate(2deg); }
}

/* ---------- Sections ---------- */
.section { padding: 56px 0; }
.section-alt { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-head { margin-bottom: 24px; }
.section-head h2 .badge { font-size: .95rem; padding: 6px 14px; }
.page-head { padding: 48px 0 24px; background: linear-gradient(180deg, #0d1630, var(--bg)); border-bottom: 1px solid var(--border); }
.article .page-head { margin-bottom: 32px; }
.breadcrumbs { font-size: .9rem; margin-bottom: 1em; }
.breadcrumbs a::before { content: "← "; }
.mini-title { font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 12px; }

.two-col, .split { display: grid; gap: 32px; }
@media (min-width: 900px) {
  .two-col { grid-template-columns: 1.1fr .9fr; align-items: start; }
  .split { grid-template-columns: 1fr 1fr; }
}

.grid { display: grid; gap: 20px; }
@media (min-width: 640px) { .grid-2, .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Cards ---------- */
.card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s ease, transform .15s ease; }
.card:hover { border-color: #3d5190; }
.card:focus-within { border-color: var(--gold); }
.card-body { padding: 20px; flex: 1; }
.card-body > :last-child { margin-bottom: 0; }
.card h3 a { color: var(--text); text-decoration: none; }
.card h3 a:hover { color: var(--gold); }
.card h3 a.stretched::after { content: ""; position: absolute; inset: 0; }
.card-media { background: #070c19; aspect-ratio: 16 / 10; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.card-large .card-media { aspect-ratio: 16 / 9; }
.card-milestone { border-left: 4px solid var(--border); }
.status-border-completed { border-left-color: var(--success); }
.status-border-in_progress { border-left-color: var(--gold); }
.status-border-planned { border-left-color: #6f7da0; }

.empty { border: 1px dashed var(--border); border-radius: var(--radius); padding: 28px; text-align: center; color: var(--muted); }
.empty p { margin: 0; }

.arrow-link { font-weight: 700; display: inline-block; margin-top: 16px; }
.arrow-link::after { content: " →"; }
.arrow-link.back::after { content: ""; }
.arrow-link.back::before { content: "← "; }
.link-list { list-style: none; padding: 0; margin: 16px 0 0; }
.link-list li { padding: 10px 0; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }

/* Heroes list on the home page */
.hero-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hero-chip { display: flex; gap: 16px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.hero-chip h3 { margin-bottom: .25em; }
.hero-chip p { margin: 0; color: #cfd7ea; }
.chip-icon { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.25rem; color: #fff; border: 3px solid rgba(255, 255, 255, .85); }
.chip-brawler, .chip-orange { --hero: #d9772f; }
.chip-mage, .chip-purple { --hero: #8b45c7; }
.chip-hunter, .chip-green { --hero: #2f9e57; }
.chip-gold { --hero: #b98a22; }
.chip-teal { --hero: #239a94; }
.chip-blue { --hero: #3d6fd6; }
.chip-red { --hero: #c8463f; }
.chip-icon { background: var(--hero, var(--surface-2)); }
.hero-chip h3 a { color: var(--text); text-decoration: none; }
.hero-chip h3 a:hover, .hero-chip h3 a:focus-visible { color: var(--gold); text-decoration: underline; }
.hero-role { margin: 0 0 .35em; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }

.shot-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, 1fr); gap: 16px; overflow-x: auto; padding: 32px 0 12px; scroll-snap-type: x mandatory; }
.shot { margin: 0; scroll-snap-align: start; }
.shot img { border-radius: 18px; border: 1px solid var(--border); }
.shot a:hover img { border-color: var(--gold); }

/* Community invitation */
.invite { background: radial-gradient(600px 300px at 50% 0, rgba(241, 195, 94, .14), transparent 70%), var(--bg); text-align: center; }
.invite-inner { max-width: 760px; }
.invite .lead { margin: 0 auto; }
.support-teaser { display: grid; gap: 16px; align-items: center; }
@media (min-width: 900px) { .support-teaser { grid-template-columns: 1fr auto; } }

/* ---------- Roadmap ---------- */
.legend { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 12px 24px; color: var(--muted); font-size: .9rem; }
.legend .badge { margin-right: 6px; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 640px) { .timeline { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .timeline { grid-template-columns: repeat(3, 1fr); } }
.roadmap-group + .roadmap-group { padding-top: 0; }

/* ---------- Articles ---------- */
.prose { font-size: 1.0625rem; }
.prose h3 { margin-top: 1.6em; color: var(--gold); }
.prose ul { padding-left: 1.25em; }
.prose li { margin-bottom: .4em; }
.prose a { color: var(--teal); }
.dev-notes { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--teal); border-radius: var(--radius); padding: 20px 24px; margin: 32px 0; }
.dev-notes h2 { font-size: 1.2rem; }
.related-milestones { color: var(--muted); border-top: 1px solid var(--border); padding-top: 16px; }

.gallery { display: grid; gap: 16px; margin: 24px 0; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.gallery-single { grid-template-columns: 1fr; }
.gallery figure { margin: 0; }
.gallery img { border-radius: var(--radius); border: 1px solid var(--border); width: 100%; max-height: 640px; object-fit: contain; background: #070c19; }
.gallery figcaption, .video figcaption { font-size: .875rem; color: var(--muted); margin-top: 6px; }

.videos { display: grid; gap: 20px; margin: 24px 0; }
.video { margin: 0; }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #0d1733, #1a274a); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-start { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text); text-decoration: none; padding: 16px; text-align: center; }
.video-start:hover .play-icon { background: #ffd57f; }
.play-icon { width: 68px; height: 68px; border-radius: 50%; background: var(--gold); position: relative; }
.play-icon::after { content: ""; position: absolute; left: 27px; top: 20px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent var(--gold-ink); }
.video-label { font-weight: 700; }
.video-note { font-size: .8rem; color: var(--muted); }

/* ---------- Filters ---------- */
.filters ul { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.filters a { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: .9rem; font-weight: 600; min-height: 40px; }
.filters a:hover { border-color: var(--teal); }
.filters a[aria-current] { background: var(--teal); color: #04201e; border-color: var(--teal); }
.sort-links { margin: 16px 0 24px; color: var(--muted); }
.sort-links a[aria-current] { color: var(--gold); font-weight: 700; text-decoration: none; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 32px; color: var(--muted); }

/* ---------- Ideas ---------- */
.idea-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.card-idea { flex-direction: row; align-items: stretch; }
.card-idea .card-body { order: 2; }
.vote { order: 1; flex: none; display: flex; padding: 16px 0 16px 16px; }
.vote-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 64px; min-height: 72px; border-radius: var(--radius-small); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; font: inherit; }
.vote-btn:hover { border-color: var(--gold); color: var(--gold); }
.vote-arrow { font-size: .9rem; color: var(--gold); }
.vote-count { font-weight: 800; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.idea-detail { display: flex; gap: 20px; align-items: flex-start; }
.idea-detail .prose { flex: 1; order: 2; }
.idea-detail .vote { padding: 0; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 18px; margin-top: 16px; }
.field { display: grid; gap: 6px; margin: 0; border: 0; padding: 0; min-width: 0; }
.field label, .field legend { font-weight: 700; }
.req, .opt { font-weight: 400; color: var(--muted); font-size: .875rem; }
input, select, textarea { font: inherit; color: var(--text); background: #0b1328; border: 1px solid #3a4c80; border-radius: var(--radius-small); padding: 12px 14px; width: 100%; min-height: 46px; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); outline: 2px solid var(--gold); outline-offset: 0; }
input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; accent-color: var(--gold); flex: none; margin-top: 2px; }
input[type="file"] { padding: 10px; }
.field.check { display: flex; gap: 12px; align-items: flex-start; }
.field.check label { font-weight: 400; }
.hint { font-size: .875rem; color: var(--muted); margin: 0; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form button[type="submit"] { justify-self: start; }

.flashes { padding-top: 20px; }
.flash { border-radius: var(--radius-small); padding: 14px 18px; margin-bottom: 10px; border: 1px solid; font-weight: 600; }
.flash-success { background: rgba(116, 224, 168, .12); border-color: rgba(116, 224, 168, .55); color: #b8f3d3; }
.flash-error { background: rgba(255, 138, 138, .12); border-color: rgba(255, 138, 138, .55); color: #ffc4c4; }
.flash-info { background: var(--teal-soft); border-color: rgba(79, 214, 207, .55); color: #c3f5f2; }

/* ---------- Comments ---------- */
.comments { margin-top: 48px; border-top: 1px solid var(--border); padding-top: 32px; }
.comments .count { color: var(--muted); font-weight: 400; }
.comment-list { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 14px; }
.comment { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.comment-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: .875rem; margin-bottom: 6px; }
.comment-meta strong { color: var(--text); font-size: 1rem; }
.comment-body p:last-child { margin: 0; }
.comment-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.comment-form h3 { margin: 0; }

/* ---------- About ---------- */
.profile { flex-direction: column; }
.profile-photo { padding: 24px 24px 0; }
.profile-photo img { width: 140px; height: 140px; object-fit: cover; border-radius: 50%; border: 3px solid var(--gold); }
.avatar { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; font-size: 3rem; font-weight: 800; color: var(--gold); background: var(--surface-2); border: 3px solid var(--gold); font-family: var(--font-display); }
.role { color: var(--teal); font-weight: 700; }

/* ---------- Support ---------- */
.notice { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--gold); border-radius: var(--radius); padding: 22px 24px; }
.notice h2 { font-size: 1.3rem; }
.checklist { padding-left: 0; list-style: none; }
.checklist li { position: relative; padding-left: 30px; margin-bottom: .7em; }
.checklist li::before { content: "✦"; position: absolute; left: 4px; color: var(--gold); }
.placeholder-box { border: 1px dashed #8a6a1e; background: rgba(58, 44, 12, .5); border-radius: var(--radius-small); padding: 12px 16px; color: #f6deaa; }
.swish-number { font-size: 1.6rem; font-weight: 800; letter-spacing: .06em; color: var(--gold); font-variant-numeric: tabular-nums; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); background: #070c19; padding: 40px 0 24px; margin-top: 0; }
.footer-inner { display: grid; gap: 24px; margin-bottom: 16px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--text); }
@media (min-width: 900px) { .footer-inner { grid-template-columns: 1fr auto; align-items: start; } }

/* Small-screen header: keep the longer name (Battle Arena Masters) and the menu button on one row */
@media (max-width: 480px) {
  .header-inner { gap: 8px; }
  .brand { gap: 8px; min-width: 0; }
  .brand .logo-wordmark { height: 34px; }
  .brand .logo-symbol { width: 30px; height: 30px; }
  .brand-text { font-size: .86rem; letter-spacing: .02em; }
  .nav-toggle { padding: 8px 12px; }
}
@media (max-width: 374px) {
  .nav-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nav-toggle { min-width: 44px; }
}
.vote { align-items: flex-start; }


/* =====================================================================
   Website 2.1 – home, heroes, hero pages, community, About us, mobile
   ===================================================================== */
.badge-placeholder { background: #22304f; border-color: #4a5f8f; color: #dfe6f7; }
.section { padding: 40px 0; }
.section-tight { padding: 28px 0; }
@media (min-width: 900px) { .section { padding: 64px 0; } .section-tight { padding: 40px 0; } }
.page-head-compact { padding: 32px 0 20px; }
.page-head-compact .lead { margin-bottom: .5em; }
.section-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; }
.section-head-row h2 { margin: 0; }
.section-head-row .arrow-link { margin: 0 0 4px; }
.source-note { margin-top: 20px; }

/* ---------- Home: first screen ---------- */
.home-hero {
  background:
    radial-gradient(520px 320px at 80% 30%, rgba(79, 214, 207, .14), transparent 65%),
    radial-gradient(520px 360px at 5% 100%, rgba(241, 195, 94, .12), transparent 60%),
    linear-gradient(180deg, #0c1428, var(--bg));
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.home-hero-inner { display: grid; gap: 14px; padding-top: 18px; padding-bottom: 28px; grid-template-areas: "top" "visual" "bottom"; }
.home-hero-top { grid-area: top; }
.home-hero-bottom { grid-area: bottom; }
.home-hero-visual { grid-area: visual; margin: 0; }
.home-hero .eyebrow { font-size: .75rem; letter-spacing: .14em; margin-bottom: .5em; }
.game-title { font-size: clamp(1.9rem, 9.4vw, 4.6rem); line-height: 1.02; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 .2em; max-width: none; }
.game-title span { color: var(--gold); display: block; }
.slogan { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 4.6vw, 1.7rem); color: var(--teal); margin: 0; line-height: 1.3; }
.home-actions { margin: 0 0 14px; gap: 10px; }
.home-actions .btn { flex: 1 1 140px; padding: 10px 16px; }
.home-lead { color: #cfd7ea; margin: 0 0 12px; max-width: 46ch; }
.fact-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fact-row li { border: 1px solid var(--border); background: rgba(19, 29, 56, .7); border-radius: 999px; padding: 6px 12px; font-size: .875rem; color: #cfd7ea; }
.fact-row strong { color: var(--gold); font-size: 1rem; margin-right: 2px; }
.fact-row a { color: inherit; text-decoration: none; display: inline-block; min-height: 24px; }
.fact-row a:hover { color: var(--text); text-decoration: underline; }
.phone { width: 100%; border-radius: 18px; padding: 6px; background: #050912; border: 1px solid #2f3e68; box-shadow: 0 0 0 1px rgba(241, 195, 94, .25), 0 20px 40px rgba(0, 0, 0, .5), 0 0 60px rgba(79, 214, 207, .12); }
.phone img { border-radius: 13px; width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: center 42%; }
.home-hero-visual figcaption { font-size: .78rem; color: var(--muted); margin-top: 6px; text-align: center; }
@media (max-width: 479px) { .eyebrow-extra { display: none; } }
@media (min-width: 700px) {
  .home-hero-inner { grid-template-columns: 1.15fr .85fr; grid-template-areas: "top visual" "bottom visual"; grid-template-rows: auto 1fr; column-gap: 48px; row-gap: 20px; padding-top: 48px; padding-bottom: 56px; align-items: start; }
  .home-hero-top { align-self: end; }
  .home-hero-visual { align-self: center; justify-self: center; }
  .phone { width: min(300px, 36vw); border-radius: 34px; padding: 10px; transform: rotate(2deg); }
  .phone img { border-radius: 26px; aspect-ratio: 9 / 16; }
  .home-actions .btn { flex: 0 0 auto; padding: 12px 24px; }
  .home-lead { font-size: 1.125rem; }
}
@media (min-width: 1100px) { .home-hero-inner { padding-top: 64px; padding-bottom: 72px; } }

.game-split, .community-split { display: grid; gap: 24px; }
.game-split > *, .community-split > *, .workshop > *, .story-grid > *, .hero-page-grid > * { min-width: 0; }
@media (min-width: 900px) {
  .game-split { grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; }
  .community-split { grid-template-columns: 1.1fr .9fr; align-items: start; gap: 48px; }
}
.shot-strip { grid-auto-columns: minmax(150px, 1fr); padding: 0 0 8px; gap: 12px; }
.workshop { display: grid; gap: 24px; }
@media (min-width: 760px) { .workshop { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .workshop { grid-template-columns: repeat(3, 1fr); } }
.workshop .mini-title { margin-top: 0; }
.invite { text-align: left; }
.invite .lead { margin: 0 0 16px; }
.flow-mini { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.flow-mini li { font-size: .85rem; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.flow-mini span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--gold-ink); font-weight: 800; font-size: .75rem; margin-right: 4px; }
.support-strip { background: var(--bg-alt); border-top: 1px solid var(--border); padding: 28px 0; }
.support-strip h2 { font-size: 1.35rem; margin-bottom: .25em; }
.support-strip p { margin: 0; }

/* ---------- Hero cards (catalog + home) ---------- */
.hero-grid { display: grid; gap: 14px; }
@media (min-width: 640px) { .hero-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: repeat(3, 1fr); } }
.hero-card { border-top: 4px solid var(--hero, var(--gold)); scroll-margin-top: 90px; }
.hero-card:hover, .hero-card:focus-within { border-color: var(--hero, var(--gold)); border-top-color: var(--hero, var(--gold)); transform: translateY(-2px); }
.hero-card .card-body { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.hero-card-name { font-size: 1.4rem; margin: 0; }
.hero-card-summary { margin: 0; color: #cfd7ea; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hero-card-link { align-self: flex-start; margin-top: auto; min-height: 44px; }
.hero-card-link.stretched::after { content: ""; position: absolute; inset: 0; }
.hero-card:hover .hero-card-link { border-color: var(--gold); }
.hero-media { margin: 0; position: relative; background: #0c1428; }
.hero-media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 85%; }
.hero-media figcaption { padding: 6px 14px; font-size: .78rem; color: var(--muted); border-bottom: 1px solid var(--border); }
.hero-media-empty { display: grid; place-items: center; align-content: center; gap: 10px; aspect-ratio: 16 / 10; padding: 16px; background: repeating-linear-gradient(135deg, #111b33 0 14px, #0e172d 14px 28px); }
.hero-media-empty figcaption { border: 0; text-align: center; padding: 0; }
.hero-token { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; font: 800 2.4rem/1 var(--font-display); color: #fff; background: var(--hero, var(--surface-2)); border: 5px solid #4b8cf0; }
.hero-token-small { position: absolute; top: 10px; left: 10px; width: 42px; height: 42px; font-size: 1.2rem; border-width: 3px; border-color: rgba(255, 255, 255, .85); box-shadow: var(--shadow); }
.hero-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.hero-tag { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; color: var(--teal); background: var(--teal-soft); border: 1px solid rgba(79, 214, 207, .35); }
.hero-tag-difficulty { color: var(--gold); background: rgba(241, 195, 94, .1); border-color: rgba(241, 195, 94, .4); }
/* Phones: image beside the text keeps each card short */
@media (max-width: 639px) {
  .hero-card { display: grid; grid-template-columns: 116px 1fr; border-top: 0; border-left: 4px solid var(--hero, var(--gold)); }
  .hero-card .hero-media { height: 100%; }
  .hero-card .hero-media img { height: 100%; aspect-ratio: auto; min-height: 150px; }
  .hero-card .hero-media figcaption { display: none; }
  .hero-card .hero-token-small { width: 34px; height: 34px; font-size: 1rem; top: 8px; left: 8px; }
  .hero-card .hero-media-empty { aspect-ratio: auto; height: 100%; }
  .hero-card .hero-media-empty .hero-token { width: 56px; height: 56px; font-size: 1.5rem; border-width: 3px; }
  .hero-card .hero-media-empty figcaption { display: block; font-size: .7rem; }
  .hero-card .card-body { padding: 12px 14px; gap: 6px; }
  .hero-card-name { font-size: 1.2rem; }
  .hero-card-summary { font-size: .925rem; -webkit-line-clamp: 2; }
}

/* ---------- Hero page ---------- */
.hero-page-head { padding: 20px 0 28px; border-bottom: 1px solid var(--border); background: radial-gradient(520px 300px at 85% 30%, color-mix(in srgb, var(--hero, var(--teal)) 22%, transparent), transparent 70%), linear-gradient(180deg, #0d1630, var(--bg)); }
.hero-page-grid { display: grid; gap: 20px; }
.hero-page-intro h1 { margin-bottom: .25em; }
.hero-page-intro .hero-tags { margin-bottom: 12px; }
.hero-identity { font-family: var(--font-display); font-size: 1.3rem; color: var(--gold); margin: 0 0 .5em; }
.hero-page-media .hero-media { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); border-top: 4px solid var(--hero, var(--gold)); }
.hero-page-media .hero-media img { aspect-ratio: 3 / 2; object-position: center 80%; }
@media (min-width: 900px) {
  .hero-page-head { padding: 28px 0 48px; }
  .hero-page-grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; }
}
.hero-page-body { padding-top: 32px; padding-bottom: 48px; }
.hero-page-body > section { margin-bottom: 32px; }
.hero-page-body h2 { font-size: 1.4rem; }
.abilities { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .abilities { grid-template-columns: repeat(3, 1fr); } }
.ability { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--teal); border-radius: var(--radius-small); padding: 14px 16px; }
.ability-special { border-left-color: var(--gold); }
.ability-passive { border-left-color: var(--hero, #8b9bd0); }
.ability h3 { display: flex; flex-direction: column; gap: 2px; font-size: 1.15rem; margin: 0 0 6px; }
.ability-kind { font: 700 .75rem/1.4 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }
.ability-name { text-transform: uppercase; letter-spacing: .03em; }
.ability p { margin: 0; color: #cfd7ea; }
.hero-page-split { display: grid; gap: 8px 32px; margin-bottom: 8px; }
@media (min-width: 900px) { .hero-page-split { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0; }
@media (min-width: 400px) { .hero-stats { grid-template-columns: repeat(3, 1fr); } }
.hero-stats div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-small); padding: 8px 12px; }
.hero-stats dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.hero-stats dd { margin: 0; font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.hero-tip { background: var(--teal-soft); border-left: 3px solid var(--teal); padding: 12px 14px; border-radius: 0 var(--radius-small) var(--radius-small) 0; margin: 0; font-weight: 600; }
.hero-others { border-top: 1px solid var(--border); padding-top: 20px; margin-top: 8px; }
.hero-others ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .hero-others ul { grid-template-columns: repeat(2, 1fr); } }
.hero-others a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 64px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-small); color: var(--text); text-decoration: none; }
.hero-others a:hover, .hero-others a:focus-visible { border-color: var(--gold); }
.hero-others .chip-icon { width: 40px; height: 40px; font-size: 1.1rem; }
.hero-others-role { display: block; font-size: .8rem; color: var(--teal); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Community ---------- */
.idea-status { white-space: nowrap; }
.idea-status-under_review { color: #d4dbec; background: rgba(170, 181, 207, .12); border-color: rgba(170, 181, 207, .45); }
.idea-status-exploring { color: var(--teal); background: var(--teal-soft); border-color: rgba(79, 214, 207, .5); }
.idea-status-planned { color: var(--gold); background: rgba(241, 195, 94, .14); border-color: rgba(241, 195, 94, .55); }
.idea-status-implemented { color: var(--success); background: rgba(116, 224, 168, .14); border-color: rgba(116, 224, 168, .55); }
.idea-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: flow; }
.idea-flow li { counter-increment: flow; display: grid; grid-template-columns: 32px 1fr; column-gap: 10px; align-items: start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-small); padding: 10px 12px; }
.idea-flow li::before { content: counter(flow); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--gold-ink); font-weight: 800; }
.idea-flow strong { font-family: var(--font-display); }
.idea-flow span { color: #cfd7ea; font-size: .9rem; display: flex; flex-wrap: wrap; gap: 4px; }
@media (min-width: 900px) { .idea-flow { grid-template-columns: repeat(4, 1fr) 1.6fr; } }
.idea-list-compact { gap: 12px; }
.idea-roadmap { font-size: .9rem; color: var(--muted); }
.filters-status ul { margin-top: 10px; }
.filters .count { color: inherit; opacity: .8; font-weight: 400; }
.sort-links a { display: inline-block; padding: 10px 8px; min-height: 44px; }
.idea-status-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin: 28px 0; }
.idea-status-panel h2 { font-size: 1.2rem; }
.status-steps { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.status-steps li { font-size: .8rem; font-weight: 700; text-align: center; padding: 8px 4px; border-radius: 6px; background: var(--surface-2); color: var(--muted); }
.status-steps li.is-done { background: rgba(116, 224, 168, .12); color: #b8f3d3; }
.status-steps li.is-current { background: var(--gold); color: var(--gold-ink); }
.milestone-ideas { margin: 32px 0; }

/* ---------- About us ---------- */
.about-head { padding: 32px 0 24px; }
.about-head-inner { display: flex; gap: 32px; align-items: center; justify-content: space-between; }
.about-mark { flex: none; width: 160px; height: 160px; }
@media (max-width: 699px) { .about-mark { display: none; } }
.about-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.about-jump a { display: inline-flex; align-items: center; padding: 8px 14px; min-height: 44px; border: 1px solid var(--border); border-radius: 999px; color: var(--text); text-decoration: none; background: var(--surface); font-weight: 600; font-size: .95rem; }
.about-jump a:hover, .about-jump a:focus-visible { border-color: var(--gold); color: var(--gold); }
.about-section { scroll-margin-top: 72px; }
.story-grid { display: grid; gap: 24px; }
@media (min-width: 900px) { .story-grid { grid-template-columns: 1.6fr 1fr; gap: 48px; align-items: start; } }
.story-prose { font-size: 1.1rem; max-width: 65ch; }
.draft-note { font-size: .9rem; color: #f6deaa; border-left: 3px solid #8a6a1e; padding-left: 12px; }
.facts-card { background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--gold); border-radius: var(--radius); padding: 18px 20px; }
.facts-card h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.facts-card dl { margin: 0; display: grid; gap: 10px; }
.facts-card dt { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.facts-card dd { margin: 0; font-weight: 700; font-size: 1.05rem; }
.profiles { display: grid; gap: 16px; }
@media (min-width: 900px) { .profiles { grid-template-columns: 1fr 1fr; gap: 24px; } }
.profile { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; scroll-margin-top: 80px; }
.profile-photo { padding: 0; }
.profile-photo img { width: 72px; height: 72px; object-fit: cover; border-radius: 50%; border: 3px solid var(--gold); }
.avatar { width: 72px; height: 72px; font-size: 2rem; }
.profile-body h3 { font-size: 1.4rem; margin: 0 0 2px; }
.profile-body .role { margin: 0 0 8px; }
.profile-body .prose { font-size: 1rem; }
@media (min-width: 640px) {
  .profile { grid-template-columns: 112px 1fr; gap: 24px; padding: 24px; }
  .profile-photo img, .avatar { width: 112px; height: 112px; }
  .avatar { font-size: 2.8rem; }
}
.vision ul { list-style: none; padding: 0; display: grid; gap: 12px; }
@media (min-width: 760px) { .vision ul { grid-template-columns: 1fr 1fr; } }
.vision li { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--gold); border-radius: var(--radius-small); padding: 14px 16px; margin: 0; }
.vision > p:first-child { font-family: var(--font-display); font-size: 1.3rem; color: var(--text); max-width: 40ch; }
.journey { list-style: none; margin: 0 0 24px; padding: 0 0 0 26px; border-left: 2px solid var(--border); display: grid; gap: 14px; }
.journey-step { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-small); padding: 12px 16px; }
.journey-step::before { content: ""; position: absolute; left: -36px; top: 16px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-alt); border: 3px solid var(--success); }
.journey-step.is-now { border-color: rgba(241, 195, 94, .6); }
.journey-step.is-now::before { border-color: var(--gold); background: var(--gold); }
.journey-step h3 { margin: 0 0 .2em; font-size: 1.1rem; }
.journey-step h3 a { color: var(--text); }
.journey-step p { margin: 0; color: #cfd7ea; font-size: .95rem; }
.journey-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px !important; }
.journey-version { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.work-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: work; }
@media (min-width: 760px) { .work-steps { grid-template-columns: repeat(3, 1fr); } }
.work-steps li { counter-increment: work; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-small); padding: 14px 16px; display: grid; gap: 4px; }
.work-steps li::before { content: counter(work); color: var(--gold); font: 800 1.4rem/1 var(--font-display); }
.work-steps span { color: #cfd7ea; }

/* ---------- Admin preview banner ---------- */
.preview-banner { background: var(--teal); color: #04201e; text-align: center; padding: 10px 20px; font-size: .95rem; }
.preview-banner a { color: #04201e; font-weight: 700; }

/* ---------- Footer: comfortable tap targets ---------- */
.site-footer ul { gap: 0 8px; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
@media (min-width: 360px) and (max-width: 899px) { .facts-card dl { grid-template-columns: 1fr 1fr; } }
/* Phones: filters become one swipeable row instead of a tall block of pills */
@media (max-width: 639px) {
  .filters ul { flex-wrap: nowrap; overflow-x: auto; margin-right: -20px; padding: 2px 20px 6px 2px; scrollbar-width: thin; }
  .filters li { flex: none; }
  .filters a { min-height: 44px; display: inline-flex; align-items: center; }
  .idea-flow { grid-template-columns: 1fr 1fr; gap: 6px; }
  .idea-flow li { padding: 8px 10px; grid-template-columns: 26px 1fr; column-gap: 8px; }
  .idea-flow li::before { width: 24px; height: 24px; font-size: .85rem; }
  .idea-flow li:last-child { grid-column: 1 / -1; }
  .idea-flow span { font-size: .82rem; }
}
.hero-page-split { margin-bottom: 32px; }
.hero-page-body .gallery { max-width: 720px; }
.hero-page-body .gallery img { max-height: 560px; object-fit: contain; }
.hero-others .mini-title { font-size: 1rem; color: var(--text); }
/* Stand-alone links get a full-size tap target */
.arrow-link, .breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumbs { margin-bottom: .25em; }
.page-head-compact h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: .3em; }
@media (min-width: 900px) { .page-head-compact { padding: 36px 0 24px; } }
/* Catalog cards: the capture label sits on the image as one short line */
.hero-card .hero-media figcaption { position: absolute; left: 0; right: 0; bottom: 0; border: 0; padding: 4px 12px; background: rgba(7, 12, 25, .88); color: #c3cbe0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 640px) { .hero-card .hero-media img { object-position: center 72%; } }
/* Narrow phones: photo above the text so the biography keeps a readable line length */
@media (max-width: 479px) {
  .profile { grid-template-columns: 1fr; gap: 10px; padding: 16px; }
  .profile-photo img, .avatar { width: 56px; height: 56px; }
  .avatar { font-size: 1.6rem; }
  .journey { padding-left: 20px; }
  .journey-step::before { left: -30px; }
  .vision li, .work-steps li { padding: 12px 14px; }
}

/* =====================================================================
   Website 2.2 – behind the scenes, idea progress, roadmap, About, artwork
   ===================================================================== */
/* Category colours shared by badges and card edges */
.bts-funny { --cat: #f1c35e; }
.bts-bugs { --cat: #ff8a7a; }
.bts-testing { --cat: #4fd6cf; }
.bts-art { --cat: #c59bff; }
.bts-stories { --cat: #8fb4ff; }
.card-bts, .bts-featured { border-top: 3px solid var(--cat, var(--border)); }
.card-bts .badge-cat, .bts-featured .badge-cat, .bts-article .badge-cat { color: var(--cat, var(--teal)); border-color: color-mix(in srgb, var(--cat, var(--teal)) 45%, transparent); background: color-mix(in srgb, var(--cat, var(--teal)) 12%, transparent); }
.badge-video { color: #dfe6f7; border-color: #4a5f8f; background: #22304f; }
.badge-video::before { content: "▶ "; font-size: .7em; }
.badge-link { text-decoration: none; min-height: 24px; }
.badge-link:hover { text-decoration: underline; }
.card-bts .meta, .bts-featured .meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.card-bts time, .bts-featured time { font-size: .85rem; color: var(--muted); }
.bts-grid { gap: 16px; }
@media (min-width: 640px) { .bts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .bts-grid { grid-template-columns: repeat(3, 1fr); } }
.bts-featured .card-body { padding: 18px 20px; gap: 8px; }
.bts-featured h2 { font-size: clamp(1.4rem, 5vw, 2rem); margin: 0; }
.bts-featured h2 a { color: var(--text); text-decoration: none; }
.bts-featured:hover h2 a, .bts-featured:focus-within h2 a { text-decoration: underline; }
.bts-featured-summary { margin: 0; color: #cfd7ea; font-size: 1.05rem; max-width: 60ch; }
.bts-featured-more { margin: 4px 0 0; font-weight: 700; color: var(--gold); }
.bts-featured-more::after { content: " →"; }
@media (min-width: 800px) {
  .bts-featured { display: grid; grid-template-columns: 1.1fr 1fr; }
  .bts-featured-noimg { grid-template-columns: 1fr; }
  .bts-featured .card-media { aspect-ratio: auto; min-height: 280px; }
  .bts-featured .card-body { padding: 28px 32px; justify-content: center; }
}
.bts-article .page-head .lead { margin-top: .25em; }

/* Your ideas, our progress */
.progress-board { display: grid; gap: 12px; margin-top: 16px; }
@media (min-width: 640px) { .progress-board { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .progress-board { grid-template-columns: repeat(4, 1fr); } }
.progress-lane { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-small); padding: 14px 16px; border-top: 3px solid var(--lane, var(--border)); }
.lane-under_review { --lane: #8b9bd0; }
.lane-exploring { --lane: var(--teal); }
.lane-planned { --lane: var(--gold); }
.lane-implemented { --lane: var(--success); }
.progress-lane h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 1rem; margin: 0 0 6px; }
.lane-count { font: 700 .9rem/1 var(--font); color: var(--text); }
.lane-help { font-size: .875rem; color: var(--muted); margin: 0 0 8px; }
.lane-ideas { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lane-ideas li { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; border-top: 1px solid var(--border); }
.lane-ideas a { display: block; padding: 10px 0; min-height: 44px; color: var(--text); font-weight: 600; text-decoration: none; }
.lane-ideas a:hover, .lane-ideas a:focus-visible { color: var(--gold); text-decoration: underline; }
.lane-votes { flex: none; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.lane-empty { margin: 0; font-size: .9rem; color: var(--muted); }
.lane-all { margin: 6px 0 0; }
.lane-all a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.activity { margin-top: 20px; }
.activity-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-left: 2px solid var(--border); }
.activity-list li { display: grid; gap: 2px; padding: 8px 0 8px 16px; position: relative; }
.activity-list li::before { content: ""; position: absolute; left: -6px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
@media (min-width: 640px) { .activity-list li { grid-template-columns: 120px 1fr; gap: 12px; } }
.activity-list time { font-size: .875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.activity-road { display: block; font-size: .875rem; color: var(--muted); }
.activity-empty { color: var(--muted); margin: 0; }

/* Roadmap */
.roadmap-jump ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.roadmap-jump a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; font-weight: 600; }
.roadmap-jump a:hover, .roadmap-jump a:focus-visible { border-color: var(--gold); }
.jump-count { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 999px; font-weight: 800; background: var(--surface-2); }
.jump-in_progress .jump-count { background: var(--gold); color: var(--gold-ink); }
.jump-completed .jump-count { background: rgba(116, 224, 168, .18); color: var(--success); }
.roadmap-focus, .roadmap-group { scroll-margin-top: 72px; }
.roadmap-focus { background: radial-gradient(600px 260px at 90% 0%, rgba(241, 195, 94, .1), transparent 70%); }
.focus-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 900px) { .focus-list { grid-template-columns: repeat(2, 1fr); } .focus-list li:only-child { grid-column: 1 / -1; } }
.focus-list .card-milestone { border-color: rgba(241, 195, 94, .45); }
@media (min-width: 900px) { .focus-list li:only-child .card-milestone { display: grid; grid-template-columns: 1fr 1fr; } .focus-list li:only-child .card-media { aspect-ratio: auto; min-height: 240px; } }
.focus-latest { margin: 14px 0 0; }
.milestone-links { margin: 6px 0 0; font-size: .875rem; color: var(--teal); font-weight: 600; }
.planned-list { list-style: none; padding: 0; margin: 0; }
.done-list, .history-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 900px) { .done-list, .history-list { grid-template-columns: repeat(2, 1fr); column-gap: 32px; } }
.done-list li, .history-list li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--border); }
.done-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(116, 224, 168, .16); color: var(--success); font-weight: 800; margin-top: 6px; }
.done-list h3, .history-list h3 { font-size: 1.05rem; margin: 0; }
.done-list h3 a, .history-list h3 a { display: inline-flex; align-items: center; min-height: 40px; color: var(--text); }
.done-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.done-meta .milestone-links { margin: 0; }
.roadmap-note { margin-top: 24px; }
.milestone-status-note { color: #cfd7ea; margin: 0; }
.pager-milestones { display: grid; gap: 10px; margin: 32px 0 8px; }
@media (min-width: 640px) { .pager-milestones { grid-template-columns: 1fr 1fr; } .pager-next { grid-column: 2; text-align: right; } }
.pager-milestones a { display: block; padding: 12px 16px; min-height: 44px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface); color: var(--text); text-decoration: none; font-weight: 600; }
.pager-milestones a:hover, .pager-milestones a:focus-visible { border-color: var(--gold); }
.pager-label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.pager-prev .pager-label::before { content: "← "; }
.pager-next .pager-label::after { content: " →"; }

/* About us: readability */
.story-prose > p:first-child { font-size: 1.2rem; color: var(--text); }
.story-prose p { line-height: 1.7; }
.profile-body .prose p { line-height: 1.65; max-width: 62ch; }
.profile.is-placeholder .profile-body .prose { color: #b9c3dc; font-style: italic; border-left: 3px solid #4a5f8f; padding-left: 12px; }
.profile-fav { display: inline-flex; gap: 6px; align-items: center; margin-top: 8px; font-size: .9rem; color: var(--muted); }
@media (max-width: 639px) {
  .about-jump { flex-wrap: nowrap; overflow-x: auto; margin-right: -20px; padding: 2px 20px 6px 0; }
  .about-jump a { flex: none; }
}

/* Hero artwork (when real artwork replaces in-game captures) */
.hero-media-art img { object-position: center 20%; }
@media (min-width: 640px) { .hero-card .hero-media-art img { object-position: center 20%; } }
.about-head-inner > div { min-width: 0; }
@media (max-width: 639px) {
  .focus-list .card-media { aspect-ratio: 16 / 8; }
  .planned-list .card-body > p:not(.meta):not(.milestone-links) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .focus-list .card-body > p:not(.meta):not(.milestone-links) { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
}
.idea-flow li { align-content: start; grid-template-rows: auto 1fr; }
.filters .count { margin-left: 3px; }
@media (max-width: 639px) {
  .progress-board { grid-template-columns: 1fr 1fr; gap: 8px; }
  .progress-lane:not(.is-empty) { grid-column: 1 / -1; }
  .progress-lane.is-empty { padding: 10px 12px; }
  .progress-lane.is-empty h3 { flex-direction: column; align-items: flex-start; margin: 0; }
  .progress-lane.is-empty .lane-help, .progress-lane.is-empty .lane-empty { display: none; }
}
.filters a { min-height: 44px; display: inline-flex; align-items: center; }
.roadmap-focus h2[id], .roadmap-group h2[id], .about-section h2[id], #bts-list-title, #progress-title, #list-title { scroll-margin-top: 84px; }
@media (min-width: 800px) {
  .bts-featured .card-media { aspect-ratio: 4 / 3; min-height: 0; max-height: 440px; }
  .bts-featured { align-items: stretch; }
}
.bts-featured .card-body { display: flex; flex-direction: column; justify-content: center; }

/* ---------- Website 2.3 ---------- */
/* About us: the editable sections */
.about-part { margin-bottom: 28px; }
.about-part:last-child { margin-bottom: 0; }
.about-part h3 { font-size: 1.3rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: .5em; }
.about-part.is-draft .prose { border-left: 3px dashed #8a6a1e; padding-left: 14px; }
.about-part-empty .placeholder-box { margin: 0; }
.about-team { margin-top: 32px; }
.about-team .about-part { margin-bottom: 20px; }
.vision-parts .about-part h3 { font-size: 1.2rem; }
.vision-parts .vision > p:first-child { font-size: 1.15rem; }
.about-draft-note { margin-top: 24px; }
.facts-card h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Community: ideas page and the suggest page */
.ideas-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.suggest-teaser { text-align: center; }
.suggest-teaser h2 { font-size: 1.4rem; }
.suggest-teaser p { margin-left: auto; margin-right: auto; }
.guidelines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.guidelines li { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--teal); border-radius: var(--radius-small); padding: 10px 14px; color: #cfd7ea; }
.guidelines strong { color: var(--text); }
.privacy-box { margin-top: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; font-size: .95rem; }
.privacy-box h3 { font-size: 1.05rem; margin-bottom: .5em; }
.privacy-box ul { margin: 0 0 10px; padding-left: 1.2em; display: grid; gap: 6px; }
.privacy-box p { margin: 0; color: #cfd7ea; }
.sent-panel { background: rgba(116, 224, 168, .1); border: 1px solid rgba(116, 224, 168, .5); border-radius: var(--radius); padding: 18px 20px; }
.sent-panel h2 { font-size: 1.35rem; color: var(--success); margin-bottom: .4em; }
.sent-panel h2:focus { outline: none; }
.sent-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }
#idea-form:focus { outline: none; }
#idea-form, #sent { scroll-margin-top: 84px; }

/* Heroes: real artwork and renders are never cropped (heads, weapons and edges stay visible). */
.hero-media-art { background: radial-gradient(70% 80% at 50% 60%, color-mix(in srgb, var(--hero, var(--teal)) 30%, #0c1428), #0c1428 75%); }
.hero-media-art img { object-fit: contain; object-position: center; }
.hero-page-media .hero-media-art img { aspect-ratio: auto; width: 100%; height: auto; max-height: min(560px, 70vh); }
@media (min-width: 640px) { .hero-card .hero-media-art img { object-position: center; } }

/* Privacy policy draft */
.policy-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.data-table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: .95rem; }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.data-table th { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.data-table-wrap { overflow-x: auto; }
@media (max-width: 640px) {
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tr { border: 1px solid var(--border); border-radius: var(--radius-small); margin-bottom: 10px; padding: 6px 0; background: var(--surface); }
  .data-table td { border: 0; padding: 4px 12px; }
  .data-table td::before { content: attr(data-label); display: block; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
}
@media (max-width: 640px) {
  .about-part .story-prose { font-size: 1rem; }
  .about-part h3 { font-size: 1.15rem; }
  .about-team .work-steps { gap: 8px; }
  .about-team .work-steps li { padding: 10px 12px; }
  .vision-parts .vision ul { gap: 8px; }
  .vision-parts .vision li { padding: 10px 12px; font-size: .95rem; }
  .vision-parts .vision > p:first-child { font-size: 1.05rem; }
  .profile .prose { font-size: .95rem; }
}

/* ---------- Website 2.4: About us story, developer cards, idea-to-game steps, home team strip ---------- */
.about-intro h1 { font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.08; margin-bottom: .3em; }
.about-sub { font: 700 clamp(1.1rem, 2.6vw, 1.35rem)/1.35 var(--font-display); color: var(--teal); margin: 0 0 .9em; }
.about-lead { max-width: 60ch; }
.about-lead p { font-size: 1.1rem; color: #d6ddee; margin: 0 0 .7em; }
.about-draft-chip { margin: 0; }
.about-section .section-head h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.about-section h2 .badge, .about-section h3 .badge, .team-strip h2 .badge { font-size: .7rem; vertical-align: middle; }
.anchor-alias { display: block; position: relative; top: -80px; height: 0; }

/* Developer cards: two equal cards, same structure, no photos unless the owners add one. */
.dev-cards { display: grid; gap: 16px; }
@media (min-width: 820px) { .dev-cards { grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; } }
.dev-card { display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--gold); border-radius: var(--radius); padding: 20px; scroll-margin-top: 80px; }
.dev-card:nth-child(2) { border-top-color: var(--teal); }
.dev-card-head { display: flex; align-items: center; gap: 14px; }
.dev-card-head h3 { margin: 0; font-size: 1.45rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dev-card-head .role { margin: 2px 0 0; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.dev-mark { flex: none; width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; font: 800 1.8rem/1 var(--font-display); color: var(--gold); background: radial-gradient(circle at 30% 25%, rgba(241, 195, 94, .22), transparent 60%), var(--surface-2); border: 2px solid rgba(241, 195, 94, .55); }
.dev-card:nth-child(2) .dev-mark { color: var(--teal); border-color: rgba(79, 214, 207, .55); background: radial-gradient(circle at 30% 25%, rgba(79, 214, 207, .2), transparent 60%), var(--surface-2); }
.dev-photo img { width: 60px; height: 60px; border-radius: 16px; object-fit: cover; border: 2px solid var(--gold); }
.dev-focus { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dev-focus li { padding: 4px 10px; border-radius: 999px; background: var(--teal-soft); color: #bff3ef; font-size: .85rem; font-weight: 600; }
.dev-bio p { margin: 0 0 .7em; line-height: 1.65; }
.dev-bio p:last-child { margin-bottom: 0; }
.dev-tagline { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--border); color: var(--gold); font: italic 600 1rem/1.4 var(--font-display); }

/* How we work together + From idea to game */
.together-grid { display: grid; gap: 24px; }
@media (min-width: 960px) { .together-grid { grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; } }
.together-grid > * { min-width: 0; }
.idea-to-game { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.idea-to-game h3 { margin: 0 0 12px; font-size: 1.1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.flow-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: flow; }
.flow-steps li { counter-increment: flow; display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: var(--radius-small); background: var(--bg-alt); position: relative; }
.flow-steps li::before { content: counter(flow); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--gold-ink); font: 800 .9rem/1 var(--font-display); align-self: start; }
.flow-steps strong { text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; color: var(--text); }
.flow-steps span { color: #cfd7ea; font-size: .92rem; line-height: 1.45; }
.flow-steps li:not(:last-child)::after { content: ""; position: absolute; left: 23px; bottom: -9px; width: 2px; height: 10px; background: rgba(241, 195, 94, .5); }
.flow-note { margin: 10px 0 0; font-size: .85rem; color: var(--muted); }

.vision-note { margin-top: 16px; padding: 12px 14px; border-left: 3px solid var(--teal); background: var(--teal-soft); border-radius: 0 var(--radius-small) var(--radius-small) 0; font-size: .95rem; color: #d6ddee; }

/* The heart behind BAM: personal, restrained. */
.heart-card { position: relative; padding: 28px 24px; border-radius: var(--radius); background: linear-gradient(160deg, rgba(241, 195, 94, .08), transparent 55%), var(--surface); border: 1px solid rgba(241, 195, 94, .35); }
.heart-card h2 { font-size: clamp(1.5rem, 4vw, 2rem); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.heart-prose p { font-size: 1.08rem; line-height: 1.7; margin: 0 0 .8em; }
.heart-prose p:last-child { margin: 1.2em 0 0; color: var(--gold); font: 700 1.1rem/1.3 var(--font-display); }

.about-join { text-align: left; }
.about-join h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.about-join .actions { margin: 18px 0 10px; }
.join-more { color: var(--muted); margin: 0; }

/* Home: the people behind BAM */
.team-strip { padding: 36px 0; }
.team-strip-inner { display: grid; gap: 16px; align-items: center; }
.team-strip-inner > * { min-width: 0; }
.team-strip h2 { margin: 0 0 .3em; font-size: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.team-strip p { margin: 0; max-width: 60ch; color: #d6ddee; }
.team-strip .eyebrow { margin-bottom: .4em; color: var(--gold); }
.team-marks { display: flex; gap: 8px; }
.team-marks .dev-mark { width: 52px; height: 52px; font-size: 1.5rem; }
.team-marks .dev-mark + .dev-mark { color: var(--teal); border-color: rgba(79, 214, 207, .55); }
@media (min-width: 760px) { .team-strip-inner { grid-template-columns: auto 1fr auto; gap: 28px; } }

@media (max-width: 640px) {
  .about-lead p { font-size: 1rem; }
  .about-section .story-prose p, .heart-prose p { font-size: 1rem; }
  .dev-card { padding: 16px; gap: 10px; }
  .dev-mark, .dev-photo img { width: 52px; height: 52px; font-size: 1.5rem; }
  .flow-steps { grid-template-columns: 1fr 1fr; }
  .flow-steps li { grid-template-columns: 1fr; padding: 10px; row-gap: 4px; }
  .flow-steps li::before { grid-row: auto; width: 24px; height: 24px; font-size: .8rem; }
  .flow-steps li::after { display: none; }
  .flow-steps span { font-size: .85rem; }
  .heart-card { padding: 20px 16px; }
  .team-strip { padding: 28px 0; }
}
/* 2.4 mobile tightening (measured at 390 px) */
.about-section .section-head h2, .heart-card h2, .about-join h2, .team-strip h2 { display: block; }
.about-section h2 .badge, .heart-card h2 .badge, .about-join h2 .badge, .team-strip h2 .badge { position: relative; top: -3px; margin-left: 4px; }
.flow-steps li { align-items: start; }
@media (max-width: 640px) {
  .about-section { padding: 28px 0; }
  .about-intro { padding-bottom: 20px; }
  .about-section .section-head { margin-bottom: 14px; }
  .about-section .story-prose p, .heart-prose p, .dev-bio p, .about-join .prose p { line-height: 1.6; margin-bottom: .6em; }
  .flow-steps { gap: 6px; }
  .flow-steps li { padding: 8px; }
  .facts-card { padding: 14px 16px; }
}
.flow-steps li { min-width: 0; }
@media (max-width: 374px) { .flow-steps strong { letter-spacing: .02em; font-size: .78rem; } .flow-steps li { padding: 8px 6px; } }

/* ---------- 2.5A: Unity content and development history ---------- */
.badge-history { background: #241d3a; border-color: #5d4f8f; color: #ddd3ff; }
.badge-dev { color: var(--teal); border-color: rgba(79, 214, 207, .45); background: var(--teal-soft); }
.badge-dev-testing { color: var(--gold); border-color: rgba(241, 195, 94, .6); background: rgba(241, 195, 94, .14); }
.badge-dev-preview { color: #cdd6ea; border-color: rgba(170, 181, 207, .45); background: rgba(170, 181, 207, .12); }
.badge-phase { color: var(--gold); border-color: rgba(241, 195, 94, .5); background: rgba(241, 195, 94, .1); }
.badge-ok { background: rgba(116, 224, 168, .14); border-color: rgba(116, 224, 168, .5); color: var(--success); }

.unity-placeholder { display: grid; place-items: center; gap: 12px; text-align: center; padding: 32px 20px; border: 1px dashed var(--border); border-radius: var(--radius); background: radial-gradient(circle at 50% 30%, rgba(79, 214, 207, .12), transparent 70%), var(--surface); color: var(--muted); }
.unity-placeholder p { margin: 0; max-width: 34ch; }
.unity-placeholder-mark { font: 800 1.6rem/1 var(--font-display); letter-spacing: .12em; color: var(--gold); padding: 14px 18px; border: 2px solid rgba(241, 195, 94, .5); border-radius: 16px; }
.phone-placeholder .unity-placeholder { aspect-ratio: 9 / 16; border: 0; border-radius: 26px; }
.home-hero-visual figcaption a { color: var(--teal); }

.asset-figure { margin: 0; }
.asset-figure img { border-radius: var(--radius); width: 100%; }
.asset-figure figcaption { font-size: .875rem; color: var(--muted); margin-top: 6px; }

.history-note { border-left: 3px solid #5d4f8f; background: #1a1630; padding: 12px 16px; border-radius: 0 var(--radius-small) var(--radius-small) 0; color: #ddd3ff; margin: 0 0 24px; }
.history-note a { color: #c8b8ff; }
.history-section .section-head .eyebrow { color: #c8b8ff; }
.dev-status-note { color: var(--muted); font-size: .95rem; }

.journey-list { list-style: none; margin: 24px 0 0; padding: 0; position: relative; }
.journey-list::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.journey-item { position: relative; padding: 0 0 28px 40px; }
.journey-dot { position: absolute; left: 2px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 3px solid var(--gold); }
.journey-item.phase-html5 .journey-dot, .journey-item.phase-discover .journey-dot { border-color: #8f7fd0; }
.journey-item h3 { margin: 0 0 .4em; font-size: 1.2rem; }
.journey-item article { min-width: 0; overflow-wrap: anywhere; }
.journey-date { font-variant-numeric: tabular-nums; }

.history-grid { display: grid; gap: 24px; margin: 28px 0; }
@media (min-width: 700px) { .history-grid { grid-template-columns: 1fr 1fr; } }
.shot-strip-4 { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; padding-top: 8px; }
@media (max-width: 600px) { .shot-strip-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Nine top-level links since 2.5A (Our journey): slightly tighter spacing keeps the header on one row from 1200px. */
@media (min-width: 1200px) { .header-inner { gap: 12px; } .site-nav ul { gap: 2px; } .site-nav a { padding-left: 7px; padding-right: 7px; } .site-nav .nav-cta a { padding: 8px 12px; } }

/* =====================================================================
   Website 2.5B – development diary, behind the scenes, article layout
   ===================================================================== */
.bts-bots { --cat: #7fe0a8; }
.bts-learning { --cat: #ffb37a; }
.card-update .meta, .diary-featured .meta, .diary-history .meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.card-update time, .diary-featured time, .diary-history time { font-size: .85rem; color: var(--muted); }

/* Featured diary entry: the same shape as the featured story, with a gold edge */
.diary-featured { border-top: 3px solid var(--gold); }
.diary-featured .card-body { padding: 18px 20px; gap: 8px; }
.diary-featured h2 { font-size: clamp(1.4rem, 5vw, 2rem); margin: 0; overflow-wrap: anywhere; }
.diary-featured h2 a { color: var(--text); text-decoration: none; }
.diary-featured:hover h2 a, .diary-featured:focus-within h2 a { text-decoration: underline; }
.diary-featured-summary { margin: 0; color: #cfd7ea; font-size: 1.05rem; max-width: 60ch; }
@media (min-width: 800px) {
  .diary-featured { display: grid; grid-template-columns: 1.1fr 1fr; }
  .diary-featured-noimg { grid-template-columns: 1fr; }
  .diary-featured-noimg .card-body { max-width: 760px; }
  .diary-featured .card-media { aspect-ratio: auto; min-height: 260px; }
  .diary-featured .card-body { padding: 28px 32px; justify-content: center; }
}
.diary-aside { margin: 0; padding: 14px 18px; border: 1px solid var(--border); border-left: 3px solid var(--teal); border-radius: var(--radius-small); background: var(--surface); color: #cfd7ea; }

/* HTML5 updates kept as history: a compact list, not cards */
.diary-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 900px) { .diary-history { grid-template-columns: repeat(2, 1fr); column-gap: 32px; } }
.diary-history li { padding: 14px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.diary-history .meta { margin: 0 0 4px; }
.diary-history h3 { font-size: 1.05rem; margin: 0 0 4px; overflow-wrap: anywhere; }
.diary-history h3 a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); }
.diary-history p.muted { margin: 0; font-size: .95rem; }

/* Article pages: readable on a phone, complete without an image */
.article-body { font-size: 1.05rem; line-height: 1.7; }
@media (min-width: 700px) { .article-body { font-size: 1.1rem; } }
.article-body h2 { margin-top: 1.8em; font-size: clamp(1.2rem, 4.5vw, 1.5rem); color: var(--gold); letter-spacing: .01em; }
.article-body > p:first-child { font-size: 1.12em; color: #e6ebf7; }
.article .page-head h1 { overflow-wrap: anywhere; }
.article-links { border-top: 1px solid var(--border); margin-top: 32px; padding-top: 12px; }
.article-links .related-milestones { border-top: 0; padding-top: 0; }
.related-journey { color: var(--muted); }
.community-cta { margin: 32px 0; padding: 18px 20px; border: 1px solid var(--border); border-left: 4px solid var(--teal); border-radius: var(--radius); background: var(--surface); }
.community-cta h2 { font-size: 1.2rem; margin: 0 0 6px; }
.community-cta p { margin: 0 0 12px; color: #cfd7ea; }
.community-cta .actions { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.keep-reading { margin: 32px 0; }
.keep-reading h2 { font-size: 1.2rem; }
.keep-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.keep-item { padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface); overflow-wrap: anywhere; }
.keep-item a { color: var(--text); font-weight: 600; display: inline-block; min-height: 24px; padding: 2px 0; }
.keep-kind { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.keep-bts .keep-kind { color: var(--teal); }
.keep-update .keep-kind { color: var(--gold); }

/* Behind the scenes: its own, warmer header with a turquoise edge */
.bts-page .bts-head { border-bottom: 3px solid var(--teal); background: linear-gradient(180deg, rgba(79, 214, 207, .08), transparent 70%); }
.bts-page .bts-head .eyebrow { color: var(--teal); }

/* Home: editorial blocks only for content that exists */
.home-editorial { display: grid; gap: 24px; }
.home-editorial > * { min-width: 0; }
@media (min-width: 760px) { .home-editorial { grid-template-columns: 1fr 1fr; } .home-ed-main { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .home-editorial { grid-template-columns: repeat(3, 1fr); } .home-ed-main { grid-column: span 2; } .home-ed-main:only-child { grid-column: 1 / -1; } }
.home-ed .mini-title, .home-ed-main .mini-title { margin-top: 0; }
.home-ed-main .card-large .card-body h4 { font-size: 1.3rem; }
.home-editorial h4 { margin: 0; font-size: 1.1rem; }
.home-editorial h4 a { color: var(--text); }
.card-journey { border-top: 3px solid #5d4f8f; }
.card-journey .meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.home-ed-empty { display: grid; gap: 12px; max-width: 720px; }
.home-ed-empty .actions { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.journey-story { margin: 8px 0 0; }

/* Website 2.6 — roadmap readability and small-screen layout */
.roadmap-jump ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.roadmap-jump a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-weight: 650;
}
.roadmap-jump a:hover,
.roadmap-jump a:focus-visible { border-color: var(--teal); }
.roadmap-jump .jump-count {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  min-height: 26px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--teal);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}
.roadmap-focus { border-bottom: 1px solid var(--border); }
.focus-list,
.planned-list,
.done-list,
.history-list { min-width: 0; }
.focus-list { display: grid; gap: 14px; margin: 0; padding-left: 1.4rem; }
.focus-list > li { min-width: 0; padding-left: 3px; }
.planned-list { align-items: stretch; }
.planned-list > li { min-width: 0; }
.done-list,
.history-list { display: grid; gap: 0; }
.done-list > li,
.history-list > li { min-width: 0; }
.done-list h3,
.history-list h3,
.focus-list h3,
.planned-list h3 { overflow-wrap: anywhere; }
.done-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.roadmap-note { margin-top: 24px; }
.roadmap-group,
.roadmap-focus,
.history-section { scroll-margin-top: 90px; }

@media (max-width: 600px) {
  .roadmap-jump ul { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .roadmap-jump a { width: 100%; justify-content: flex-start; border-radius: var(--radius-small); }
  .roadmap-jump .jump-count { flex: 0 0 26px; }
  .focus-list { padding-left: 1.15rem; gap: 12px; }
  .focus-list > li { padding-left: 0; }
  .roadmap-focus .section-head,
  .roadmap-group .section-head { margin-bottom: 18px; }
  .done-list > li,
  .history-list > li { align-items: start; gap: 10px; }
  .done-list h3,
  .history-list h3 { font-size: 1.05rem; }
  .done-meta { font-size: .875rem; }
  .roadmap-note { overflow-wrap: anywhere; }
}
@media (max-width: 374px) {
  .roadmap-jump a { padding: 8px 10px; font-size: .92rem; }
  .roadmap-focus .wrap,
  .roadmap-group .wrap { padding-left: 16px; padding-right: 16px; }
}



/* Road to release (roadmap page) */
.rr-progress { margin: 0 0 24px; }
.rr-bar { display: flex; height: 16px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.rr-bar-done { background: linear-gradient(90deg, var(--teal), var(--gold)); }
.rr-bar-doing { background: repeating-linear-gradient(45deg, rgba(241, 195, 94, .55) 0 6px, rgba(241, 195, 94, .2) 6px 12px); }
.rr-progress p { margin: 8px 0 0; }
.rr-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 6px 0 0; padding: 0; color: var(--muted); }
.rr-key { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; border: 2px solid var(--border); }
.rr-key-done { background: var(--success); border-color: var(--success); }
.rr-key-doing { background: var(--gold); border-color: var(--gold); }

.rr-strip { list-style: none; margin: 0 0 36px; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .rr-strip { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .rr-strip { grid-template-columns: repeat(8, 1fr); } }
.rr-node a { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; padding: 14px 8px 12px; text-align: center; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.rr-node a:hover, .rr-node a:focus-visible { border-color: var(--gold); }
.rr-badge { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--border); color: var(--muted); }
.rr-done .rr-badge { background: rgba(116, 224, 168, .16); border-color: var(--success); color: var(--success); }
.rr-now .rr-badge { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.rr-next .rr-badge { border-color: var(--teal); color: var(--teal); }
.rr-ideas .rr-badge { border-style: dashed; }
.rr-now a { border-color: rgba(241, 195, 94, .6); }
.rr-node-title { font-weight: 700; font-size: .85rem; line-height: 1.25; }
.rr-node-tag { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.rr-mini { width: 70%; height: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-top: auto; }
.rr-mini span { display: block; height: 100%; background: var(--success); }

.rr-phases { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 3px solid var(--border); display: grid; gap: 18px; }
.rr-phase { position: relative; padding-left: 30px; scroll-margin-top: 80px; }
.rr-dot { position: absolute; left: -41px; top: 14px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 3px solid var(--border); color: var(--muted); }
.rr-dot svg { width: 20px; height: 20px; }
.rr-done .rr-dot { background: #12302a; border-color: var(--success); color: var(--success); }
.rr-now .rr-dot { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.rr-next .rr-dot { border-color: var(--teal); color: var(--teal); }
.rr-ideas .rr-dot { border-style: dashed; }
.rr-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.rr-now .rr-card { border-color: rgba(241, 195, 94, .6); box-shadow: var(--shadow); }
.rr-ideas .rr-card { border-style: dashed; background: transparent; }
.rr-card h3 { margin-bottom: .25em; }
.rr-tag { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 0 0 6px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.rr-now .rr-tag { color: var(--gold); }
.rr-done .rr-tag { color: var(--success); }
.rr-next .rr-tag { color: var(--teal); }
.rr-count { font-weight: 600; letter-spacing: 0; text-transform: none; }
.rr-items { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.rr-items li { position: relative; padding-left: 26px; }
.rr-items li::before { content: "○"; position: absolute; left: 0; color: var(--muted); }
.rr-items li.is-done::before { content: "✓"; color: var(--success); font-weight: 800; }
.rr-items li.is-done { color: var(--muted); }
.rr-items li.is-doing::before { content: "◐"; color: var(--gold); font-weight: 800; }
@media (min-width: 900px) { .rr-items { grid-template-columns: 1fr 1fr; column-gap: 24px; } }

/* Home hero: the B emblem logo (bam-logo-dark.png) replaces the text title. */
.h2-logo { margin: 0 0 .4rem; display: flex; justify-content: center; filter: drop-shadow(0 6px 24px rgba(0,0,0,.7)); }
.h2-logo img { width: min(430px, 80vw); height: auto; }

/* Home: art hero, hero strip, gameplay */
.home-art{position:relative;text-align:center;padding:2.5rem 0 2rem;overflow:hidden}
.home-art-bg{position:absolute;inset:0;background-size:cover;background-position:center top;opacity:.85}
.home-art::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(6,12,24,.1),rgba(6,12,24,.95))}
.home-art-inner{position:relative;z-index:1;padding-top:7rem}
.home-art-logo img{max-width:min(420px,80%);height:auto;filter:drop-shadow(0 6px 24px rgba(0,0,0,.6))}
.home-art-slogan{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;text-transform:uppercase;margin:.5rem 0 .2rem}
.home-art-sub{margin:0 0 1rem;color:#dfe8f5}
.home-art-actions{justify-content:center}
.home-art-icons{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
.home-art-icons strong{display:block;text-transform:uppercase;font-size:.85rem;color:#f2c14e}
.home-art-icons span{font-size:.85rem;color:#c5d2e6}
.home-heroes-strip{padding:1.5rem 0}
.home-heroes-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:.5rem}
.home-hero-tile{display:block;text-align:center;font-weight:700;text-decoration:none;color:inherit;background:#0c1626;border-radius:6px;overflow:hidden}
.home-hero-tile img{display:block;width:100%;aspect-ratio:1/1.1;object-fit:cover}
.home-hero-tile span{display:block;padding:.35rem 0}
.home-gameplay{padding:2rem 0}
.home-gameplay-inner{display:grid;grid-template-columns:1fr 3fr;gap:2rem;align-items:center}
.home-gameplay-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.home-gameplay-strip img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px}
@media (max-width:800px){.home-gameplay-inner{grid-template-columns:1fr}.home-gameplay-strip{grid-template-columns:1fr 1fr}.home-art-inner{padding-top:3rem}}
.home-art-bg{background-image:url('../images/hero-bg.png')}
.home-art-logo{margin:0}
.home-art-logo img{display:block;margin:0 auto}

/* Home v2: overlay header, panels, diary */
.is-home .site-header{position:absolute;top:0;left:0;right:0;z-index:5;background:linear-gradient(to bottom,rgba(6,12,24,.85),rgba(6,12,24,0));border:0;backdrop-filter:none}
.is-home .home-art{padding-top:0}
.is-home .home-art-inner{padding-top:8rem}
.brand-gold{height:56px;width:auto;display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,.7))}
.home-heroes-strip .wrap{background:rgba(12,22,38,.85);border:1px solid rgba(120,160,220,.15);border-radius:10px;padding:1rem}
.home-heroes-strip,.home-gameplay,.home-diary{padding-left:0}
.home-heroes-strip h2,.home-gameplay h2,.home-diary h2{text-transform:uppercase;letter-spacing:.02em}
.home-diary{padding:2rem 0}
.home-diary-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem}
.home-diary-card{display:flex;flex-direction:column;justify-content:flex-end;min-height:150px;padding:.9rem;border-radius:8px;text-decoration:none;color:#fff;background-size:cover;background-position:center;position:relative;overflow:hidden;box-shadow:0 0 0 1px rgba(120,160,220,.2)}
.home-diary-card::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,12,24,.92),rgba(6,12,24,.1))}
.home-diary-card strong,.home-diary-card span{position:relative}
.home-diary-card span{font-size:.8rem;color:#b9c7dc}
.home-diary-bg-0{background-image:url('../images/hero-bg.png')}
.home-diary-bg-1{background-image:url('../images/gameplay/unity-screenshot-1.png')}
.home-diary-bg-2{background-image:url('../images/gameplay/unity-screenshot-2.png')}
.home-diary-bg-3{background-image:url('../images/hero-bg.png');background-position:right}
.home-art-icons li{padding:0 .5rem}
.btn-ghost{border-color:#2f7fff;box-shadow:0 0 12px rgba(47,127,255,.25)}