@mcptoolshop/sovereign 1.0.1 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/CHANGELOG.md +58 -1
  2. package/README.es.md +65 -20
  3. package/README.fr.md +50 -5
  4. package/README.hi.md +67 -22
  5. package/README.it.md +50 -5
  6. package/README.ja.md +50 -5
  7. package/README.md +49 -4
  8. package/README.pt-BR.md +50 -5
  9. package/README.zh.md +84 -39
  10. package/bin/sovereign.js +3 -3
  11. package/package.json +2 -2
  12. package/release/00-START-HERE.html +2 -2
  13. package/release/CHANGELOG.md +52 -1
  14. package/release/README.txt +3 -3
  15. package/release/balance-evidence/raw-data/sovereign-diagnosis-canonical-100-A.json +1 -0
  16. package/release/balance-evidence/raw-data/sovereign-diagnosis-canonical-100-B.json +1 -0
  17. package/release/balance-evidence/raw-data/sovereign-diagnosis-canonical-400.json +1 -0
  18. package/release/balance-evidence/raw-data/sovereign-diagnosis-mfg-mirror-100.json +1 -0
  19. package/release/balance-evidence/sovereign-failure-pressure-diagnosis.html +494 -0
  20. package/release/board-game/README.txt +1 -1
  21. package/release/board-game/V0.10-RULES-ALIGNMENT.md +5 -5
  22. package/release/design-system/README.md +30 -0
  23. package/release/design-system/sovereign-screen-audit-v0.18.html +183 -0
  24. package/release/design-system/sovereign-visual-system-v0.18.html +610 -0
  25. package/release/digital-mode/README.txt +86 -74
  26. package/release/digital-mode/sovereign-solo-v0.10-baseline.html +3884 -0
  27. package/release/digital-mode/sovereign-solo.html +165 -3861
  28. /package/release/board-game/{sovereign-prototype.html → sovereign-board-game.html} +0 -0
