345 lines
17 KiB
HTML
345 lines
17 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="description" content="Rules for Space Station 33 — a collaborative colony history game." />
|
|
<title>Space Station 33 — Rules</title>
|
|
<style>
|
|
:root {
|
|
--void: #171513;
|
|
--void-soft: #211e1a;
|
|
--panel: #2a2520;
|
|
--paper: #e8dcc4;
|
|
--paper-deep: #cbbd9e;
|
|
--ink: #2c231c;
|
|
--text: #e9dfca;
|
|
--muted: #a89d89;
|
|
--brass: #b88a43;
|
|
--rust: #94452f;
|
|
--moss: #70794e;
|
|
--oxygen: #86a5a4;
|
|
--line: rgba(232, 220, 196, .18);
|
|
--text-secondary: #d0c6b3;
|
|
--text-body: #c2b7a4;
|
|
--text-dim: #b8ae9e;
|
|
--shadow: 0 22px 70px rgba(0,0,0,.42);
|
|
--serif: Spectral, Georgia, "Times New Roman", serif;
|
|
--sans: Jost, Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
--mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html { scroll-behavior: smooth; }
|
|
body {
|
|
margin: 0;
|
|
color: var(--text);
|
|
background:
|
|
radial-gradient(circle at 12% 8%, rgba(134,165,164,.08), transparent 26rem),
|
|
linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px),
|
|
var(--void);
|
|
background-size: auto, 28px 28px, 28px 28px, auto;
|
|
font-family: var(--sans);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
opacity: .16;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
|
|
mix-blend-mode: soft-light;
|
|
z-index: 10;
|
|
}
|
|
|
|
a { color: inherit; }
|
|
img { display: block; max-width: 100%; }
|
|
|
|
.shell { width: min(1180px, calc(100% - 36px)); margin: 0 auto; }
|
|
|
|
.masthead {
|
|
min-height: 74vh;
|
|
display: grid;
|
|
align-items: end;
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-bottom: 1px solid var(--line);
|
|
background:
|
|
linear-gradient(to top, rgba(23,21,19,.98) 0%, rgba(23,21,19,.54) 45%, rgba(23,21,19,.12) 100%),
|
|
url("assets/engineering.png") center 30% / cover no-repeat;
|
|
}
|
|
|
|
.masthead::after {
|
|
content: "SPACE STATION 33 // RULES";
|
|
position: absolute;
|
|
top: 26px;
|
|
right: 32px;
|
|
color: var(--paper);
|
|
font: 600 .72rem/1 var(--mono);
|
|
letter-spacing: .18em;
|
|
opacity: .72;
|
|
}
|
|
|
|
.hero-copy { padding: 7rem 0 4.5rem; max-width: 830px; }
|
|
.eyebrow {
|
|
color: var(--brass);
|
|
font: 700 .74rem/1.2 var(--mono);
|
|
letter-spacing: .22em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
font-family: var(--serif);
|
|
font-weight: 600;
|
|
letter-spacing: -.02em;
|
|
margin: 0;
|
|
}
|
|
|
|
h1 { font-size: clamp(3.2rem, 9vw, 7.6rem); line-height: .92; max-width: 10ch; }
|
|
h2 { font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1.05; color: var(--paper); }
|
|
h3 { font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.25; color: var(--paper); }
|
|
|
|
.hero-copy p { max-width: 62ch; color: var(--text-secondary); font-size: 1.08rem; }
|
|
|
|
nav {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 5;
|
|
border-bottom: 1px solid var(--line);
|
|
background: rgba(23,21,19,.86);
|
|
backdrop-filter: blur(14px);
|
|
}
|
|
|
|
nav .shell { display: flex; gap: 1.6rem; overflow-x: auto; }
|
|
nav a {
|
|
padding: 1rem 0;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
font: 700 .72rem/1 var(--mono);
|
|
letter-spacing: .14em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
}
|
|
nav a:hover { color: var(--paper); }
|
|
|
|
main { padding: 5rem 0 7rem; }
|
|
.intro { max-width: 770px; }
|
|
.intro .lead { font: 1.35rem/1.65 var(--serif); color: var(--paper); }
|
|
|
|
.divider {
|
|
width: min(100%, 980px);
|
|
margin: 4.2rem auto;
|
|
opacity: .9;
|
|
}
|
|
|
|
.project {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.6fr);
|
|
gap: clamp(2rem, 5vw, 5rem);
|
|
align-items: start;
|
|
margin: 0 0 7rem;
|
|
}
|
|
.project:nth-of-type(even) .project-image { order: 2; }
|
|
.project-image {
|
|
position: sticky;
|
|
top: 5.3rem;
|
|
border: 1px solid rgba(232,220,196,.28);
|
|
box-shadow: var(--shadow);
|
|
background: var(--panel);
|
|
padding: 8px;
|
|
}
|
|
.project-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
|
|
.project-copy { padding-top: 1rem; }
|
|
.project-copy p { color: var(--text-body); }
|
|
|
|
.meta {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 1px;
|
|
background: var(--line);
|
|
border: 1px solid var(--line);
|
|
margin-top: 2rem;
|
|
}
|
|
.meta div { background: var(--void-soft); padding: 1rem; }
|
|
.meta dt { color: var(--brass); font: 700 .68rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
|
|
.meta dd { margin: .38rem 0 0; color: var(--paper); }
|
|
|
|
.document {
|
|
margin-top: 2rem;
|
|
background: var(--paper);
|
|
color: var(--ink);
|
|
padding: clamp(1.4rem, 4vw, 3.5rem);
|
|
border: 1px solid #9d8d70;
|
|
box-shadow: var(--shadow);
|
|
position: relative;
|
|
}
|
|
.document::before,
|
|
.document::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 22px;
|
|
height: 22px;
|
|
border-color: var(--rust);
|
|
opacity: .6;
|
|
}
|
|
.document::before { left: 12px; top: 12px; border-left: 2px solid; border-top: 2px solid; }
|
|
.document::after { right: 12px; bottom: 12px; border-right: 2px solid; border-bottom: 2px solid; }
|
|
.document h3 { color: var(--ink); }
|
|
.document p { color: #514538; }
|
|
.document code { font-family: var(--mono); color: var(--rust); }
|
|
|
|
.table-wrap { overflow-x: auto; margin-top: 1.5rem; }
|
|
table { width: 100%; border-collapse: collapse; min-width: 680px; font-size: .94rem; }
|
|
th, td { padding: .9rem 1rem; border-bottom: 1px solid rgba(44,35,28,.2); text-align: left; }
|
|
th { font: 700 .7rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rust); }
|
|
tbody tr:hover { background: rgba(148,69,47,.07); }
|
|
.status { font: 700 .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
|
|
.status.stable { color: #566238; }
|
|
.status.watch { color: #9a6b1d; }
|
|
.status.critical { color: #91372a; }
|
|
|
|
blockquote {
|
|
margin: 2rem 0 0;
|
|
padding: 1.2rem 0;
|
|
border-top: 1px solid var(--line);
|
|
border-bottom: 1px solid var(--line);
|
|
color: var(--text-dim);
|
|
font-family: var(--serif);
|
|
font-size: .95rem;
|
|
font-style: italic;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
footer { border-top: 1px solid var(--line); padding: 2.5rem 0 4rem; color: var(--muted); }
|
|
footer .shell { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
|
|
footer p { margin: 0; font: .72rem/1.7 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
|
|
|
|
@media (max-width: 840px) {
|
|
.masthead { min-height: 68vh; }
|
|
.masthead::after { left: 20px; right: auto; }
|
|
.project { grid-template-columns: 1fr; }
|
|
.project:nth-of-type(even) .project-image { order: initial; }
|
|
.project-image { position: relative; top: auto; }
|
|
}
|
|
</style>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=Jost:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<header class="masthead">
|
|
<div class="shell hero-copy">
|
|
<div class="eyebrow">Space Station 33 // Rules</div>
|
|
<h1>Space Station 33</h1>
|
|
<p>In this game, you build the history of a young space colony together. You will create Projects that span years, discover Events scattered through time, introduce important people, and define the places, technologies, and ideas that make the colony unique.</p>
|
|
</div>
|
|
</header>
|
|
|
|
<nav aria-label="Rules sections">
|
|
<div class="shell">
|
|
<a href="#the-timeline">The Timeline</a>
|
|
<a href="#the-round">The Round</a>
|
|
<a href="#projects">Projects & Events</a>
|
|
<a href="#cast">Cast & Glossary</a>
|
|
<a href="#setup">Setup</a>
|
|
<a href="games.html" style="margin-left:auto">Game Sessions</a>
|
|
<a href="deck-editor.html" style="color:var(--brass)">Decks</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="shell">
|
|
|
|
<section class="intro" id="the-timeline">
|
|
<div class="eyebrow">Space Station 33 // Core Concept</div>
|
|
<h2>The timeline is a canvas, not a clock</h2>
|
|
<p class="lead">History does not need to be created in order. You already know where the history begins and where it ends. Everything between those points is open for discovery.</p>
|
|
<p>One player might create an Event in 2249. The next might jump ahead twenty years to 2269. The player after that might go back to 2252. Do not worry about what happens next. Ask what happened.</p>
|
|
<p>At the end, you should have a place full of history, conflicts, mysteries, people, and unfinished business — a place ready to roleplay in.</p>
|
|
|
|
<blockquote>An early Event establishes that the Great Dam collapses in 2281. Nothing has yet been said about why. Later, another player creates an Event in 2263 where engineers discover cracks forming in its foundations. Much later, someone creates an Event in 2258 revealing that the original construction crew knowingly used unsuitable materials. The history of the dam has been created backwards, forwards, and sideways.</blockquote>
|
|
</section>
|
|
|
|
<img class="divider" src="assets/divider.svg" alt="" />
|
|
|
|
<section class="project" id="the-round">
|
|
<figure class="project-image"><img src="assets/science.png" alt="Players at work" /></figure>
|
|
<div class="project-copy">
|
|
<div class="eyebrow">Rules // Turn Structure</div>
|
|
<h2>The Round</h2>
|
|
<h3>One Director. One action each.</h3>
|
|
<p>Each round has one <strong>Director</strong>. The Director takes one action, then every other player takes one action in turn. When everyone has acted, the next player becomes Director and a new round begins.</p>
|
|
<p>The Director follows the same rules as everyone else, with one important exception: <strong>only the Director can normally open or close a Project.</strong> Opening or closing a Project is the Director's action for the turn — they cannot also draw a Card in the same turn.</p>
|
|
<p>On your turn, you may create an Event, introduce or update Cast, add a Glossary entry, or draw a Card. Keep each contribution focused. One new Cast member and one Glossary entry per Event is usually enough.</p>
|
|
<dl class="meta">
|
|
<div><dt>Director only</dt><dd>Open or close a Project</dd></div>
|
|
<div><dt>Anyone</dt><dd>Create an Event</dd></div>
|
|
<div><dt>Anyone</dt><dd>Draw a Card instead of acting</dd></div>
|
|
<div><dt>Good length</dt><dd>Nine rounds to start</dd></div>
|
|
</dl>
|
|
<blockquote>"Sam closes Construction of the Great Dam, establishing its completion on 2260-09-03. Alex creates an Event in The Age of Misconception. Mara jumps back to 2254. Lee creates a standalone Event about the colony's first election. The round ends. Alex becomes Director."</blockquote>
|
|
</div>
|
|
</section>
|
|
|
|
<img class="divider" src="assets/divider.svg" alt="" />
|
|
|
|
<section class="project" id="projects">
|
|
<figure class="project-image"><img src="assets/engineering.png" alt="Engineers planning infrastructure" /></figure>
|
|
<div class="project-copy">
|
|
<div class="eyebrow">Rules // What You Create</div>
|
|
<h2>Projects and Events</h2>
|
|
<h3>Long arcs and specific moments</h3>
|
|
<p><strong>Projects</strong> are the long arcs of the colony's history — a construction effort, a political movement, a decade of misconception. Several can exist simultaneously. Try not to have too many open at once. When you open a Project, give it a start date and a Mood (Light or Dark). Its Mood describes the arc as a whole.</p>
|
|
<p>A Project may begin before the timeframe, end after it, or remain unfinished entirely. You may establish its ending before its beginning — then let players discover what led there.</p>
|
|
<p><strong>Events</strong> are moments. Most belong to a Project, but they do not have to. Give each an Event a date, describe what happened, and optionally a Mood. You may place an Event anywhere in the timeline where it makes sense — you are never required to continue from the most recently created Event.</p>
|
|
<p><strong>Mood</strong> is Light or Dark — hopeful or tragic, constructive or destructive. A Dark Project can contain Light Events. A Light Project can contain Dark Events. Mood describes the overall direction, not every moment inside it.</p>
|
|
<dl class="meta">
|
|
<div><dt>Projects</dt><dd>Long arcs — opened and closed by the Director</dd></div>
|
|
<div><dt>Events</dt><dd>Moments — any player, any date</dd></div>
|
|
<div><dt>Light mood</dt><dd>Hopeful, constructive, triumphant</dd></div>
|
|
<div><dt>Dark mood</dt><dd>Dangerous, destructive, tragic</dd></div>
|
|
</dl>
|
|
<blockquote>"Construction of the Great Dam — Mood: Light — Starts: 2251-05-12. A Dark Event in 2257 traps six workers inside for eleven hours. The Event is Dark, but the Project remains Light overall. Its history is about building something the colony needs, even though that history contains suffering."</blockquote>
|
|
</div>
|
|
</section>
|
|
|
|
<img class="divider" src="assets/divider.svg" alt="" />
|
|
|
|
<section class="project" id="cast">
|
|
<figure class="project-image"><img src="assets/labour.png" alt="Colony workers" /></figure>
|
|
<div class="project-copy">
|
|
<div class="eyebrow">Rules // People, Ideas & Cards</div>
|
|
<h2>Cast, Glossary, and Cards</h2>
|
|
<h3>Record who matters. Define what is unique.</h3>
|
|
<p>The <strong>Cast</strong> records people who matter to the history. You do not need to add every person who appears. If someone is important enough to return, affect the colony, or be remembered, add them. Cast members are not protected — they can change allegiance, disappear, or die. When someone permanently leaves the story, give them an end date.</p>
|
|
<p>The <strong>Glossary</strong> records concepts unique to the colony: technologies, places, customs, discoveries, slang. If players are likely to ask "what does that mean?" later, it probably belongs there. Existing entries can be expanded as the history reveals more.</p>
|
|
<p>On your turn, instead of creating something yourself, you may <strong>draw a Card</strong>. Each Card gives you two alternatives, A and B. Choose one and do what it says. Cards can break the normal rules — a non-Director can open a Project if a Card says so. Cards cannot break Truths. Drawing a Card uses your entire action.</p>
|
|
<blockquote>"Dr. Ilya Venn — Chief reactor physicist. Brilliant, impatient, and absolutely certain the reactor failed because someone sabotaged it. Years later, another player creates an Event where Ilya disappears while investigating maintenance records. Their Cast entry receives an end date — but their fate is left unknown."</blockquote>
|
|
</div>
|
|
</section>
|
|
|
|
<img class="divider" src="assets/divider.svg" alt="" />
|
|
|
|
<section class="document" id="setup">
|
|
<div class="eyebrow">Before Play // Setup</div>
|
|
<h2 style="color:var(--ink)">Create the Colony</h2>
|
|
<h3>Three steps before the first round</h3>
|
|
<p>Together, give your colony a title and a short description. Establish what everyone needs to know before play begins, but leave room for discovery. Decide when the history begins and ends — dates use ISO format, such as <code>2247-03-13</code>.</p>
|
|
<p>Then create two Events together: an <strong>Opening Event</strong> at the beginning of the timeframe and a <strong>Closing Event</strong> at the end. Give each a Mood, Light or Dark. These Events form the edges of your canvas. They do not explain how the colony gets from one to the other.</p>
|
|
<p>Next, establish the <strong>Truths</strong> of your setting. A Truth forbids or establishes something absolute — <em>there is no faster-than-light travel</em>, or <em>the colony is oppressed by its government</em>. Go around the table, propose or pass. Discuss each before adding it. Truths cannot be contradicted by anything created during play. Fewer is usually better.</p>
|
|
<p>Finally, choose <strong>Disciplines</strong> (optional). There are three: <strong>Scientists</strong> explore and research. <strong>Engineers</strong> build and maintain. <strong>Workers</strong> operate the colony and live with the consequences. Players may champion a Discipline — if possible, let each be chosen before anyone doubles up. Disciplines are a perspective, not a power. Projects and Events may belong to one Discipline or none.</p>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="shell">
|
|
<p>Space Station 33<br />Collaborative Colony History</p>
|
|
<p>You are not completing the colony's story.<br />You are creating the place where its next story can begin.</p>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|