/* First game: neutral surfaces; faction cards own their colour context. */
.vs-start { --vs-start-header-offset: 0px; background: var(--vs-void-black, #0b0d0e); color: var(--vs-old-ivory, #f0ece2); font-family: var(--vs-font-body); }
.vs-start, .vs-start * { box-sizing: border-box; }
.vs-start :is(h1, h2, h3, h4) { font-family: var(--vs-font-display); line-height: var(--vs-leading-tight); }
.vs-start h1 { font-size: var(--vs-h1); }
.vs-start h2 { font-size: var(--vs-h2); }
.vs-start h3 { font-size: var(--vs-h3); }
.vs-start h4 { font-size: var(--vs-h4); }
.vs-start :is(a, button, select):focus-visible { outline: 2px solid var(--vs-focus); outline-offset: 4px; }
.vs-start a:not(.vs-button) { color: inherit; text-underline-offset: .25em; }
.vs-start p { line-height: var(--vs-leading-body); }
.vs-start img { max-width: 100%; }
.vs-start-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: min(78vh, 760px); padding-block: var(--vs-space-8); }
.vs-start-hero__poster, .vs-start-hero > .vs-background-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.vs-start-hero > .vs-background-video video { width: 100%; height: 100%; object-fit: cover; }
.vs-start-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, var(--vs-void-black, #0b0d0e), transparent 85%), rgb(0 0 0 / var(--vs-start-darkness, .58)); pointer-events: none; }
.vs-start-hero > .vs-container { position: relative; z-index: 2; }
.vs-start-hero h1 { max-width: 20ch; margin-block: var(--vs-space-4); }
.vs-start-lead { max-width: 65ch; font-size: var(--vs-text-lg); }
.vs-start-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vs-space-5); margin-top: var(--vs-space-6); }
.vs-start-rail-wrap { position: sticky; top: var(--vs-start-header-offset); z-index: 80; background: rgb(11 13 14 / .94); backdrop-filter: blur(12px); border-block: 1px solid rgb(240 236 226 / .16); }
.vs-start-rail { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
.vs-start-rail::-webkit-scrollbar { height: 0; }
.vs-start-rail ol { display: flex; align-items: center; width: max-content; min-width: 100%; min-height: 50px; margin: 0; padding: 0; list-style: none; }
.vs-start-rail li { position: relative; flex: 1 0 auto; }
.vs-start-rail a { display: flex; align-items: center; gap: var(--vs-space-2); min-height: 50px; padding-inline: var(--vs-space-2); text-decoration: none; font-size: var(--vs-text-sm); white-space: nowrap; }
.vs-start-number { flex: 0 0 34px; display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--vs-focus); border-radius: 50%; font-size: var(--vs-text-sm); font-weight: 700; }
/* The connecting stroke occupies its own gap, never passing behind text. */
.vs-start-rail li:not(:last-child) { display: flex; align-items: center; }
.vs-start-rail li:not(:last-child)::after { content: ""; flex: 1 0 12px; height: 1px; margin-inline: var(--vs-space-2); background: var(--vs-focus); opacity: .45; }
.vs-start-rail a[aria-current="step"] { font-weight: 700; }
.vs-start-rail a[aria-current="step"] .vs-start-number { background: var(--vs-focus); color: var(--vs-void-black, #0b0d0e); }
.vs-start-section { padding-block: var(--vs-space-8); scroll-margin-top: calc(var(--vs-start-header-offset) + 76px); }
.vs-start-heading { max-width: 70ch; margin-bottom: var(--vs-space-6); }
.vs-start-heading h2 { margin-block: var(--vs-space-3); }
.vs-start-heading .vs-eyebrow { margin: 0; }
.vs-start-armies, .vs-start-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vs-space-5); }
.vs-start-build { background: var(--vs-iron-black, #141719); border-top: 3px solid var(--vs-weathered-brass, #8b7650); }
.vs-start-build__overview { display: flex; align-items: stretch; gap: var(--vs-space-6); }
.vs-start-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--vs-space-4); flex: 1; margin: 0; }
.vs-start-build__overview:has(.vs-start-model) .vs-start-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vs-start-facts > div { display: flex; flex-direction: column; justify-content: center; gap: var(--vs-space-1); padding: var(--vs-space-4) var(--vs-space-5); border: 1px solid rgb(240 236 226 / .16); border-radius: var(--vs-radius); background: rgb(0 0 0 / .35); }
.vs-start-facts dt { font-size: var(--vs-text-sm); }
.vs-start-facts dd { order: -1; margin: 0; font-family: var(--vs-font-display); font-size: var(--vs-h3); font-weight: 700; line-height: 1.1; color: var(--vs-focus, #c9a96a); }
.vs-start-model { flex: 1; min-width: 0; max-width: 50%; }
.vs-start-model h3 { margin-block: var(--vs-space-2); }
.vs-start-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--vs-space-4); min-width: 0; padding: var(--vs-space-5); border: 1px solid rgb(240 236 226 / .18); border-radius: var(--vs-radius); background: var(--vs-iron-black, #141719); overflow-wrap: anywhere; }
.vs-start-card :is(h3, p) { margin: 0; }
.vs-start-basics { padding: 0; list-style: none; }
.vs-start-subheading { margin-top: var(--vs-space-7); }
.vs-start-rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--vs-space-4); }
.vs-start-rules h3 { font-size: var(--vs-h4); }
.vs-start-rules a { margin-top: auto; }
.vs-start-setup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vs-space-6); align-items: start; }
.vs-start-setup__scenario { display: grid; gap: var(--vs-space-4); }
.vs-start-setup__scenario > h3 { margin: 0; font-size: var(--vs-h4); }
.vs-start-checklist { display: grid; gap: var(--vs-space-4); list-style: none; padding: 0; margin: 0; }
.vs-start-checklist li { position: relative; padding-left: var(--vs-space-6); }
.vs-start-check { position: absolute; left: 0; top: .15em; width: 1.15rem; height: 1.15rem; color: var(--vs-focus, #c9a96a); }
.vs-start-report { padding: 0; overflow: hidden; }
.vs-start-report a { display: grid; width: 100%; gap: var(--vs-space-4); padding-bottom: var(--vs-space-5); text-decoration: none; }
.vs-start-report img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.vs-start-report :is(h3, a > span) { margin-inline: var(--vs-space-5); }
.vs-start > .vs-composer-sections { max-width: var(--vs-container); margin: 0 auto var(--vs-space-8); padding-inline: var(--vs-gutter); }
@media (max-width: 1000px) {
	.vs-start-armies { grid-template-columns: 1fr; }
	.vs-start-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vs-start-grid { grid-template-columns: 1fr; }
	.vs-start-build__overview { flex-direction: column; }
	.vs-start-model { max-width: none; }
	.vs-start-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
	.vs-start-section { padding-block: var(--vs-space-7); }
	.vs-start-setup, .vs-start-rules { grid-template-columns: 1fr; }
	.vs-start-facts > div { padding: var(--vs-space-4); }
	.vs-start-actions { align-items: stretch; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
	.vs-start-hero video { display: none; }
	.vs-start .vs-home-army { transition: none; transform: none; }
}