package/release/design-system/sovereign-visual-system-v0.18.html ADDED
@@ -0,0 +1,610 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>Sovereign · Visual System Reference v0.18</title>
6
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
7
+ <template id="__bundler_thumbnail" data-bg-color="#221E1A">
8
+ <svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg">
9
+ <rect x="0" y="0" width="1200" height="800" fill="#221E1A"/>
10
+ <g transform="translate(600 400)" fill="#F0E6CD">
11
+ <text x="0" y="-90" text-anchor="middle" font-family="Baskerville, serif" font-size="42" letter-spacing="8">SOVEREIGN</text>
12
+ <text x="0" y="20" text-anchor="middle" font-family="Baskerville, serif" font-size="86" font-style="italic">Visual System</text>
13
+ <text x="0" y="100" text-anchor="middle" font-family="Baskerville, serif" font-size="20" letter-spacing="4">11 SECTIONS · v0.18 POLISHED</text>
14
+ </g>
15
+ </svg>
16
+ </template>
17
+ <style>
18
+ :root {
19
+ --revolutionary-debt:#6E1F1E; --state-debt:#4A6B8A; --revenue-system:#C28A28;
20
+ --commercial-infrastructure:#2E7A6B; --national-finance:#1F2D52;
21
+ --internal-improvements:#B85A28; --manufactures:#8C8A2E; --strategic-industry:#3A3A3A;
22
+ --parchment:#F0E6CD; --parchment-2:#E6DABC; --ink:#1A1612; --highlight:#C8392E;
23
+ --rule:rgba(26,22,18,0.55); --rule-soft:rgba(26,22,18,0.22); --rule-hair:rgba(26,22,18,0.14);
24
+ --foil:#8C6B2A; --foil-soft:#B89554;
25
+ --severity-warning:#C8392E; --severity-catastrophic:#6E1F1E; --severity-pass:#2E7A6B;
26
+ --p0:var(--state-debt); --p1:var(--revolutionary-debt); --p2:var(--commercial-infrastructure);
27
+ --display:"Baskerville","Big Caslon","Hoefler Text","Garamond","Times New Roman",serif;
28
+ --body:"Iowan Old Style","Georgia","Cambria","Times New Roman",serif;
29
+ --ui:-apple-system,"Segoe UI","Helvetica Neue","Arial",system-ui,sans-serif;
30
+ --mono:"SF Mono","Menlo","Consolas","Courier New",monospace;
31
+ --shadow-card:0 2px 0 rgba(26,22,18,0.10), 0 6px 14px -8px rgba(26,22,18,0.35);
32
+ }
33
+ * { box-sizing:border-box; }
34
+ html, body { margin:0; padding:0; background:#221E1A; color:var(--ink); font-family:var(--body); }
35
+ .frame { max-width:1200px; margin:0 auto; background:var(--parchment); min-height:100vh; box-shadow:0 0 0 1px var(--foil-soft) inset, 0 16px 32px -14px rgba(0,0,0,.5); }
36
+ .hd { padding:28px 40px 24px; border-bottom:1.5px solid var(--ink); position:relative; }
37
+ .hd::after { content:""; position:absolute; left:14px; right:14px; bottom:-3px; height:1px; background:var(--foil-soft); opacity:.55; }
38
+ .hd .eyebrow { font-family:var(--ui); font-size:9px; letter-spacing:.32em; text-transform:uppercase; color:var(--foil); }
39
+ .hd .eyebrow::before { content:"§ "; color:var(--foil); font-weight:700; }
40
+ .hd h1 { font-family:var(--display); font-size:44px; line-height:.96; letter-spacing:-.02em; margin:4px 0 6px; }
41
+ .hd .sub { font-family:var(--display); font-style:italic; font-size:14px; max-width:60ch; line-height:1.45; opacity:.85; margin:0; }
42
+ .toc { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
43
+ .toc a { font-family:var(--ui); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; padding:5px 11px; border:1px solid var(--ink); background:var(--parchment-2); color:var(--ink); text-decoration:none; }
44
+ .toc a:hover { background:var(--ink); color:var(--parchment); }
45
+ section { padding:24px 40px; border-bottom:1px solid var(--rule-hair); }
46
+ section > h2 { font-family:var(--display); font-size:24px; line-height:1; margin:0 0 4px; letter-spacing:-.01em; }
47
+ section > .num { font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--foil); }
48
+ section > .blurb { font-family:var(--display); font-style:italic; font-size:12.5px; margin:6px 0 16px; max-width:62ch; opacity:.78; line-height:1.5; }
49
+
50
+ .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
51
+ .grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
52
+ .grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
53
+ .grid-6 { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
54
+
55
+ /* Swatch component */
56
+ .sw-card { padding:0; border:1px solid var(--ink); overflow:hidden; box-shadow:var(--shadow-card); }
57
+ .sw-card .chip { height:80px; }
58
+ .sw-card .meta { padding:8px 10px; background:var(--parchment); }
59
+ .sw-card .meta .nm { font-family:var(--display); font-size:14px; line-height:1; }
60
+ .sw-card .meta .role { font-family:var(--ui); font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; opacity:.65; margin-top:3px; }
61
+ .sw-card .meta .hex { font-family:var(--mono); font-size:9.5px; margin-top:5px; opacity:.85; }
62
+ .sw-card .meta .note { font-family:var(--body); font-size:10px; margin-top:5px; line-height:1.35; opacity:.75; }
63
+
64
+ /* Type ramp */
65
+ .type-row { display:grid; grid-template-columns:120px 1fr; gap:14px; padding:11px 0; border-bottom:0.5px dashed var(--rule-soft); align-items:baseline; }
66
+ .type-row .name { font-family:var(--ui); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--foil); }
67
+ .type-row .name .meta { font-family:var(--mono); font-size:9px; opacity:.7; display:block; margin-top:3px; letter-spacing:.05em; }
68
+ .h1-ex { font-family:var(--display); font-size:38px; line-height:1; letter-spacing:-.01em; }
69
+ .h2-ex { font-family:var(--display); font-size:24px; line-height:1; }
70
+ .h4-ex { font-family:var(--ui); font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; }
71
+ .p-ex { font-family:var(--body); font-size:12px; line-height:1.6; }
72
+ .lede-ex { font-family:var(--display); font-style:italic; font-size:13.5px; line-height:1.45; }
73
+ .meta-ex { font-family:var(--mono); font-size:9px; letter-spacing:.14em; opacity:.7; }
74
+ .ui-ex { font-family:var(--ui); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; }
75
+
76
+ /* Panel demos */
77
+ .panel-demo { background:var(--parchment); border:1.5px solid var(--ink); padding:10px 12px; box-shadow:var(--shadow-card); position:relative; }
78
+ .panel-demo::before { content:""; position:absolute; inset:4px; border:0.5px solid var(--rule-soft); pointer-events:none; }
79
+ .panel-demo .panel-head { display:flex; justify-content:space-between; align-items:baseline; padding-bottom:5px; border-bottom:1px solid var(--ink); margin-bottom:7px; position:relative; }
80
+ .panel-demo .panel-head::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--foil-soft); opacity:.55; }
81
+ .panel-demo .panel-head .name { font-family:var(--ui); font-size:9.5px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; }
82
+ .panel-demo .panel-head .surface-id { font-family:var(--mono); font-size:9px; letter-spacing:.18em; background:var(--foil); color:var(--ink); padding:1px 6px; font-weight:700; }
83
+ .panel-demo .body { font-family:var(--body); font-size:11px; line-height:1.45; }
84
+
85
+ /* Buttons */
86
+ .btn-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:6px 0 12px; }
87
+ .btn { font-family:var(--ui); font-size:11px; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; padding:6px 12px; background:var(--parchment); color:var(--ink); border:1px solid var(--ink); }
88
+ .btn:hover { background:var(--ink); color:var(--parchment); }
89
+ .btn.primary { background:var(--ink); color:var(--parchment); }
90
+ .btn.primary:hover { background:var(--foil); color:var(--ink); }
91
+ .btn[disabled] { opacity:.4; cursor:not-allowed; }
92
+ .pill { font-family:var(--mono); font-size:10px; letter-spacing:.06em; padding:5px 10px; background:var(--ink); color:var(--parchment); }
93
+ .pill.phase { background:var(--parchment-2); color:var(--ink); border:1px solid var(--ink); font-family:var(--ui); font-size:9px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; }
94
+ .pill.active { background:var(--p0); color:#fff; font-family:var(--ui); font-size:9px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; }
95
+ .pill.version { font-family:var(--mono); font-size:9px; letter-spacing:.14em; padding:4px 9px; background:var(--parchment-2); border:0.5px solid var(--rule); color:var(--ink); opacity:.75; }
96
+
97
+ /* Board tile demos */
98
+ .tile-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
99
+ .tile { aspect-ratio:1; position:relative; padding:5px 6px; display:flex; flex-direction:column; justify-content:space-between; background:var(--parchment); border:1px solid var(--ink); font-family:var(--ui); }
100
+ .tile .band { position:absolute; top:0; left:0; right:0; height:8px; box-shadow:inset 0 -1px 0 rgba(26,22,18,0.18); }
101
+ .tile .num { font-family:var(--mono); font-size:8.5px; opacity:.55; margin-top:12px; }
102
+ .tile .nm { font-family:var(--display); font-size:11px; line-height:1.1; text-wrap:balance; padding-top:5px; }
103
+ .tile .label { font-family:var(--ui); font-size:7.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--foil); margin-top:4px; }
104
+ .tile.corner { background:linear-gradient(135deg, var(--parchment-2) 0%, var(--parchment) 100%); border:1px solid var(--foil-soft); }
105
+ .tile.corner .num { display:none; }
106
+ .tile.corner .nm { font-weight:700; text-align:center; padding-top:24px; }
107
+ .tile.corner::before { content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%); width:26px; height:26px; border-radius:50%; border:1.5px solid var(--foil); background:var(--parchment); }
108
+ .tile.corner::after { position:absolute; top:6px; left:0; right:0; text-align:center; font-family:var(--display); font-size:14px; line-height:26px; font-weight:700; }
109
+ .tile.corner.tile-start::after { content:"★"; color:var(--foil); }
110
+ .tile.corner.tile-crisis::after { content:"!"; color:var(--severity-warning); }
111
+ .tile.corner.tile-dividend::after { content:"$"; color:var(--severity-pass); }
112
+ .tile.corner.tile-send::after { content:"→"; color:var(--severity-warning); }
113
+ .tile.sys-rd .band { background:var(--revolutionary-debt); }
114
+ .tile.sys-sd .band { background:var(--state-debt); }
115
+ .tile.sys-rs .band { background:var(--revenue-system); }
116
+ .tile.sys-ci .band { background:var(--commercial-infrastructure); }
117
+ .tile.sys-nf .band { background:var(--national-finance); }
118
+ .tile.sys-ii .band { background:var(--internal-improvements); }
119
+ .tile.sys-mf .band { background:var(--manufactures); }
120
+ .tile.sys-si .band { background:var(--strategic-industry); }
121
+ .tile.tile-route .band { background:var(--ink); background-image:repeating-linear-gradient(90deg,transparent 0 4px,rgba(255,255,255,.5) 4px 5px); }
122
+ .tile.tile-inst { background:radial-gradient(rgba(26,22,18,.05) 0.7px, transparent 1.2px); background-size:5px 5px; background-color:var(--parchment-2); }
123
+ .tile.tile-inst .band { background:var(--ink); background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1.5px); background-size:5px 5px; }
124
+ .tile.tile-debate { background:repeating-linear-gradient(45deg, var(--parchment) 0 4px, var(--parchment-2) 4px 5px); }
125
+ .tile.tile-debate .band { background:var(--ink); }
126
+ .tile.tile-shock { background:repeating-linear-gradient(135deg, var(--parchment) 0 4px, var(--parchment-2) 4px 5px); }
127
+ .tile.tile-shock .band { background:linear-gradient(90deg, var(--highlight) 0 50%, var(--ink) 50%); }
128
+ .tile.tile-tax { background:rgba(200,57,46,.06); }
129
+ .tile.tile-tax .band { background:var(--highlight); }
130
+ .tile.tile-tax .nm { color:var(--severity-warning); font-weight:700; }
131
+ .tile .owner { position:absolute; bottom:4px; right:4px; width:12px; height:12px; border:1.5px solid var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.3); }
132
+ .tile.own-p0 .owner { background:var(--p0); border-radius:50%; }
133
+ .tile.own-p1 .owner { background:var(--p1); border-radius:2px; transform:rotate(45deg); }
134
+ .tile.own-p2 .owner { background:var(--p2); border-radius:2px; }
135
+ .tile .tier-pill { position:absolute; top:11px; right:4px; font-family:var(--display); font-weight:700; font-size:9px; letter-spacing:.04em; background:var(--foil); color:var(--ink); border:1px solid var(--ink); padding:0 4px; }
136
+ .tile.tile-active { outline:3px solid var(--highlight); outline-offset:-3px; }
137
+
138
+ /* Tokens */
139
+ .tok-row { display:flex; gap:14px; align-items:center; }
140
+ .tok { width:24px; height:24px; border:2px solid var(--ink); box-shadow:0 2px 4px rgba(0,0,0,.3); display:inline-block; }
141
+ .tok.p0 { background:var(--p0); border-radius:50%; }
142
+ .tok.p1 { background:var(--p1); border-radius:3px; transform:rotate(45deg); }
143
+ .tok.p2 { background:var(--p2); border-radius:3px; }
144
+ .tok-lbl { display:flex; flex-direction:column; gap:2px; }
145
+ .tok-lbl .nm { font-family:var(--display); font-size:13px; }
146
+ .tok-lbl .meta { font-family:var(--ui); font-size:9px; letter-spacing:.14em; text-transform:uppercase; opacity:.7; }
147
+ .tier-demo { display:flex; gap:10px; align-items:flex-end; }
148
+ .tier-demo .t { display:flex; flex-direction:column; align-items:center; gap:4px; }
149
+ .tier-demo .t .lbl { font-family:var(--mono); font-size:9px; opacity:.7; }
150
+ .tier-demo .t .pill { font-family:var(--display); font-weight:700; font-size:11px; background:var(--foil); color:var(--ink); border:1px solid var(--ink); padding:1px 6px; }
151
+ .tier-demo .t.empty .pill { background:transparent; opacity:.4; }
152
+
153
+ /* Tracks demo */
154
+ .track-demo { padding:10px 12px; background:var(--parchment); border:1px solid var(--ink); margin-bottom:10px; box-shadow:var(--shadow-card); }
155
+ .track-demo .t-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px; }
156
+ .track-demo .t-head .lbl-t { font-family:var(--ui); font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; display:flex; align-items:center; gap:6px; }
157
+ .track-demo .t-head .lbl-t::before { content:""; display:inline-block; width:9px; height:9px; border-radius:50%; }
158
+ .track-demo .credit .lbl-t::before { background:var(--national-finance); }
159
+ .track-demo .resist .lbl-t::before { background:var(--highlight); }
160
+ .track-demo .capac .lbl-t::before { background:var(--manufactures); }
161
+ .track-demo .val { font-family:var(--display); font-size:20px; line-height:1; font-weight:700; }
162
+ .track-demo .scale { display:grid; grid-template-columns:repeat(13,1fr); height:22px; border:1px solid var(--ink); }
163
+ .track-demo .scale .tk { display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:9px; font-weight:700; color:rgba(26,22,18,.55); border-right:0.5px solid var(--rule-soft); position:relative; }
164
+ .track-demo .scale .tk:last-child { border-right:0; }
165
+ .track-demo .scale .tk.major { background:rgba(26,22,18,.05); }
166
+ .track-demo .scale .tk.marker { color:transparent; }
167
+ .track-demo .scale .tk.marker::after { content:""; position:absolute; inset:3px; border-radius:50%; box-shadow:0 0 0 1px var(--parchment), 0 1px 3px rgba(0,0,0,.4); }
168
+ .track-demo.credit-track .scale .tk.marker::after { background:var(--national-finance); }
169
+ .track-demo.resist-track .scale .tk.marker::after { background:var(--highlight); }
170
+ .track-demo.capac-track .scale .tk.marker::after { background:var(--manufactures); }
171
+ .track-demo.credit-track .scale .tk[data-pos="0"] { background:#1A1612; color:var(--parchment); }
172
+ .track-demo.credit-track .scale .tk[data-pos="1"],
173
+ .track-demo.credit-track .scale .tk[data-pos="2"],
174
+ .track-demo.credit-track .scale .tk[data-pos="3"],
175
+ .track-demo.credit-track .scale .tk[data-pos="4"] { background:rgba(200,57,46,.18); }
176
+ .track-demo.credit-track .scale .tk[data-pos="8"],
177
+ .track-demo.credit-track .scale .tk[data-pos="12"] { background:rgba(46,122,107,.18); color:var(--severity-pass); }
178
+ .track-demo.resist-track .scale .tk[data-pos="10"],
179
+ .track-demo.resist-track .scale .tk[data-pos="11"] { background:rgba(110,31,30,.22); }
180
+ .track-demo.resist-track .scale .tk[data-pos="12"] { background:var(--revolutionary-debt); color:var(--parchment); }
181
+ .crisis-tag { font-family:var(--ui); font-size:8px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; padding:2px 7px; margin-top:6px; display:inline-block; }
182
+ .crisis-tag.warning { background:var(--highlight); color:#fff; }
183
+ .crisis-tag.locked { background:var(--ink); color:var(--parchment); }
184
+ .crisis-tag.rebellion { background:var(--revolutionary-debt); color:var(--parchment); }
185
+
186
+ /* Cards */
187
+ .demo-card { padding:12px 14px; background:var(--parchment-2); border:1px solid var(--ink); margin-bottom:8px; box-shadow:var(--shadow-card); }
188
+ .demo-card .band { padding:5px 8px; color:#fff; font-family:var(--ui); font-size:9px; letter-spacing:.18em; text-transform:uppercase; font-weight:800; display:flex; justify-content:space-between; }
189
+ .demo-card.market { background:linear-gradient(180deg, #F2E4C6 0%, #E5D2A5 100%); }
190
+ .demo-card.market .band { background:linear-gradient(90deg, var(--highlight) 0 50%, var(--ink) 50%); }
191
+ .demo-card.debate { background:linear-gradient(180deg, #ECE5D2 0%, #D8CCAD 100%); }
192
+ .demo-card.debate .band { background:var(--ink); color:var(--parchment); }
193
+ .demo-card .nm { font-family:var(--display); font-size:17px; margin-top:6px; }
194
+ .demo-card .effect { font-family:var(--body); font-size:11.5px; line-height:1.5; margin-top:6px; background:rgba(255,255,255,.4); padding:8px 12px; border:0.5px dashed var(--rule); text-align:center; }
195
+ .demo-card .outcomes { display:flex; gap:6px; margin-top:8px; justify-content:center; }
196
+ .demo-card .chip { font-family:var(--ui); font-size:8.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:3px 8px; border:1.5px solid var(--ink); }
197
+ .demo-card .chip.credit { background:var(--national-finance); color:#fff; }
198
+ .demo-card .chip.resist { background:var(--highlight); color:#fff; }
199
+ .demo-card .chip.indust { background:var(--manufactures); color:#fff; }
200
+
201
+ /* Acts demo */
202
+ .act-demo { background:var(--ink); color:var(--parchment); padding:8px 10px; margin-bottom:8px; box-shadow:inset 0 0 0 1px var(--foil-soft); position:relative; }
203
+ .act-demo::after { content:"⚖"; position:absolute; top:5px; right:6px; font-size:11px; color:var(--foil); }
204
+ .act-demo .pretitle { font-family:var(--ui); font-size:8px; letter-spacing:.26em; text-transform:uppercase; color:var(--foil-soft); }
205
+ .act-demo .nm { font-family:var(--display); font-size:18px; margin-top:2px; line-height:1; }
206
+ .act-demo .effect { font-family:var(--body); font-size:10px; line-height:1.4; margin-top:6px; }
207
+ .act-demo .tally { font-family:var(--mono); font-size:10px; letter-spacing:.1em; padding:3px 8px; margin-top:6px; text-align:center; }
208
+ .act-demo .tally.passed { background:var(--severity-pass); color:var(--parchment); }
209
+ .act-demo .tally.failed { background:var(--highlight); color:var(--parchment); }
210
+ .act-demo.passed::before { content:"✓"; position:absolute; top:5px; left:5px; color:var(--severity-pass); font-weight:700; }
211
+ .act-demo.failed::before { content:"✕"; position:absolute; top:5px; left:5px; color:var(--highlight); font-weight:700; }
212
+
213
+ /* Failure-tier event banners */
214
+ .evt-banner { padding:10px 14px; margin-bottom:8px; font-family:var(--body); font-size:12px; line-height:1.5; }
215
+ .evt-banner.crisis { background:rgba(200,57,46,.12); border-left:3px solid var(--highlight); }
216
+ .evt-banner.crisis .actor { color:var(--highlight); font-family:var(--ui); font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:10px; }
217
+ .evt-banner.default { background:var(--ink); color:var(--parchment); border-left:3px solid var(--highlight); }
218
+ .evt-banner.default .actor { color:var(--highlight); font-family:var(--ui); font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:10px; }
219
+ .evt-banner.rebellion { background:var(--revolutionary-debt); color:var(--parchment); border-left:3px solid var(--ink); }
220
+ .evt-banner.rebellion .actor { color:#F0E6CD; font-family:var(--ui); font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:10px; }
221
+
222
+ /* Ledger row demos */
223
+ .ledger-demo { background:var(--parchment); border:1.5px solid var(--ink); padding:6px 12px; box-shadow:var(--shadow-card); font-family:var(--mono); font-size:10px; line-height:1.45; }
224
+ .lr { display:grid; grid-template-columns:80px 130px 1fr; gap:8px; padding:2px 0; border-bottom:0.5px dashed var(--rule-soft); position:relative; }
225
+ .lr .stamp { opacity:.65; }
226
+ .lr .actor { font-family:var(--ui); font-weight:700; font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
227
+ .lr.row-credit-crisis { background:rgba(200,57,46,.12); border-left:3px solid var(--highlight); padding-left:5px; }
228
+ .lr.row-credit-crisis .actor { color:var(--highlight); font-weight:800; }
229
+ .lr.row-default { background:#1A1612; color:var(--parchment); border-left:3px solid var(--highlight); padding:3px 6px; }
230
+ .lr.row-default .actor { color:var(--highlight); font-weight:800; letter-spacing:.14em; }
231
+ .lr.row-default .stamp { color:var(--parchment); opacity:.6; }
232
+ .lr.row-rebellion { background:var(--revolutionary-debt); color:var(--parchment); border-left:3px solid var(--ink); padding:3px 6px; }
233
+ .lr.row-rebellion .actor { color:#F0E6CD; font-weight:800; letter-spacing:.14em; }
234
+ .lr.row-cash .actor { color:var(--national-finance); }
235
+ .lr.row-track .actor { color:var(--manufactures); font-weight:800; }
236
+
237
+ /* Endgame demos */
238
+ .winner-demo { padding:18px 22px; background:var(--commercial-infrastructure); color:var(--parchment); border:1.5px solid var(--ink); position:relative; overflow:hidden; box-shadow:var(--shadow-card); }
239
+ .winner-demo::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg, var(--foil) 0%, #E5C36A 50%, var(--foil) 100%); }
240
+ .winner-demo::after { content:"§"; position:absolute; right:18px; top:50%; transform:translateY(-50%); font-family:var(--display); font-size:60px; opacity:.18; color:#fff; }
241
+ .winner-demo .lbl { font-family:var(--ui); font-size:9px; letter-spacing:.26em; text-transform:uppercase; opacity:.85; }
242
+ .winner-demo .nm { font-family:var(--display); font-size:28px; line-height:1.05; margin-top:2px; }
243
+ .winner-demo .score { font-family:var(--mono); font-size:13px; opacity:.92; margin-top:4px; }
244
+ .posture-row { margin:14px 0 0; display:flex; gap:8px; flex-wrap:wrap; }
245
+ .posture-chip { font-family:var(--ui); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; padding:5px 11px; border:1.5px solid var(--ink); box-shadow:0 1px 0 rgba(26,22,18,.18); }
246
+ .posture-chip.stable { background:var(--commercial-infrastructure); color:#fff; }
247
+ .posture-chip.strained { background:var(--revenue-system); color:var(--ink); }
248
+ .posture-chip.collapsed { background:var(--highlight); color:#fff; }
249
+ .posture-chip.avoided { background:var(--parchment-2); color:var(--ink); }
250
+ .posture-chip.fired { background:var(--ink); color:var(--parchment); }
251
+
252
+ .endgame-narration-demo { margin-top:14px; padding:14px 18px; background:linear-gradient(180deg, var(--parchment-2) 0%, var(--parchment) 100%); border:1.5px solid var(--ink); position:relative; box-shadow:var(--shadow-card); }
253
+ .endgame-narration-demo::before { content:""; position:absolute; inset:4px; border:0.5px solid var(--rule-soft); pointer-events:none; }
254
+ .endgame-narration-demo h3 { font-family:var(--display); font-weight:400; font-style:italic; font-size:20px; margin:0 0 6px; }
255
+ .endgame-narration-demo p { font-family:var(--body); font-size:12px; line-height:1.65; margin:0; }
256
+ .endgame-narration-demo p::first-letter { font-family:var(--display); font-size:26px; line-height:1; padding-right:2px; color:var(--foil); }
257
+
258
+ footer { padding:18px 40px 28px; font-family:var(--mono); font-size:9.5px; opacity:.6; }
259
+ footer .row { display:flex; justify-content:space-between; }
260
+ </style>
261
+ </head>
262
+ <body>
263
+ <div class="frame">
264
+ <header class="hd">
265
+ <div class="eyebrow">Sovereign · Solo / Digital Mode · v0.18 Polished</div>
266
+ <h1>Visual System Reference</h1>
267
+ <p class="sub">The federalist parchment-and-ink design language behind Sovereign. Palette, typography, components, board tiles, tokens, tracks, cards, acts, failure tiers, endgame.</p>
268
+ <div class="toc">
269
+ <a href="#palette">01 Palette</a>
270
+ <a href="#type">02 Typography</a>
271
+ <a href="#panels">03 Panels</a>
272
+ <a href="#controls">04 Controls</a>
273
+ <a href="#tiles">05 Board tiles</a>
274
+ <a href="#tokens">06 Tokens</a>
275
+ <a href="#tracks">07 Track states</a>
276
+ <a href="#cards">08 Cards</a>
277
+ <a href="#acts">09 Acts</a>
278
+ <a href="#failure">10 Failure tiers</a>
279
+ <a href="#endgame">11 Endgame</a>
280
+ </div>
281
+ </header>
282
+
283
+ <section id="palette">
284
+ <div class="num">§ 01</div>
285
+ <h2>Palette</h2>
286
+ <p class="blurb">Federalist parchment ground, ink primary, oxblood / national-finance / federalist gilt as accents. Severity ascends from neutral → pass → warning → catastrophic.</p>
287
+
288
+ <h4 class="h4-ex" style="margin:14px 0 8px">Parchment + ink core</h4>
289
+ <div class="grid-4">
290
+ <div class="sw-card"><div class="chip" style="background:#F0E6CD"></div><div class="meta"><div class="nm">Parchment</div><div class="role">Surface 1</div><div class="hex">#F0E6CD · var(--parchment)</div><div class="note">Primary panel ground. WCAG AA against ink at 14px+.</div></div></div>
291
+ <div class="sw-card"><div class="chip" style="background:#E6DABC"></div><div class="meta"><div class="nm">Parchment 2</div><div class="role">Surface 2</div><div class="hex">#E6DABC · var(--parchment-2)</div><div class="note">Secondary panel ground, vote rows.</div></div></div>
292
+ <div class="sw-card"><div class="chip" style="background:#1A1612"></div><div class="meta"><div class="nm">Ink</div><div class="role">Foreground</div><div class="hex">#1A1612 · var(--ink)</div><div class="note">All primary text + borders. AAA on parchment.</div></div></div>
293
+ <div class="sw-card"><div class="chip" style="background:#8C6B2A"></div><div class="meta"><div class="nm">Foil</div><div class="role">Accent</div><div class="hex">#8C6B2A · var(--foil)</div><div class="note">Federalist gilt, surface IDs, eyebrow accents.</div></div></div>
294
+ </div>
295
+
296
+ <h4 class="h4-ex" style="margin:18px 0 8px">Severity tier</h4>
297
+ <div class="grid-4">
298
+ <div class="sw-card"><div class="chip" style="background:#E6DABC"></div><div class="meta"><div class="nm">Neutral</div><div class="role">Avoided / unset</div><div class="hex">#E6DABC</div><div class="note">"No Credit Crisis" chip ground.</div></div></div>
299
+ <div class="sw-card"><div class="chip" style="background:#2E7A6B"></div><div class="meta"><div class="nm">Pass</div><div class="role">Stable / passed</div><div class="hex">#2E7A6B · var(--severity-pass)</div><div class="note">Act passed, batch progress, stable credit.</div></div></div>
300
+ <div class="sw-card"><div class="chip" style="background:#C8392E"></div><div class="meta"><div class="nm">Warning</div><div class="role">Crisis zone</div><div class="hex">#C8392E · var(--highlight)</div><div class="note">Credit Crisis fire, warning band 1-4.</div></div></div>
301
+ <div class="sw-card"><div class="chip" style="background:#6E1F1E"></div><div class="meta"><div class="nm">Catastrophic</div><div class="role">Default / Rebellion</div><div class="hex">#6E1F1E · var(--severity-catastrophic)</div><div class="note">Default fired (ink-on-warning), Rebellion fired.</div></div></div>
302
+ </div>
303
+
304
+ <h4 class="h4-ex" style="margin:18px 0 8px">System accents (board / set color)</h4>
305
+ <div class="grid-4">
306
+ <div class="sw-card"><div class="chip" style="background:#6E1F1E"></div><div class="meta"><div class="nm">Revolutionary Debt</div><div class="role">Bonds · Continental</div><div class="hex">#6E1F1E</div></div></div>
307
+ <div class="sw-card"><div class="chip" style="background:#4A6B8A"></div><div class="meta"><div class="nm">State Debt</div><div class="role">Bonds · State</div><div class="hex">#4A6B8A</div></div></div>
308
+ <div class="sw-card"><div class="chip" style="background:#C28A28"></div><div class="meta"><div class="nm">Revenue System</div><div class="role">Tariffs / Excise</div><div class="hex">#C28A28</div></div></div>
309
+ <div class="sw-card"><div class="chip" style="background:#2E7A6B"></div><div class="meta"><div class="nm">Commercial Infra.</div><div class="role">Ports / Exchange</div><div class="hex">#2E7A6B</div></div></div>
310
+ <div class="sw-card"><div class="chip" style="background:#1F2D52"></div><div class="meta"><div class="nm">National Finance</div><div class="role">Federal · Bonds</div><div class="hex">#1F2D52</div></div></div>
311
+ <div class="sw-card"><div class="chip" style="background:#B85A28"></div><div class="meta"><div class="nm">Internal Improv.</div><div class="role">Turnpike · Canal</div><div class="hex">#B85A28</div></div></div>
312
+ <div class="sw-card"><div class="chip" style="background:#8C8A2E"></div><div class="meta"><div class="nm">Manufactures</div><div class="role">Textiles · Iron</div><div class="hex">#8C8A2E</div></div></div>
313
+ <div class="sw-card"><div class="chip" style="background:#3A3A3A"></div><div class="meta"><div class="nm">Strategic Industry</div><div class="role">Arms · Naval</div><div class="hex">#3A3A3A</div></div></div>
314
+ </div>
315
+ </section>
316
+
317
+ <section id="type">
318
+ <div class="num">§ 02</div>
319
+ <h2>Typography</h2>
320
+ <p class="blurb">Four typographic registers in system stack only — no web fonts. Baskerville-stack display for emphasis, Iowan Old Style-stack body for reading, system UI sans for chrome, mono for ledger and provenance.</p>
321
+
322
+ <div class="type-row"><div class="name">H1 · Display<span class="meta">38 / 1.0 / -.01em</span></div><div class="h1-ex">Steering the Hamilton System</div></div>
323
+ <div class="type-row"><div class="name">H2 · Display<span class="meta">24 / 1.0</span></div><div class="h2-ex">Endgame Report</div></div>
324
+ <div class="type-row"><div class="name">Lede · Italic<span class="meta">13.5 / 1.45</span></div><div class="lede-ex">You are running federal economic policy across eight laps.</div></div>
325
+ <div class="type-row"><div class="name">Body · Serif<span class="meta">12 / 1.6</span></div><div class="p-ex">After lap 7 the republic's books close. The largest Influence position belongs to Morris with 7 points. You finished with 6.</div></div>
326
+ <div class="type-row"><div class="name">H4 · UI caps<span class="meta">10 / 700 / .22em</span></div><div class="h4-ex">Acts of Congress</div></div>
327
+ <div class="type-row"><div class="name">UI · caps<span class="meta">9.5 / 700 / .18em</span></div><div class="ui-ex">Active: You</div></div>
328
+ <div class="type-row"><div class="name">Meta · Mono<span class="meta">9 / .14em</span></div><div class="meta-ex">L7·T21·#168 · SEED 2026</div></div>
329
+ </section>
330
+
331
+ <section id="panels">
332
+ <div class="num">§ 03</div>
333
+ <h2>Panels</h2>
334
+ <p class="blurb">Every information surface is a parchment panel with ink border, foil rule below the head, gilt surface-id badge at the right of each head. Inner card stroke is a half-pixel rule offset 4px from the border, which prints as a single hairline.</p>
335
+
336
+ <div class="grid-3">
337
+ <div class="panel-demo"><div class="panel-head"><span class="name">Your Treasury</span><span class="surface-id">B</span></div><div class="body"><span style="font-family:var(--display);font-size:22px">₸ $1,500</span><div style="font-family:var(--mono);font-size:9px;opacity:.85;margin-top:4px">Influence est. 3</div></div></div>
338
+ <div class="panel-demo"><div class="panel-head"><span class="name">Shared Tracks</span><span class="surface-id">F</span></div><div class="body">Public Credit 7 · Resistance 3 · Capacity 4</div></div>
339
+ <div class="panel-demo"><div class="panel-head"><span class="name">Acts of Congress</span><span class="surface-id">E</span></div><div class="body"><em style="font-family:var(--display);font-style:italic">No Act currently in vote.</em></div></div>
340
+ <div class="panel-demo"><div class="panel-head"><span class="name">Historical Narration</span><span class="surface-id">N</span></div><div class="body">0 entries</div></div>
341
+ <div class="panel-demo"><div class="panel-head"><span class="name">Event Drawer</span><span class="surface-id">D</span></div><div class="body">Inactive unless a card is drawn.</div></div>
342
+ <div class="panel-demo"><div class="panel-head"><span class="name">Auction</span><span class="surface-id">C′</span></div><div class="body">Inactive unless an auction is open.</div></div>
343
+ </div>
344
+ </section>
345
+
346
+ <section id="controls">
347
+ <div class="num">§ 04</div>
348
+ <h2>Buttons + controls</h2>
349
+ <p class="blurb">Ink-on-parchment primary, parchment-on-ink secondary, foil gilt focus ring. Pills hold seed / phase / active-slot / version. All controls keyboard-focusable with WCAG-compliant focus indication.</p>
350
+
351
+ <h4 class="h4-ex" style="margin:8px 0">Buttons</h4>
352
+ <div class="btn-row">
353
+ <button class="btn primary">Roll Dice</button>
354
+ <button class="btn">Decline</button>
355
+ <button class="btn">Vote Yes</button>
356
+ <button class="btn primary">Resolve Effect</button>
357
+ <button class="btn" disabled>Cancel</button>
358
+ </div>
359
+
360
+ <h4 class="h4-ex" style="margin:8px 0">Pills</h4>
361
+ <div class="btn-row">
362
+ <span class="pill">seed: 2026</span>
363
+ <span class="pill phase">phase: act-vote</span>
364
+ <span class="pill active">Active: You</span>
365
+ <span class="pill version">v0.18 · Phase 6.1</span>
366
+ </div>
367
+ </section>
368
+
369
+ <section id="tiles">
370
+ <div class="num">§ 05</div>
371
+ <h2>Board tiles</h2>
372
+ <p class="blurb">Each board space type has a distinct treatment: corner crests for the four corners (Treasury Opens / Constitutional Crisis / National Dividend / Go to Crisis), system color bands for the eight property families, stippled ground for institutions, hatching for the two card-draw families, dashed crawl for routes, oxblood tint for tax / scandal.</p>
373
+
374
+ <h4 class="h4-ex" style="margin:8px 0">Corner crests</h4>
375
+ <div class="tile-grid" style="grid-template-columns:repeat(4,1fr); max-width:560px">
376
+ <div class="tile corner tile-start"><div class="nm">Treasury Opens</div></div>
377
+ <div class="tile corner tile-crisis"><div class="nm">Constitutional Crisis</div></div>
378
+ <div class="tile corner tile-dividend"><div class="nm">National Dividend</div></div>
379
+ <div class="tile corner tile-send"><div class="nm">Go to Crisis</div></div>
380
+ </div>
381
+
382
+ <h4 class="h4-ex" style="margin:18px 0 8px">Property systems</h4>
383
+ <div class="tile-grid" style="grid-template-columns:repeat(4,1fr); max-width:560px">
384
+ <div class="tile sys-rd"><div class="band"></div><div class="num">01</div><div class="nm">Continental Certificates</div></div>
385
+ <div class="tile sys-sd"><div class="band"></div><div class="num">08</div><div class="nm">South Carolina Debt</div></div>
386
+ <div class="tile sys-rs"><div class="band"></div><div class="num">14</div><div class="nm">Whiskey Excise</div></div>
387
+ <div class="tile sys-ci"><div class="band"></div><div class="num">16</div><div class="nm">New York Harbor</div></div>
388
+ <div class="tile sys-nf"><div class="band"></div><div class="num">23</div><div class="nm">Bank Subscription</div></div>
389
+ <div class="tile sys-ii"><div class="band"></div><div class="num">27</div><div class="nm">Canal Company</div></div>
390
+ <div class="tile sys-mf"><div class="band"></div><div class="num">32</div><div class="nm">Iron Foundry</div></div>
391
+ <div class="tile sys-si"><div class="band"></div><div class="num">39</div><div class="nm">Shipbuilding Yard</div></div>
392
+ </div>
393
+
394
+ <h4 class="h4-ex" style="margin:18px 0 8px">Specials: route · institution · card · tax</h4>
395
+ <div class="tile-grid" style="grid-template-columns:repeat(4,1fr); max-width:560px">
396
+ <div class="tile tile-route"><div class="band"></div><div class="num">05</div><div class="nm">Northern Post Road</div></div>
397
+ <div class="tile tile-inst"><div class="band"></div><div class="num">12</div><div class="nm">Bank of the United States</div></div>
398
+ <div class="tile tile-debate"><div class="band"></div><div class="num">17</div><div class="nm">Republic Debate</div></div>
399
+ <div class="tile tile-shock"><div class="band"></div><div class="num">07</div><div class="nm">Market Shock</div></div>
400
+ <div class="tile tile-tax"><div class="band"></div><div class="num">04</div><div class="nm">Federal Excise</div></div>
401
+ </div>
402
+
403
+ <h4 class="h4-ex" style="margin:18px 0 8px">Owned · upgraded · active</h4>
404
+ <div class="tile-grid" style="grid-template-columns:repeat(4,1fr); max-width:560px">
405
+ <div class="tile sys-nf own-p0"><div class="band"></div><div class="num">21</div><div class="nm">Treasury Securities</div><div class="owner"></div></div>
406
+ <div class="tile sys-sd own-p1"><div class="band"></div><div class="num">09</div><div class="nm">Virginia Debt</div><div class="owner"></div><div class="tier-pill">II</div></div>
407
+ <div class="tile sys-mf own-p2 tile-active"><div class="band"></div><div class="num">31</div><div class="nm">Textile Works</div><div class="owner"></div><div class="tier-pill">III</div></div>
408
+ <div class="tile sys-rs own-p0"><div class="band"></div><div class="num">11</div><div class="nm">Customs House</div><div class="owner"></div><div class="tier-pill">I</div></div>
409
+ </div>
410
+ </section>
411
+
412
+ <section id="tokens">
413
+ <div class="num">§ 06</div>
414
+ <h2>Tokens + tier markers</h2>
415
+ <p class="blurb">Three player slots distinguished by shape AND color so the design works for monochromacy. Tier markers in roman numerals on the board, gilt pill on the treasury holdings list.</p>
416
+
417
+ <h4 class="h4-ex" style="margin:8px 0">Player tokens</h4>
418
+ <div class="tok-row" style="gap:30px; margin-bottom:18px">
419
+ <div style="display:flex; gap:10px; align-items:center"><span class="tok p0"></span><div class="tok-lbl"><div class="nm">Slot 0 · You</div><div class="meta">Circle · state-debt blue</div></div></div>
420
+ <div style="display:flex; gap:10px; align-items:center"><span class="tok p1"></span><div class="tok-lbl"><div class="nm">Slot 1 · Hamilton</div><div class="meta">Diamond · oxblood</div></div></div>
421
+ <div style="display:flex; gap:10px; align-items:center"><span class="tok p2"></span><div class="tok-lbl"><div class="nm">Slot 2 · Slater / Morris</div><div class="meta">Square · green</div></div></div>
422
+ </div>
423
+
424
+ <h4 class="h4-ex" style="margin:8px 0">Tier markers</h4>
425
+ <div class="tier-demo">
426
+ <div class="t empty"><div class="pill">—</div><div class="lbl">tier 0</div></div>
427
+ <div class="t"><div class="pill">I</div><div class="lbl">tier 1</div></div>
428
+ <div class="t"><div class="pill">II</div><div class="lbl">tier 2</div></div>
429
+ <div class="t"><div class="pill">III</div><div class="lbl">tier 3 (max)</div></div>
430
+ </div>
431
+ </section>
432
+
433
+ <section id="tracks">
434
+ <div class="num">§ 07</div>
435
+ <h2>Track states</h2>
436
+ <p class="blurb">Three shared tracks. Each scale is 13 cells wide (0-12). Credit's warning band (1-4) and Default tile (0) are visible at rest; Resistance's warning band (10-11) and Rebellion tile (12) likewise. Crisis tags use both color and text so they read without color.</p>
437
+
438
+ <h4 class="h4-ex" style="margin:8px 0">Public Credit at 7 — safe</h4>
439
+ <div class="track-demo credit-track">
440
+ <div class="t-head credit"><span class="lbl-t">Public Credit</span><span class="val">7</span></div>
441
+ <div class="scale">
442
+ <div class="tk major" data-pos="0">0</div><div class="tk" data-pos="1">1</div><div class="tk" data-pos="2">2</div><div class="tk major" data-pos="3">3</div><div class="tk" data-pos="4">4</div><div class="tk" data-pos="5">5</div><div class="tk major" data-pos="6">6</div><div class="tk marker" data-pos="7">7</div><div class="tk" data-pos="8">8</div><div class="tk major" data-pos="9">9</div><div class="tk" data-pos="10">10</div><div class="tk" data-pos="11">11</div><div class="tk major" data-pos="12">12</div>
443
+ </div>
444
+ </div>
445
+
446
+ <h4 class="h4-ex" style="margin:8px 0">Public Credit at 4 — Credit Crisis warning band entered</h4>
447
+ <div class="track-demo credit-track">
448
+ <div class="t-head credit"><span class="lbl-t">Public Credit</span><span class="val">4</span></div>
449
+ <div class="scale">
450
+ <div class="tk major" data-pos="0">0</div><div class="tk" data-pos="1">1</div><div class="tk" data-pos="2">2</div><div class="tk major" data-pos="3">3</div><div class="tk marker" data-pos="4">4</div><div class="tk" data-pos="5">5</div><div class="tk major" data-pos="6">6</div><div class="tk" data-pos="7">7</div><div class="tk" data-pos="8">8</div><div class="tk major" data-pos="9">9</div><div class="tk" data-pos="10">10</div><div class="tk" data-pos="11">11</div><div class="tk major" data-pos="12">12</div>
451
+ </div>
452
+ <span class="crisis-tag warning">⚠ Credit Crisis zone</span>
453
+ <span class="crisis-tag locked">Credit Crisis fired</span>
454
+ </div>
455
+
456
+ <h4 class="h4-ex" style="margin:8px 0">Public Credit at 0 — Default</h4>
457
+ <div class="track-demo credit-track">
458
+ <div class="t-head credit"><span class="lbl-t">Public Credit</span><span class="val">0</span></div>
459
+ <div class="scale">
460
+ <div class="tk major marker" data-pos="0">0</div><div class="tk" data-pos="1">1</div><div class="tk" data-pos="2">2</div><div class="tk major" data-pos="3">3</div><div class="tk" data-pos="4">4</div><div class="tk" data-pos="5">5</div><div class="tk major" data-pos="6">6</div><div class="tk" data-pos="7">7</div><div class="tk" data-pos="8">8</div><div class="tk major" data-pos="9">9</div><div class="tk" data-pos="10">10</div><div class="tk" data-pos="11">11</div><div class="tk major" data-pos="12">12</div>
461
+ </div>
462
+ <span class="crisis-tag warning">⚠ Default</span>
463
+ </div>
464
+
465
+ <h4 class="h4-ex" style="margin:8px 0">Public Resistance at 11 — Rebellion approaches</h4>
466
+ <div class="track-demo resist-track">
467
+ <div class="t-head resist"><span class="lbl-t">Public Resistance</span><span class="val">11</span></div>
468
+ <div class="scale">
469
+ <div class="tk major" data-pos="0">0</div><div class="tk" data-pos="1">1</div><div class="tk" data-pos="2">2</div><div class="tk major" data-pos="3">3</div><div class="tk" data-pos="4">4</div><div class="tk" data-pos="5">5</div><div class="tk major" data-pos="6">6</div><div class="tk" data-pos="7">7</div><div class="tk" data-pos="8">8</div><div class="tk major" data-pos="9">9</div><div class="tk" data-pos="10">10</div><div class="tk marker" data-pos="11">11</div><div class="tk major" data-pos="12">12</div>
470
+ </div>
471
+ <span class="crisis-tag rebellion">⚠ Rebellion approaches</span>
472
+ </div>
473
+
474
+ <h4 class="h4-ex" style="margin:8px 0">Industrial Capacity at 7</h4>
475
+ <div class="track-demo capac-track">
476
+ <div class="t-head capac"><span class="lbl-t">Industrial Capacity</span><span class="val">7</span></div>
477
+ <div class="scale">
478
+ <div class="tk major" data-pos="0">0</div><div class="tk" data-pos="1">1</div><div class="tk" data-pos="2">2</div><div class="tk major" data-pos="3">3</div><div class="tk" data-pos="4">4</div><div class="tk" data-pos="5">5</div><div class="tk major" data-pos="6">6</div><div class="tk marker" data-pos="7">7</div><div class="tk" data-pos="8">8</div><div class="tk major" data-pos="9">9</div><div class="tk" data-pos="10">10</div><div class="tk" data-pos="11">11</div><div class="tk major" data-pos="12">12</div>
479
+ </div>
480
+ </div>
481
+ </section>
482
+
483
+ <section id="cards">
484
+ <div class="num">§ 08</div>
485
+ <h2>Cards</h2>
486
+ <p class="blurb">Market Shock and Republic Debate cards share a structure but have distinct chrome — Market Shock's band is split warning/ink, Debate's is solid ink. Both surface a dashed-rule effect block and three optional outcome chips (Credit / Resist / Indust).</p>
487
+
488
+ <div class="grid-2">
489
+ <div>
490
+ <h4 class="h4-ex" style="margin:8px 0">Market Shock card (drawer)</h4>
491
+ <div class="demo-card market">
492
+ <div class="band"><span>Market Shock</span><span>№ 03</span></div>
493
+ <div class="nm">Speculation Fever</div>
494
+ <div class="effect">Public Credit -1 if Credit ≥ 7, or Public Credit -2 if Credit ≤ 6. Public Resistance +1. Choose an unowned Rev/State Debt property; auction it.</div>
495
+ <div class="outcomes">
496
+ <span class="chip credit">Credit -1</span>
497
+ <span class="chip resist">Resist +1</span>
498
+ </div>
499
+ </div>
500
+ </div>
501
+ <div>
502
+ <h4 class="h4-ex" style="margin:8px 0">Republic Debate card (drawer)</h4>
503
+ <div class="demo-card debate">
504
+ <div class="band"><span>Republic Debate</span><span>№ 03</span></div>
505
+ <div class="nm">Credit Restored</div>
506
+ <div class="effect">Bond owners (Rev / State / Nat'l Finance) collect 50 TN per property.</div>
507
+ <div class="outcomes">
508
+ <span class="chip credit">Credit +1</span>
509
+ </div>
510
+ </div>
511
+ </div>
512
+ </div>
513
+ </section>
514
+
515
+ <section id="acts">
516
+ <div class="num">§ 09</div>
517
+ <h2>Acts of Congress</h2>
518
+ <p class="blurb">Acts panel uses ink-on-parchment inverted treatment for the active vote, with a gilt scale-of-justice glyph and foil rule. Pass / fail tally chips use the severity palette.</p>
519
+
520
+ <div class="grid-3">
521
+ <div>
522
+ <h4 class="h4-ex" style="margin:8px 0">In vote</h4>
523
+ <div class="act-demo">
524
+ <div class="pretitle">Lap 2 · Federal Act</div>
525
+ <div class="nm">Assumption Act</div>
526
+ <div class="effect">Public Credit +2 if 2/3 vote yes. State debt owners collect a 50 TN bonus per property.</div>
527
+ </div>
528
+ </div>
529
+ <div>
530
+ <h4 class="h4-ex" style="margin:8px 0">Passed</h4>
531
+ <div class="act-demo passed">
532
+ <div class="pretitle">Lap 1 · Federal Act</div>
533
+ <div class="nm">Funding Act</div>
534
+ <div class="effect">Public Credit +2. Revolutionary Debt owners collect 75 TN per property.</div>
535
+ <div class="tally passed">Passed · 3 yes · 0 no</div>
536
+ </div>
537
+ </div>
538
+ <div>
539
+ <h4 class="h4-ex" style="margin:8px 0">Failed</h4>
540
+ <div class="act-demo failed">
541
+ <div class="pretitle">Lap 7 · Federal Act</div>
542
+ <div class="nm">Excise Enforcement</div>
543
+ <div class="effect">Whiskey doubled this lap. Resistance +2.</div>
544
+ <div class="tally failed">Failed · 1 yes · 2 no</div>
545
+ </div>
546
+ </div>
547
+ </div>
548
+ </section>
549
+
550
+ <section id="failure">
551
+ <div class="num">§ 10</div>
552
+ <h2>Failure-tier treatments</h2>
553
+ <p class="blurb">Three escalating tiers. Each fires a distinctly-styled ledger row AND a track-panel chip, so the two surfaces agree without text duplication. Crisis is non-terminal; Default and Rebellion both have reset semantics in the rules layer.</p>
554
+
555
+ <h4 class="h4-ex" style="margin:8px 0">Credit Crisis — warning state</h4>
556
+ <div class="evt-banner crisis"><span class="actor">System · Credit Crisis</span> · Public Credit collapses to 4 · financial panic spreads · Public Resistance rises by 1</div>
557
+ <div class="ledger-demo" style="margin-bottom:18px">
558
+ <div class="lr row-track"><span class="stamp">L4·T12·#100</span><span class="actor">Track · CREDIT</span><span>Speculation Fever · 6 → 4 (-2)</span></div>
559
+ <div class="lr row-credit-crisis"><span class="stamp">L4·T12·#101</span><span class="actor">System · CREDIT_CRISIS</span><span>Public Credit collapses to 4 · financial panic spreads · Public Resistance rises by 1</span></div>
560
+ <div class="lr row-track"><span class="stamp">L4·T12·#102</span><span class="actor">Track · RESISTANCE</span><span>Credit Crisis · 3 → 4 (+1)</span></div>
561
+ </div>
562
+
563
+ <h4 class="h4-ex" style="margin:8px 0">Default — catastrophic credit collapse</h4>
564
+ <div class="evt-banner default"><span class="actor">System · Default</span> · Public Credit = 0 · all players lose 50 % cash + 1 random upgrade · Credit resets to 3</div>
565
+ <div class="ledger-demo" style="margin-bottom:18px">
566
+ <div class="lr row-track"><span class="stamp">L5·T15·#142</span><span class="actor">Track · CREDIT</span><span>Bank Run · 1 → 0 (-1)</span></div>
567
+ <div class="lr row-default"><span class="stamp">L5·T15·#143</span><span class="actor">System · DEFAULT</span><span>Public Credit = 0 · all players lose 50 % cash + 1 random upgrade</span></div>
568
+ </div>
569
+
570
+ <h4 class="h4-ex" style="margin:8px 0">Rebellion — political catastrophe</h4>
571
+ <div class="evt-banner rebellion"><span class="actor">System · Rebellion</span> · Resistance = 12 · Revenue upgrades destroyed · Whiskey owner → Crisis · Resistance → 6</div>
572
+ <div class="ledger-demo">
573
+ <div class="lr row-track"><span class="stamp">L6·T17·#155</span><span class="actor">Track · RESISTANCE</span><span>Whiskey Rebellion · 11 → 12 (+1)</span></div>
574
+ <div class="lr row-rebellion"><span class="stamp">L6·T17·#156</span><span class="actor">System · REBELLION</span><span>Resistance = 12 · Revenue upgrades destroyed · Whiskey owner → Crisis · Resistance → 6</span></div>
575
+ </div>
576
+ </section>
577
+
578
+ <section id="endgame">
579
+ <div class="num">§ 11</div>
580
+ <h2>Endgame components</h2>
581
+ <p class="blurb">The endgame is the dramatic close. Winner card has a gilt rule + § watermark, posture chips compress the failure-tier outcomes, the narration block adds a foil drop-cap and italic display title.</p>
582
+
583
+ <h4 class="h4-ex" style="margin:8px 0">Winner card + posture chips</h4>
584
+ <div class="winner-demo">
585
+ <div class="lbl">Winner</div>
586
+ <div class="nm">Morris · Merchant / Infrastructure</div>
587
+ <div class="score">Influence 7 · cash $1,392 · 4 assets</div>
588
+ </div>
589
+ <div class="posture-row">
590
+ <span class="posture-chip strained">Strained credit · Credit 4</span>
591
+ <span class="posture-chip fired">Credit Crisis fired</span>
592
+ <span class="posture-chip avoided">No Rebellion</span>
593
+ </div>
594
+
595
+ <h4 class="h4-ex" style="margin:14px 0 8px">Republic narration block</h4>
596
+ <div class="endgame-narration-demo">
597
+ <h3>Your Republic, after lap 7</h3>
598
+ <p>After lap 7 the republic's books close. The largest Influence position belongs to Morris with 7 points. You finished with 6. Cash on hand: $1,408. Properties owned: 3. The republic crossed into Credit Crisis — Public Credit collapsed to four or below at least once, ticking Public Resistance up by one. The warning was absorbed without a Default.</p>
599
+ </div>
600
+ </section>
601
+
602
+ <footer>
603
+ <div class="row">
604
+ <span>Sovereign · Visual System Reference · v0.18 polished</span>
605
+ <span>Federalist Treasury palette · 2026 design build</span>
606
+ </div>
607
+ </footer>
608
+ </div>
609
+ </body>
610
+ </html>