1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
|
main { background-color: dimgray; }
#roles { background-color: gray; }
header { background-color: silver; }
header.your_turn { background-color: orange; }
#role_Red .role_name { background-color: salmon; }
#role_Blue .role_name { background-color: #a0caec; }
#role_Yellow .role_name { background-color: #ffe175; }
#role_Green .role_name { background-color: #80b563; }
#turn_info { background-color: gainsboro; }
.role_vp { float: right; }
#mapwrap {
width: 2550px;
height: 1650px;
box-shadow: 0px 1px 10px #0008;
margin-bottom: 36px;
}
#map {
width: 2550px;
height: 1650px;
background-size: cover;
background-repeat: no-repeat;
background-image: url(map75.jpg);
background-color: #e8d792;
}
#crisis_table {
display: none;
position: absolute;
width: 262px;
height: 356px;
top: 159px;
right: 93px;
}
#crisis_table.p2 {
display: block;
background-image: url(overlay_2p_75.jpg);
}
#crisis_table.p3 {
display: block;
background-image: url(overlay_3p_75.jpg);
}
#pieces div {
position: absolute;
}
#pieces .no_place_governor {
margin-top: 6px;
margin-left: 6px;
border-radius: 0;
}
.dice {
width: 36px;
height: 36px;
border-radius: 6px;
border-width: 2px;
border-style: solid;
background-size: 600% 100%;
background-repeat: no-repeat;
}
.dice.d1 { background-position: 0% 0; }
.dice.d2 { background-position: 20% 0; }
.dice.d3 { background-position: 40% 0; }
.dice.d4 { background-position: 60% 0; }
.dice.d5 { background-position: 80% 0; }
.dice.d6 { background-position: 100% 0; }
.dice.black {
background-image: url(images/die_white_pips.svg);
background-color: #444;
}
.dice.white {
background-image: url(images/die_black_pips.svg);
background-color: #eee;
}
.dice.black { border-color: #595959 #303030 #303030 #595959; box-shadow: 0 0 0 1px #0c0c0c, 1px 2px 4px #0008; }
.dice.white { border-color: #ffffff #b1b1b1 #b1b1b1 #ffffff; box-shadow: 0 0 0 1px #424242, 1px 2px 4px #0008; }
/* COUNTERS */
.amphitheater, .basilica, .limes { background-color: #efebea; }
.red { background-color: #ed1b2f; }
.blue { background-color: #a0caec; }
.yellow { background-color: #ffe175; }
.green { background-color: #80b563; }
.alamanni { background-color: #c3bc8e; }
.franks { background-color: #9cb4be; }
.goths { background-color: #3a9cd6; }
.nomads { background-color: #f99d1c; }
.sassanids { background-color: #8e5ca6; }
.rival { background-color: #b8b996; }
.militia, .legion { background-color: #ffffff; }
.neutral { background-color: #e3dedc; }
/* :r !node tools/gencolors.js */
.amphitheater, .basilica, .limes { border-color: #fffefd #b2aead #b2aead #fffefd; box-shadow: 0 0 0 1px #444140, 1px 2px 4px #0008; }
.red { border-color: #ff5455 #c00000 #c00000 #ff5455; box-shadow: 0 0 0 1px #680000, 1px 2px 4px #0008; }
.blue { border-color: #d5ffff #6e96b6 #6e96b6 #d5ffff; box-shadow: 0 0 0 1px #113854, 1px 2px 4px #0008; }
.yellow { border-color: #fffe92 #c3a634 #c3a634 #fffe92; box-shadow: 0 0 0 1px #553a00, 1px 2px 4px #0008; }
.green { border-color: #ace48f #568837 #568837 #ace48f; box-shadow: 0 0 0 1px #033600, 1px 2px 4px #0008; }
.alamanni { border-color: #f7efc0 #928b5f #928b5f #f7efc0; box-shadow: 0 0 0 1px #393204, 1px 2px 4px #0008; }
.franks { border-color: #cce5ef #6f868f #6f868f #cce5ef; box-shadow: 0 0 0 1px #1d323a, 1px 2px 4px #0008; }
.goths { border-color: #68c6ff #0073ab #0073ab #68c6ff; box-shadow: 0 0 0 1px #002759, 1px 2px 4px #0008; }
.nomads { border-color: #ffcf60 #c56c00 #c56c00 #ffcf60; box-shadow: 0 0 0 1px #610700, 1px 2px 4px #0008; }
.sassanids { border-color: #b17dca #6d3c83 #6d3c83 #b17dca; box-shadow: 0 0 0 1px #2f0042, 1px 2px 4px #0008; }
.rival { border-color: #eaebc7 #888968 #888968 #eaebc7; box-shadow: 0 0 0 1px #323214, 1px 2px 4px #0008; }
.neutral { border-color: #fffefc #a9a4a2 #a9a4a2 #fffefc; box-shadow: 0 0 0 1px #403d3b, 1px 2px 4px #0008; }
.militia { border-color: #ffffff #b2b2b2 #b2b2b2 #ffffff; box-shadow: 0 0 0 1px #434343, 1px 2px 4px #0008; }
.legion { border-color: #ffffff #b2b2b2 #b2b2b2 #ffffff; box-shadow: 0 0 0 1px #434343, 1px 2px 4px #0008; }
.no_place_governor { border-color: #8e8e8e #505050 #505050 #8e8e8e; box-shadow: 0 0 0 1px #191919, 1px 2px 4px #0008; }
#legion_1 { background-position: 0px 0px }
#legion_2 { background-position: -55px 0px }
#legion_3 { background-position: -110px 0px }
#legion_4 { background-position: -165px 0px }
#legion_5 { background-position: -220px 0px }
#legion_6 { background-position: -275px 0px }
#legion_7 { background-position: -330px 0px }
#legion_8 { background-position: -385px 0px }
#legion_9 { background-position: -440px 0px }
#legion_10 { background-position: 0px -55px }
#legion_11 { background-position: -55px -55px }
#legion_12 { background-position: -110px -55px }
#legion_13 { background-position: -165px -55px }
#legion_14 { background-position: -220px -55px }
#legion_15 { background-position: -275px -55px }
#legion_16 { background-position: -330px -55px }
#legion_17 { background-position: -385px -55px }
#legion_18 { background-position: -440px -55px }
#legion_19 { background-position: 0px -110px }
#legion_20 { background-position: -55px -110px }
#legion_21 { background-position: -110px -110px }
#legion_22 { background-position: -165px -110px }
#legion_23 { background-position: -220px -110px }
#legion_24 { background-position: -275px -110px }
#legion_25 { background-position: -330px -110px }
#legion_26 { background-position: -385px -110px }
#legion_27 { background-position: -440px -110px }
#legion_28 { background-position: 0px -165px }
#legion_29 { background-position: -55px -165px }
#legion_30 { background-position: -110px -165px }
#legion_31 { background-position: -165px -165px }
#legion_32 { background-position: -220px -165px }
#legion_33 { background-position: -275px -165px }
.amphitheater, .basilica, .limes {
width: 92px;
height: 46px;
background-size: 92px 46px;
border-radius: 8px;
border-width: 2px;
border-style: solid;
}
.militia, .legion,
.alamanni, .franks, .goths, .nomads, .sassanids, .rival,
.general, .emperor_turns, .no_place_governor {
width: 55px;
height: 55px;
background-size: 55px 55px;
border-radius: 8px;
border-width: 2px;
border-style: solid;
}
.governor, .legacy, .legacy_40 {
width: 50px;
height: 50px;
background-size: 50px 50px;
border-radius: 50%;
border-width: 2px;
border-style: solid;
}
.castra, .quaestor, .mob, .mob_x2, .seat_of_power, .breakaway {
width: 54px;
height: 64px;
background-size: 54px 64px;
background-color: transparent;
box-shadow: none;
filter: drop-shadow(1px 1px 6px #0008);
}
.legion {
background-size: 900% 400%;
}
.no_place_governor { background-image: url(images/no_place_governor.png) }
.legion { background-image: url(images/legion_full.png) }
.legion.reduced { background-image: url(images/legion_reduced.png) }
.amphitheater { background-image: url(images/amphitheater.png) }
.basilica { background-image: url(images/basilica.png) }
.limes { background-image: url(images/limes.png) }
.militia { background-image: url(images/militia.png) }
.alamanni { background-image: url(images/alamanni_active.png) }
.franks { background-image: url(images/franks_active.png) }
.goths { background-image: url(images/goths_active.png) }
.nomads { background-image: url(images/nomads_active.png) }
.sassanids { background-image: url(images/sassanids_active.png) }
.alamanni.inactive { background-image: url(images/alamanni_inactive.png) }
.franks.inactive { background-image: url(images/franks_inactive.png) }
.goths.inactive { background-image: url(images/goths_inactive.png) }
.nomads.inactive { background-image: url(images/nomads_inactive.png) }
.sassanids.inactive { background-image: url(images/sassanids_inactive.png) }
.neutral.governor { background-image: url(images/neutral_governor.png) }
#ardashir { background-image: url(images/ardashir.png) }
#cniva { background-image: url(images/cniva.png) }
#shapur { background-image: url(images/shapur.png) }
#postumus { background-image: url(images/rival_postumus.png) }
#priest_king { background-image: url(images/rival_priest_king.png) }
#zenobia { background-image: url(images/rival_zenobia.png) }
.blue.governor { background-image: url(images/blue_governor.png) }
.green.governor { background-image: url(images/green_governor.png) }
.red.governor { background-image: url(images/red_governor.png) }
.yellow.governor { background-image: url(images/yellow_governor.png) }
.blue.legacy { background-image: url(images/blue_legacy.png) }
.green.legacy { background-image: url(images/green_legacy.png) }
.red.legacy { background-image: url(images/red_legacy.png) }
.yellow.legacy { background-image: url(images/yellow_legacy.png) }
.blue.legacy_40 { background-image: url(images/blue_legacy_40.png) }
.green.legacy_40 { background-image: url(images/green_legacy_40.png) }
.red.legacy_40 { background-image: url(images/red_legacy_40.png) }
.yellow.legacy_40 { background-image: url(images/yellow_legacy_40.png) }
.blue.general { background-image: url(images/blue_general.png) }
.green.general { background-image: url(images/green_general.png) }
.red.general { background-image: url(images/red_general.png) }
.yellow.general { background-image: url(images/yellow_general.png) }
.blue.emperor_turns { background-image: url(images/blue_emperor_turns.png) }
.green.emperor_turns { background-image: url(images/green_emperor_turns.png) }
.red.emperor_turns { background-image: url(images/red_emperor_turns.png) }
.yellow.emperor_turns { background-image: url(images/yellow_emperor_turns.png) }
.castra { background-image: url(images/castra.svg) }
.quaestor { background-image: url(images/quaestor.svg) }
.mob { background-image: url(images/mob.svg) }
.mob_x2 { background-image: url(images/mob_x2.svg) }
.blue.seat_of_power { background-image: url(images/blue_seat_of_power.svg) }
.green.seat_of_power { background-image: url(images/green_seat_of_power.svg) }
.red.seat_of_power { background-image: url(images/red_seat_of_power.svg) }
.yellow.seat_of_power { background-image: url(images/yellow_seat_of_power.svg) }
.blue.breakaway { background-image: url(images/blue_breakaway.svg) }
.green.breakaway { background-image: url(images/green_breakaway.svg) }
.red.breakaway { background-image: url(images/red_breakaway.svg) }
.yellow.breakaway { background-image: url(images/yellow_breakaway.svg) }
/* CARDS */
.card {
width: 250px;
height: 350px;
background-size: 250px 350px;
background-repeat: no-repeat;
border-radius: 16px;
box-shadow: 0 0 0 1px #444, 0 0 4px #000;
}
.card.event_back{background-image:url(cards.1x/event_back.jpg)}
.card.event_1{background-image:url(cards.1x/event_01.jpg)}
.card.event_2{background-image:url(cards.1x/event_02.jpg)}
.card.event_3{background-image:url(cards.1x/event_03.jpg)}
.card.event_4{background-image:url(cards.1x/event_04.jpg)}
.card.event_5{background-image:url(cards.1x/event_05.jpg)}
.card.event_6{background-image:url(cards.1x/event_06.jpg)}
.card.event_7{background-image:url(cards.1x/event_07.jpg)}
.card.event_8{background-image:url(cards.1x/event_08.jpg)}
.card.event_9{background-image:url(cards.1x/event_09.jpg)}
.card.event_10{background-image:url(cards.1x/event_10.jpg)}
.card.event_11{background-image:url(cards.1x/event_11.jpg)}
.card.event_12{background-image:url(cards.1x/event_12.jpg)}
.card.event_13{background-image:url(cards.1x/event_13.jpg)}
.card.event_14{background-image:url(cards.1x/event_14.jpg)}
.card.event_15{background-image:url(cards.1x/event_15.jpg)}
.card.influence_back{background-image:url(cards.1x/influence_back.jpg)}
.card.influence_m1{background-image:url(cards.1x/influence_m1.jpg)}
.card.influence_m2{background-image:url(cards.1x/influence_m2.jpg)}
.card.influence_m3{background-image:url(cards.1x/influence_m3.jpg)}
.card.influence_m4{background-image:url(cards.1x/influence_m4.jpg)}
.card.influence_p1{background-image:url(cards.1x/influence_p1.jpg)}
.card.influence_p2{background-image:url(cards.1x/influence_p2.jpg)}
.card.influence_p3{background-image:url(cards.1x/influence_p3.jpg)}
.card.influence_p4{background-image:url(cards.1x/influence_p4.jpg)}
.card.influence_s1{background-image:url(cards.1x/influence_s1.jpg)}
.card.influence_s2{background-image:url(cards.1x/influence_s2.jpg)}
.card.influence_s3{background-image:url(cards.1x/influence_s3.jpg)}
.card.influence_s4{background-image:url(cards.1x/influence_s4.jpg)}
@media (min-resolution:97dpi) {
.card.event_back{background-image:url(cards.2x/event_back.jpg)}
.card.event_1{background-image:url(cards.2x/event_01.jpg)}
.card.event_2{background-image:url(cards.2x/event_02.jpg)}
.card.event_3{background-image:url(cards.2x/event_03.jpg)}
.card.event_4{background-image:url(cards.2x/event_04.jpg)}
.card.event_5{background-image:url(cards.2x/event_05.jpg)}
.card.event_6{background-image:url(cards.2x/event_06.jpg)}
.card.event_7{background-image:url(cards.2x/event_07.jpg)}
.card.event_8{background-image:url(cards.2x/event_08.jpg)}
.card.event_9{background-image:url(cards.2x/event_09.jpg)}
.card.event_10{background-image:url(cards.2x/event_10.jpg)}
.card.event_11{background-image:url(cards.2x/event_11.jpg)}
.card.event_12{background-image:url(cards.2x/event_12.jpg)}
.card.event_13{background-image:url(cards.2x/event_13.jpg)}
.card.event_14{background-image:url(cards.2x/event_14.jpg)}
.card.event_15{background-image:url(cards.2x/event_15.jpg)}
.card.influence_back{background-image:url(cards.2x/influence_back.jpg)}
.card.influence_m1{background-image:url(cards.2x/influence_m1.jpg)}
.card.influence_m2{background-image:url(cards.2x/influence_m2.jpg)}
.card.influence_m3{background-image:url(cards.2x/influence_m3.jpg)}
.card.influence_m4{background-image:url(cards.2x/influence_m4.jpg)}
.card.influence_p1{background-image:url(cards.2x/influence_p1.jpg)}
.card.influence_p2{background-image:url(cards.2x/influence_p2.jpg)}
.card.influence_p3{background-image:url(cards.2x/influence_p3.jpg)}
.card.influence_p4{background-image:url(cards.2x/influence_p4.jpg)}
.card.influence_s1{background-image:url(cards.2x/influence_s1.jpg)}
.card.influence_s2{background-image:url(cards.2x/influence_s2.jpg)}
.card.influence_s3{background-image:url(cards.2x/influence_s3.jpg)}
.card.influence_s4{background-image:url(cards.2x/influence_s4.jpg)}
}
.influence_m1 + .influence_m1 { margin-left: -180px; }
.influence_p1 + .influence_p1 { margin-left: -180px; }
.influence_s1 + .influence_s1 { margin-left: -180px; }
.influence_m2 + .influence_m2 { margin-left: -180px; }
.influence_p2 + .influence_p2 { margin-left: -180px; }
.influence_s2 + .influence_s2 { margin-left: -180px; }
.influence_m3 + .influence_m3 { margin-left: -180px; }
.influence_p3 + .influence_p3 { margin-left: -180px; }
.influence_s3 + .influence_s3 { margin-left: -180px; }
.influence_m4 + .influence_m4 { margin-left: -180px; }
.influence_p4 + .influence_p4 { margin-left: -180px; }
.influence_s4 + .influence_s4 { margin-left: -180px; }
/* PANELS */
.panel {
min-width: 1368px;
max-width: 1636px;
margin: 12px auto 36px auto;
background-color: #555;
}
.panel_header {
background-color: #444;
color: white;
user-select: none;
font-weight: bold;
text-align: center;
padding: 3px 1em;
}
.panel_body {
display: flex;
justify-content: start;
flex-wrap: wrap;
padding: 18px;
gap: 18px;
}
#action_body {
display: block;
}
.action_row {
display: flex;
flex-wrap: wrap;
margin: 8px;
}
|
