-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
1172 lines (1083 loc) · 48.4 KB
/
index.html
File metadata and controls
1172 lines (1083 loc) · 48.4 KB
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
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frosthaven Reference</title>
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<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=Cinzel:wght@400;600;700&family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<style>
/* ── Variables ── */
:root {
--bg: #f0f4f7;
--card: #ffffff;
--border: #d0dce6;
--text: #1a2a38;
--text-sec: #4a6070;
--muted: #708090;
--gold: #c8a84b;
--gold-dark: #a07a20;
--hi-bg: rgba(200,168,75,.10);
--hi-border: #c8a84b;
--tbl-alt: #f4f8fb;
--badge-sz: 48px;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0e1820;
--card: #162230;
--border: #243040;
--text: #dce8f2;
--text-sec: #8aabb8;
--muted: #5a7a8a;
--hi-bg: rgba(200,168,75,.12);
--tbl-alt: #0f1e2a;
}
}
/* ── Reset / Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
font-family: 'Lato', sans-serif;
background: var(--bg);
color: var(--text);
max-width: 540px;
margin: 0 auto;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* ── Sticky shell ── */
.sticky-top {
position: sticky;
top: 0;
z-index: 100;
background: var(--bg);
}
/* ── Header ── */
.site-header {
padding: 14px 16px 12px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 12px;
}
.header-snowflake {
color: var(--gold);
flex-shrink: 0;
}
.header-text { flex: 1; }
.site-title {
font-family: 'Cinzel', serif;
font-size: 1.15rem;
font-weight: 700;
color: var(--text);
letter-spacing: .03em;
line-height: 1.2;
}
.site-subtitle {
font-size: .72rem;
color: var(--muted);
letter-spacing: .05em;
margin-top: 2px;
}
/* ── Tab nav ── */
.tab-nav {
display: flex;
border-bottom: 2px solid var(--border);
background: var(--bg);
}
.tab-btn {
flex: 1;
padding: 10px 4px;
border: none;
background: none;
font-family: 'Cinzel', serif;
font-size: .78rem;
font-weight: 600;
letter-spacing: .06em;
color: var(--muted);
cursor: pointer;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
transition: color .15s, border-color .15s;
text-transform: uppercase;
}
.tab-btn:hover { color: var(--text-sec); }
.tab-btn.active {
color: var(--gold);
border-bottom-color: var(--gold);
}
/* ── Main content ── */
main { padding: 16px 12px 32px; flex: 1; }
/* ── Section header ── */
.section-header {
font-family: 'Cinzel', serif;
font-size: .78rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted);
padding: 20px 4px 8px;
border-bottom: 1px solid var(--border);
margin-bottom: 12px;
}
.section-header:first-child { padding-top: 6px; }
/* ── Card ── */
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
margin-bottom: 12px;
overflow: hidden;
}
.card-header {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px 10px;
border-bottom: 1px solid var(--border);
}
.card-meta { flex: 1; min-width: 0; }
.card-title {
font-family: 'Cinzel', serif;
font-size: .95rem;
font-weight: 600;
color: var(--text);
line-height: 1.25;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.card-sub {
display: block;
font-size: .63rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
margin-top: 2px;
}
.card-body {
padding: 12px 14px;
font-size: .92rem;
line-height: 1.6;
color: var(--text-sec);
}
.card-body p + p { margin-top: 8px; }
/* ── Badge images (game tokens) ── */
.badge-img {
width: var(--badge-sz);
height: var(--badge-sz);
object-fit: contain;
flex-shrink: 0;
border-radius: 4px;
}
/* ── Badge SVGs (hand-drawn hex) ── */
.badge-svg {
width: var(--badge-sz);
height: var(--badge-sz);
flex-shrink: 0;
}
/* ── Tag ── */
.tag-new {
display: inline-block;
font-family: 'Lato', sans-serif;
font-size: .58rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
background: var(--gold);
color: #fff;
padding: 1px 5px;
border-radius: 3px;
vertical-align: middle;
line-height: 1.5;
}
/* ── Callout ── */
.callout {
display: flex;
gap: 8px;
margin-top: 10px;
padding: 9px 11px;
background: var(--hi-bg);
border-left: 3px solid var(--hi-border);
border-radius: 0 6px 6px 0;
font-size: .86rem;
line-height: 1.5;
color: var(--text);
}
.callout-icon { flex-shrink: 0; font-style: normal; }
/* ── Tables ── */
.ref-table, .level-table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
font-size: .85rem;
}
.ref-table th, .ref-table td,
.level-table th, .level-table td {
padding: 6px 8px;
text-align: left;
border: 1px solid var(--border);
}
.ref-table th, .level-table th {
background: var(--tbl-alt);
font-weight: 700;
font-family: 'Cinzel', serif;
font-size: .75rem;
letter-spacing: .05em;
color: var(--text);
}
.ref-table tr:nth-child(even) td,
.level-table tr:nth-child(even) td { background: var(--tbl-alt); }
.level-table td:first-child {
font-weight: 700;
font-family: 'Cinzel', serif;
text-align: center;
width: 36px;
}
.level-table td { text-align: center; }
.level-table .rec-note {
margin-top: 8px;
font-size: .8rem;
color: var(--muted);
font-style: italic;
}
/* ── Tab panels ── */
.tab-panel { display: none; }
.tab-panel.active { display: block; }
/* ── Badge: plain icon with solid background ── */
.badge-icon-wrap {
width: var(--badge-sz);
height: var(--badge-sz);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.badge-icon-wrap img {
width: 65%;
height: 65%;
object-fit: contain;
filter: brightness(0) invert(1);
}
/* ── Page reference ── */
.card-page {
font-size: .68rem;
font-family: 'Lato', sans-serif;
color: var(--muted);
margin-left: auto;
align-self: flex-start;
padding-top: 10px;
white-space: nowrap;
}
/* ── Inline icon ── */
.icon-inline {
display: inline-block;
width: 18px;
height: 18px;
vertical-align: middle;
margin: 0 2px;
position: relative;
top: -1px;
}
/* ── Footer ── */
.site-footer {
border-top: 1px solid var(--border);
padding: 14px 16px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
font-size: .78rem;
}
.kofi-btn {
font-family: 'Lato', sans-serif;
font-size: .78rem;
font-weight: 700;
color: var(--gold);
background: var(--bg);
text-decoration: none;
white-space: nowrap;
opacity: .7;
transition: opacity .15s;
}
.kofi-btn:hover { opacity: 1; }
.footer-sep {
color: var(--border);
user-select: none;
}
.footer-link {
font-family: 'Lato', sans-serif;
font-size: .78rem;
color: var(--muted);
text-decoration: none;
white-space: nowrap;
transition: color .15s;
}
.footer-link:hover { color: var(--text-sec); }
</style>
</head>
<body>
<!-- ═══════════════════════════════════════════
STICKY SHELL: header + tab nav
═══════════════════════════════════════════ -->
<div class="sticky-top">
<header class="site-header">
<!-- Hand-drawn snowflake -->
<svg class="header-snowflake" width="34" height="34" viewBox="0 0 34 34" fill="none" aria-hidden="true">
<!-- 6 main arms -->
<line x1="17" y1="2" x2="17" y2="32" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="2.2" y1="9.5" x2="31.8" y2="24.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="2.2" y1="24.5" x2="31.8" y2="9.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<!-- barbs — top arm -->
<line x1="17" y1="10" x2="13" y2="7" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
<line x1="17" y1="10" x2="21" y2="7" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
<line x1="17" y1="24" x2="13" y2="27" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
<line x1="17" y1="24" x2="21" y2="27" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
<!-- barbs — upper-right arm -->
<line x1="23.5" y1="12.3" x2="27.2" y2="11.3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
<line x1="23.5" y1="12.3" x2="22.2" y2="8.8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
<!-- barbs — lower-right arm -->
<line x1="23.5" y1="21.7" x2="27.2" y2="22.7" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
<line x1="23.5" y1="21.7" x2="22.2" y2="25.2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
<!-- barbs — upper-left arm -->
<line x1="10.5" y1="12.3" x2="6.8" y2="11.3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
<line x1="10.5" y1="12.3" x2="11.8" y2="8.8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
<!-- barbs — lower-left arm -->
<line x1="10.5" y1="21.7" x2="6.8" y2="22.7" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
<line x1="10.5" y1="21.7" x2="11.8" y2="25.2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
</svg>
<div class="header-text">
<h1 class="site-title">Frosthaven Reference</h1>
<p class="site-subtitle">Icons & Commonly Forgotten Rules</p>
</div>
</header>
<nav class="tab-nav" role="tablist" aria-label="Reference sections">
<button class="tab-btn active" role="tab" aria-selected="true" aria-controls="tab-conditions" id="btn-conditions">Conditions</button>
<button class="tab-btn" role="tab" aria-selected="false" aria-controls="tab-attack" id="btn-attack">Attack</button>
<button class="tab-btn" role="tab" aria-selected="false" aria-controls="tab-movement" id="btn-movement">Movement</button>
<button class="tab-btn" role="tab" aria-selected="false" aria-controls="tab-cards" id="btn-cards">Cards</button>
</nav>
</div><!-- /sticky-top -->
<!-- ═══════════════════════════════════════════
MAIN
═══════════════════════════════════════════ -->
<main>
<!-- ─────────────────────────────────────────
CONDITIONS TAB
───────────────────────────────────────── -->
<div id="tab-conditions" class="tab-panel active" role="tabpanel" aria-labelledby="btn-conditions">
<h2 class="section-header">Negative conditions</h2>
<!-- BANE -->
<div class="card">
<div class="card-header">
<img src="assets/icons/bane.svg" class="badge-img" alt="Bane token">
<div class="card-meta">
<div class="card-title">Bane</div>
<span class="card-sub">Negative condition</span>
</div>
<span class="card-page">Page 29</span>
</div>
<div class="card-body">
<p>Suffer <strong>10 damage</strong> at the end of your next turn — unless you are healed before it triggers. Any heal applied before the end of that turn removes Bane and prevents the damage entirely.</p>
<div class="callout"><span class="callout-icon">⚠</span><span>The heal does <em>not</em> have to restore HP, even a <strong>Heal 0</strong> (however, rare) would remove Bane.</span></div>
</div>
</div>
<!-- BRITTLE -->
<div class="card">
<div class="card-header">
<img src="assets/icons/brittle.svg" class="badge-img" alt="Brittle token">
<div class="card-meta">
<div class="card-title">Brittle</div>
<span class="card-sub">Negative condition</span>
</div>
<span class="card-page">Page 29</span>
</div>
<div class="card-body">
<p>The <strong>next instance of damage</strong> you suffer is doubled. Brittle is then removed. Brittle is also removed if you are healed.</p>
<div class="callout"><span class="callout-icon">⚠</span><span>Doubling happens after all other modifiers. A Brittle figure with Shield 2 hit by a 3-damage attack: 3 − 2 = 1 → doubled = 2 damage.</span></div>
</div>
</div>
<!-- CURSE -->
<div class="card">
<div class="card-header">
<img src="assets/icons/curse.svg" class="badge-img" alt="Curse token">
<div class="card-meta">
<div class="card-title">Curse</div>
<span class="card-sub">Negative condition</span>
</div>
<span class="card-page">Page 29</span>
</div>
<div class="card-body">
<p>Shuffle a <strong>×0 null card</strong> into your attack modifier deck. Curse is consumed when the null card is drawn — it is <em>not</em> a standard end-of-turn condition.</p>
<div class="callout"><span class="callout-icon">⚠</span><span>Multiple Curses add multiple ×0 cards. You can have up to 10 curse cards in your deck at once. This number is shared across players and, similarly, monsters.</span></div>
</div>
</div>
<!-- DISARM -->
<div class="card">
<div class="card-header">
<img src="assets/icons/disarm.svg" class="badge-img" alt="Disarm token">
<div class="card-meta">
<div class="card-title">Disarm</div>
<span class="card-sub">Negative condition</span>
</div>
<span class="card-page">Page 28</span>
</div>
<div class="card-body">
<p>Cannot perform any <strong>attack</strong> abilities. The figure may still move, use items, and perform non-attack abilities. Disarm is removed at the end of the figure’s next turn.</p>
</div>
</div>
<!-- IMMOBILIZE -->
<div class="card">
<div class="card-header">
<img src="assets/icons/immobilize.svg" class="badge-img" alt="Immobilize token">
<div class="card-meta">
<div class="card-title">Immobilize</div>
<span class="card-sub">Negative condition</span>
</div>
<span class="card-page">Page 28</span>
</div>
<div class="card-body">
<p>The figure cannot perform any move abilities. Immobilize is removed at the end of the figure’s next turn.</p>
<div class="callout"><span class="callout-icon">⚠</span><span><strong>Push, Pull, and Teleport</strong> still work normally — they are not move abilities. However, <strong>Controlled</strong> and <strong>Granted</strong> movement are prevented: both are move abilities, and Immobilize stops you from performing move abilities entirely.</span></div>
</div>
</div>
<!-- IMPAIR -->
<div class="card">
<div class="card-header">
<img src="assets/icons/impair.svg" class="badge-img" alt="Impair token">
<div class="card-meta">
<div class="card-title">Impair</div>
<span class="card-sub">Negative condition</span>
</div>
<span class="card-page">Page 29</span>
</div>
<div class="card-body">
<p>Cannot <strong>use or trigger any items</strong>. Bonuses already active from previously used items remain in effect. Removed at the end of your next turn.</p>
<div class="callout"><span class="callout-icon">⚠</span><span>Impair only affects characters — monsters cannot gain this condition. A character with Impair still benefits from item bonuses already on their mat; they simply cannot activate new ones.</span></div>
</div>
</div>
<!-- MUDDLE -->
<div class="card">
<div class="card-header">
<img src="assets/icons/muddle.svg" class="badge-img" alt="Muddle token">
<div class="card-meta">
<div class="card-title">Muddle</div>
<span class="card-sub">Negative condition</span>
</div>
<span class="card-page">Page 28</span>
</div>
<div class="card-body">
<p>Perform all attacks at <strong>Disadvantage</strong>. Draw two attack modifier cards; use the worse result and ignore the better one. Muddle is removed at the end of the figure’s next turn.</p>
</div>
</div>
<!-- POISON -->
<div class="card">
<div class="card-header">
<img src="assets/icons/poison.svg" class="badge-img" alt="Poison token">
<div class="card-meta">
<div class="card-title">Poison</div>
<span class="card-sub">Negative condition</span>
</div>
<span class="card-page">Page 29</span>
</div>
<div class="card-body">
<p>All attacks targeting you gain <strong>+1 attack</strong>. Poison is removed when you are healed, but the heal restores <em>no HP</em> while Poison is active.</p>
<div class="callout"><span class="callout-icon">⚠</span><span>Wound and Poison can both be active simultaneously. Wound deals 1 damage per turn; Poison makes all incoming attacks hit harder. Heals will clear both, but restore no HP until Poison is gone.</span></div>
</div>
</div>
<!-- STUN -->
<div class="card">
<div class="card-header">
<img src="assets/icons/stun.svg" class="badge-img" alt="Stun token">
<div class="card-meta">
<div class="card-title">Stun</div>
<span class="card-sub">Negative condition</span>
</div>
<span class="card-page">Page 28</span>
</div>
<div class="card-body">
<p>Cannot perform <strong>any abilities</strong> and cannot use items on your turn. Stun is removed at the end of the figure’s next turn.</p>
<div class="callout"><span class="callout-icon">⚠</span><span>A stunned character must <em>still</em> select two cards at the start of the round to determine initiative, but must discard the cards without playing them.</span></div>
</div>
</div>
<!-- WOUND -->
<div class="card">
<div class="card-header">
<img src="assets/icons/wound.svg" class="badge-img" alt="Wound token">
<div class="card-meta">
<div class="card-title">Wound</div>
<span class="card-sub">Negative condition</span>
</div>
<span class="card-page">Page 29</span>
</div>
<div class="card-body">
<p>Suffer <strong>1 damage</strong> at the start of each of your turns. Removed when you are healed by any amount.</p>
</div>
</div>
<h2 class="section-header">Positive conditions</h2>
<!-- BLESS -->
<div class="card">
<div class="card-header">
<img src="assets/icons/bless.svg" class="badge-img" alt="Bless token">
<div class="card-meta">
<div class="card-title">Bless</div>
<span class="card-sub">Positive condition</span>
</div>
<span class="card-page">Page 28</span>
</div>
<div class="card-body">
<p>Shuffle a <strong>×2 crit card</strong> into your attack modifier deck. Bless is consumed when the ×2 card is drawn — it is <em>not</em> a standard end-of-turn condition.</p>
<div class="callout"><span class="callout-icon">⚠</span><span>Multiple Blesses add multiple ×2 cards. You can have up to 10 bless cards in your deck at once. This number is shared across players and, similarly, monsters.</span></div>
</div>
</div>
<!-- INVISIBLE -->
<div class="card">
<div class="card-header">
<img src="assets/icons/invisible.svg" class="badge-img" alt="Invisible token">
<div class="card-meta">
<div class="card-title">Invisible</div>
<span class="card-sub">Positive condition</span>
</div>
<span class="card-page">Page 28</span>
</div>
<div class="card-body">
<p>Cannot be <strong>targeted</strong> by any enemy ability. Enemies act as if you are not there when choosing targets. Invisible is removed at the end of the figure’s next turn.</p>
<div class="callout"><span class="callout-icon">⚠</span><span>Invisible prevents all enemy targeting, including AOE, but not non-targeted damage.</span></div>
</div>
</div>
<!-- REGENERATE -->
<div class="card">
<div class="card-header">
<img src="assets/icons/regenerate.svg" class="badge-img" alt="Regenerate token">
<div class="card-meta">
<div class="card-title">Regenerate</div>
<span class="card-sub">Positive condition</span>
</div>
<span class="card-page">Page 28</span>
</div>
<div class="card-body">
<p><strong>Heal 1 HP</strong> at the start of each of your turns. Regenerate is removed when the figure suffers damage — not at end of turn.</p>
<div class="callout"><span class="callout-icon">⚠</span><span>If a figure has Regenerate and Wound/Poison can be active simultaneously, regenerate heals first thus removing the negative conditions before they take effect.</span></div>
</div>
</div>
<!-- STRENGTHEN -->
<div class="card">
<div class="card-header">
<img src="assets/icons/strengthen.svg" class="badge-img" alt="Strengthen token">
<div class="card-meta">
<div class="card-title">Strengthen</div>
<span class="card-sub">Positive condition</span>
</div>
<span class="card-page">Page 28</span>
</div>
<div class="card-body">
<p>Perform all attacks at <strong>Advantage</strong>. Draw two attack modifier cards; apply all rolling effects from both, then use the <em>better</em> non-rolling result and discard the worse. Strengthen is removed at the end of the figure’s next turn.</p>
</div>
</div>
<!-- WARD -->
<div class="card">
<div class="card-header">
<img src="assets/icons/ward.svg" class="badge-img" alt="Ward token">
<div class="card-meta">
<div class="card-title">Ward</div>
<span class="card-sub">Positive condition</span>
</div>
<span class="card-page">Page 28</span>
</div>
<div class="card-body">
<p>The <strong>next instance of damage</strong> you would suffer is halved (rounded down). Ward is then removed.</p>
<div class="callout"><span class="callout-icon">⚠</span><span>Halving applies to the final damage after shields. Ward + Shield 2, incoming 5: 5 − 2 = 3 → halved = 1 damage.</span></div>
<div class="callout"><span class="callout-icon">⚠</span><span>If a figure has both <strong>Ward and Brittle</strong> when it suffers damage, they negate each other — both are removed and neither effect applies.</span></div>
</div>
</div>
<h2 class="section-header">When conditions expire</h2>
<!-- CONDITION TIMING — text-only -->
<div class="card">
<div class="card-body">
<p>Most conditions say "removed at the <strong>end of your next turn</strong>." The key is <em>when</em> the condition was applied:</p>
<p><strong>Applied during your turn</strong> — the condition is active for the rest of your current turn <em>and</em> your entire following turn. It is removed at the end of that following turn.</p>
<p><strong>Applied between turns</strong> (by a trap, end-of-round effect, or enemy action during their turn) — the condition lasts through your <em>next</em> full turn and is removed at the end of it.</p>
</div>
</div>
</div><!-- /tab-conditions -->
<!-- ─────────────────────────────────────────
ATTACK TAB
───────────────────────────────────────── -->
<div id="tab-attack" class="tab-panel" role="tabpanel" aria-labelledby="btn-attack">
<h2 class="section-header">Attack Modifiers</h2>
<!-- ADVANTAGE & DISADVANTAGE -->
<div class="card">
<div class="card-header">
<svg class="badge-svg" viewBox="0 0 40 40" aria-label="Advantage & Disadvantage badge">
<!-- two overlapping landscape attack modifier cards -->
<rect x="3" y="10" width="24" height="16" rx="2" fill="none" stroke="#c8a84b" stroke-width="1.8"/>
<rect x="13" y="14" width="24" height="16" rx="2" fill="#c8a84b" stroke="#a07820" stroke-width="1.5"/>
<line x1="17" y1="19" x2="33" y2="19" stroke="white" stroke-width="1.2" stroke-linecap="round"/>
<line x1="17" y1="23" x2="33" y2="23" stroke="white" stroke-width="1.2" stroke-linecap="round"/>
</svg>
<div class="card-meta">
<div class="card-title">Advantage & Disadvantage</div>
<span class="card-sub">Attack modifier rule</span>
</div>
<span class="card-page">Page 27</span>
</div>
<div class="card-body">
<p><strong>Advantage:</strong> Draw cards until you reveal a non-rolling card, then draw one more. Apply all rolling effects and use the <em>better</em> of the two final non-rolling cards. A monster always uses the better card; a character <em>may choose either</em>.</p>
<p><strong>Disadvantage:</strong> Draw cards until you reveal a non-rolling card, then draw one more. Ignore all rolling effects. Use the <em>worse</em> of the two final non-rolling cards.</p>
<div class="callout"><span class="callout-icon">⚠</span><span>Under Disadvantage, rolling modifier effects are <em>entirely ignored</em> — the cards are discarded without effect before comparing the final two.</span></div>
</div>
</div>
<!-- ROLLING MODIFIERS -->
<div class="card">
<div class="card-header">
<img src="assets/icons/rolling.svg" class="badge-img" alt="Rolling modifier token">
<div class="card-meta">
<div class="card-title">Rolling Modifiers</div>
<span class="card-sub">Attack modifier</span>
</div>
<span class="card-page">Page 26</span>
</div>
<div class="card-body">
<p>When you draw a rolling modifier card, <strong>add its effect</strong> to the attack and draw another card. Keep drawing until you reveal a non-rolling card. All rolling effects stack.</p>
<div class="callout"><span class="callout-icon">⚠</span><span>Rolling effects are cumulative — multiple rolling +1 cards each add +1. The chain only ends when a non-rolling card is drawn.</span></div>
</div>
</div>
<!-- CRIT CARD ×2 -->
<div class="card">
<div class="card-header">
<img src="assets/icons/double.png" class="badge-img" alt="Double damage icon">
<div class="card-meta">
<div class="card-title">Crit Card</div>
<span class="card-sub">Attack modifier</span>
</div>
<span class="card-page">Page 26</span>
</div>
<div class="card-body">
<p>Deal <strong>double damage</strong>. The modifier deck is reshuffled at the end of the players turn.</p>
<div class="callout"><span class="callout-icon">⚠</span><span>All modifiers (bonuses, penalties, rolling effects) are <em>added first</em>, then the total is multiplied by 2.</span></div>
</div>
</div>
<!-- NULL CARD ×0 -->
<div class="card">
<div class="card-header">
<img src="assets/icons/null.png" class="badge-img" alt="Null card icon">
<div class="card-meta">
<div class="card-title">Null Card</div>
<span class="card-sub">Attack modifier</span>
</div>
<span class="card-page">Page 26</span>
</div>
<div class="card-body">
<p>Deal <strong>no damage</strong>. The modifier deck is reshuffled at the end of the players turn.</p>
<div class="callout"><span class="callout-icon">⚠</span><span>A Null only nullifies the <em>damage</em> — attack effects like conditions and forced movement still trigger.</span></div>
</div>
</div>
<h2 class="section-header">Attack Effect</h2>
<!-- TARGET -->
<div class="card">
<div class="card-header">
<img src="assets/icons/target.svg" class="badge-img" alt="Target icon">
<div class="card-meta">
<div class="card-title">Target</div>
<span class="card-sub">Attack Effect</span>
</div>
<span class="card-page">Page 21</span>
</div>
<div class="card-body">
<p><strong>Target X</strong> allows an attack ability to target up to X figures. Each targeted figure is attacked separately, drawing a modifier card for each one.</p>
<div class="callout"><span class="callout-icon">⚠</span><span>Targeted effects require line of sight. This requires being able to draw a line from one hex to another without touching a wall.</span></div>
</div>
</div>
<!-- RANGE -->
<div class="card">
<div class="card-header">
<div class="badge-icon-wrap" style="background:#3a8335">
<img src="assets/icons/range.svg" alt="Range icon" style="width:72%;height:72%">
</div>
<div class="card-meta">
<div class="card-title">Range</div>
<span class="card-sub">Attack Effect</span>
</div>
<span class="card-page">Page 21</span>
</div>
<div class="card-body">
<p><strong>Range X</strong> means the attack can target any figure within X hexes. Range is counted along the shortest open path, but the path does not need to be unobstructed — only line-of-sight matters for ranged attacks.</p>
<div class="callout"><span class="callout-icon">⚠</span><span>An attack with no Range value is a <strong>melee</strong> attack and can only target adjacent figures.</span></div>
<div class="callout"><span class="callout-icon">⚠</span><span>Ranged attacks against adjacent figures have Disadvantage.</span></div>
</div>
</div>
<!-- AREA OF EFFECT -->
<div class="card">
<div class="card-header">
<div style="display:flex;gap:4px;flex-shrink:0">
<img src="assets/icons/active-hex.svg" class="badge-img" alt="Active hex">
<img src="assets/icons/ally-hex.svg" class="badge-img" alt="Ally hex">
<img src="assets/icons/target-hex.svg" class="badge-img" alt="Target hex">
<img src="assets/icons/blank-hex.svg" class="badge-img" alt="Blank hex">
</div>
<div class="card-meta">
<div class="card-title">Area of Effect</div>
<span class="card-sub">Attack Effect</span>
</div>
<span class="card-page">Page 22</span>
</div>
<div class="card-body">
<p>Grey indicates where the acting figure occupies. Blue is where an ally <strong>must</strong> occupy. Red is the target of the AOE. Blank are used as spaces between other hex types.</p>
<div class="callout"><span class="callout-icon">⚠</span><span>Area-of-effect (AoE) attacks hit all figures in the pattern simultaneously and do not draw attack modifiers for each target.</span></div>
<div class="callout"><span class="callout-icon">⚠</span><span>Rotating and mirroring the depicted area of effect is permitted.</span></div>
<div class="callout"><span class="callout-icon">⚠</span><span>If an ability with an area of effect gains "+1 <img src="assets/icons/target.svg" class="icon-inline" alt="target icon">," an additional figure within the ability's range, but outside the area of effect, can be targeted.</span></div>
</div>
</div>
<h2 class="section-header">Defense</h2>
<!-- SHIELD & PIERCE -->
<div class="card">
<div class="card-header">
<div style="display:flex;gap:6px;flex-shrink:0">
<div class="badge-icon-wrap" style="background:#3a8335">
<img src="assets/icons/shield.svg" alt="Shield icon">
</div>
<img src="assets/icons/pierce.svg" class="badge-img" alt="Pierce icon">
</div>
<div class="card-meta">
<div class="card-title">Shield & Pierce</div>
<span class="card-sub">Defense</span>
</div>
<span class="card-page">Page 31, 27</span>
</div>
<div class="card-body">
<p><strong>Shield X</strong> reduces incoming attack damage by X for each separate attack. Shield applies after the attack modifier is resolved but before effects like Brittle or Ward.</p>
<p><strong>Pierce X</strong> reduces X points of a target's Shield on this attack. Multiple Pierce effects stack.</p>
<div class="callout"><span class="callout-icon">⚠</span><span>Shield does <em>not</em> reduce damage from traps, hazardous terrain, Wound, Poison, Bane, Retaliate, only effects noted as attacks.</span></div>
</div>
</div>
<!-- RETALIATE -->
<div class="card">
<div class="card-header">
<div class="badge-icon-wrap" style="background:#7a3a20">
<img src="assets/icons/retaliate.svg" alt="Retaliate icon">
</div>
<div class="card-meta">
<div class="card-title">Retaliate</div>
<span class="card-sub">Defense</span>
</div>
<span class="card-page">Page 31</span>
</div>
<div class="card-body">
<p><strong>Retaliate X</strong> causes the attacker to suffer X damage after their attack resolves. Retaliate is triggered by being attacked — not by taking damage.</p>
<div class="callout"><span class="callout-icon">⚠</span><span>An attack fully blocked by Shield (dealing 0 damage) <em>still</em> triggers Retaliate. However, if the attacker is killed by that attack, Retaliate does not trigger — lethal attacks do not trigger Retaliate.</span></div>
</div>
</div>
<h2 class="section-header">Commanding Figures</h2>
<!-- COMMANDING FIGURES -->
<div class="card">
<div class="card-header">
<div style="display:flex;gap:6px;flex-shrink:0">
<div class="badge-icon-wrap" style="background:#3a8335">
<img src="assets/icons/attack.svg" alt="Attack icon">
</div>
<div class="badge-icon-wrap" style="background:#3a8335">
<img src="assets/icons/move.svg" alt="Move icon">
</div>
</div>
<div class="card-meta">
<div class="card-title">Commanding Figures</div>
<span class="card-sub">Off Turn Action Abilities</span>
</div>
<span class="card-page">Page 33</span>
</div>
<div class="card-body">
<p>A figure can be commanded to perform an <img src="assets/icons/attack.svg" class="icon-inline" alt="Attack" style="filter:invert(1)"> <strong>X</strong> or <img src="assets/icons/move.svg" class="icon-inline" alt="Move" style="filter:invert(1)"> <strong>X</strong> ability, even if they have no attack or move stat value (e.g., you can have the Banner of Hope move or wallop an enemy).</p>
<p>However, a figure cannot be commanded to perform an <img src="assets/icons/attack.svg" class="icon-inline" alt="Attack" style="filter:invert(1)"> <strong>± X</strong> or <img src="assets/icons/move.svg" class="icon-inline" alt="Move" style="filter:invert(1)"> <strong>± X</strong> ability if they have no attack or move stat value.</p>
<p>A commanded figure retains all of their persistent bonuses and special traits and the commanded ability is not considered a separate turn.</p>
<div class="callout"><span class="callout-icon">⚠</span><span>The commanding figure rules are complicated, so you should reference the manual for additional details.</span></div>
</div>
</div>
<h2 class="section-header">Attack effect timing</h2>
<!-- ATTACK EFFECT TIMING — text-only with table -->
<div class="card">
<div class="card-body">
<p>Attack effects are applied in a specific order relative to the damage roll. Effects that say "on this attack" apply when listed below:</p>
<table class="ref-table">
<thead>
<tr><th>Effect</th><th>When applied</th></tr>
</thead>
<tbody>
<tr><td>+X Attack</td><td>During damage calculation</td></tr>
<tr><td>Pierce X</td><td>During damage calculation</td></tr>
<tr><td>Conditions (Wound, etc.)</td><td>After damage resolves</td></tr>
<tr><td>Push X / Pull X</td><td>After damage resolves</td></tr>
<tr><td>+X Target</td><td>After attack resolves (next target)</td></tr>
<tr><td>Elemental infuse</td><td>End of your turn</td></tr>
</tbody>
</table>
</div>
</div>
</div><!-- /tab-attack -->
<!-- ─────────────────────────────────────────
MOVEMENT TAB
───────────────────────────────────────── -->
<div id="tab-movement" class="tab-panel" role="tabpanel" aria-labelledby="btn-movement">
<h2 class="section-header">Forced Movement</h2>
<!-- PUSH & PULL -->
<div class="card">
<div class="card-header">
<div style="display:flex;gap:6px;flex-shrink:0">
<div class="badge-icon-wrap" style="background:#3a8335">
<img src="assets/icons/push.svg" alt="Push icon" style="filter:none">
</div>
<div class="badge-icon-wrap" style="background:#3a8335">
<img src="assets/icons/pull.svg" alt="Pull icon" style="filter:none">
</div>
</div>
<div class="card-meta">
<div class="card-title">Push & Pull</div>
<span class="card-sub">Forced movement</span>
</div>
<span class="card-page">Page 32</span>
</div>
<div class="card-body">
<p><strong>Push X</strong> forces the target to move up to X hexes, with each hex moving the target <em>farther away</em> from the source. <strong>Pull X</strong> moves the target up to X hexes <em>closer</em>. The attacker chooses the path.</p>
<p>Forced movement triggers hazardous terrain on each hex entered (but not for flying creatures). All other movement rules apply.</p>
<div class="callout"><span class="callout-icon">⚠</span><span>Forced movement does <em>not</em> cost extra for difficult terrain.</span></div>
</div>
</div>
<h2 class="section-header">Movement</h2>
<!-- STANDARD MOVE -->
<div class="card">
<div class="card-header">
<div style="display:flex;gap:6px;flex-shrink:0">
<div class="badge-icon-wrap" style="background:#3a8335">
<img src="assets/icons/move.svg" alt="Move icon">
</div>
<div class="badge-icon-wrap" style="background:#3a8335">
<img src="assets/icons/jump.svg" alt="Jump icon">
</div>
</div>
<div class="card-meta">
<div class="card-title">Move & Jump</div>
<span class="card-sub">Movement</span>
</div>
<span class="card-page">Page 24</span>
</div>
<div class="card-body">
<p><strong>Move X</strong> allows you to move up to X hexes. Each hex entered costs 1 movement, except difficult terrain which costs 2.</p>
<p><strong>Jump</strong> (as part of a Move ability) ignores all terrain and figures <em>along the path</em>. The final hex still costs 1 movement, still obeys occupancy rules, and still triggers hazardous terrain on landing.</p>
<div class="callout"><span class="callout-icon">⚠</span><span>You cannot end your movement on an occupied hex — whether ally, enemy, or obstacle.</span></div>
</div>
</div>
<!-- FLYING -->
<div class="card">
<div class="card-header">
<div class="badge-icon-wrap" style="background:#3a8335">
<img src="assets/icons/fly.svg" alt="Flying icon">
</div>
<div class="card-meta">
<div class="card-title">Flying</div>
<span class="card-sub">Movement</span>
</div>
<span class="card-page">Page 24</span>
</div>
<div class="card-body">
<p><strong>Flying</strong> allows a figure to ignore all terrain costs and effects <em>along the path</em>, including difficult terrain, hazardous terrain, and obstacles. The figure may pass through hexes occupied by other figures.</p>
<p>The destination hex must still be empty, and hazardous terrain the figure ends on does not deal damage.</p>
<div class="callout"><span class="callout-icon">⚠</span><span>Unlike Jump, Flying applies is an active bonus — not just applying to single move ability.</span></div>
</div>
</div>
<!-- TELEPORT -->
<div class="card">
<div class="card-header">
<div class="badge-icon-wrap" style="background:#3a8335">
<img src="assets/icons/teleport.svg" alt="Teleport icon">
</div>
<div class="card-meta">
<div class="card-title">Teleport</div>
<span class="card-sub">Movement</span>
</div>
<span class="card-page">Page 24</span>
</div>
<div class="card-body">
<p><strong>Teleport X</strong> places the figure on any empty hex within range X. No path is taken — walls, obstacles, terrain, and figures between origin and destination are all ignored.</p>
<p>Teleport is not movement. It is not prevented by Immobilize and does not trigger abilities that react to movement.</p>
<div class="callout"><span class="callout-icon">⚠</span><span>No terrain effects apply along the way, but hazardous terrain on the <em>destination</em> hex still deals damage on arrival.</span></div>
<div class="callout"><span class="callout-icon">⚠</span><span>A figure cannot teleport into an unrevealed room, but can teleport into a door, opening it.</span></div>
</div>
</div>
<h2 class="section-header">Miscellaneous</h2>
<!-- LOOT -->
<div class="card">
<div class="card-header">
<div class="badge-icon-wrap" style="background:#3a8335">
<img src="assets/icons/loot.svg" alt="Loot icon">
</div>
<div class="card-meta">
<div class="card-title">Loot</div>
<span class="card-sub">Miscellaneous</span>
</div>
<span class="card-page">Page 32</span>
</div>
<div class="card-body">
<p><strong>Loot X</strong> allows a figure to loot up to X adjacent or occupied hex(es). Looting picks up all loot tokens on the targeted hexes. This ability is unaffected by the presence of figures or overlay tiles.</p>
</div>
</div>
<h2 class="section-header">Terrain types</h2>