-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
1464 lines (1362 loc) · 105 KB
/
Copy pathindex.html
File metadata and controls
1464 lines (1362 loc) · 105 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>The Chess Codex</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400;1,600&family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=Cinzel:wght@400;600;700&display=swap" rel="stylesheet">
<style>
:root{
--ls:#f0d9b5;--ds:#b58863;
--bg0:#0e0804;--bg1:#1a0e06;--bg2:#261508;--bg3:#36200c;--bg4:#462c14;
--gold:#c8a96e;--gold2:#e8cc9a;--gold3:#f5e0b0;
--cream:#f5e6c8;--acc:#d4941a;--red:#c0392b;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg0);color:var(--cream);font-family:'Lora',serif;font-size:17px;line-height:1.9;overflow-x:hidden;}
/* ── COVER ── */
.cover{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:60px 24px;}
.cover-chessboard{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);opacity:.055;pointer-events:none;}
.cbl{background:var(--ls);}.cbd{background:var(--ds);}
.cover-inner{position:relative;z-index:2;text-align:center;max-width:680px;}
.cover-deco{width:80px;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:0 auto 28px;}
.tag-line{font-family:'Cinzel',serif;font-size:10px;letter-spacing:7px;color:var(--gold);text-transform:uppercase;margin-bottom:18px;opacity:.8;}
.cover-title{font-family:'Cinzel',serif;font-size:clamp(44px,9vw,96px);font-weight:700;color:var(--cream);line-height:.95;margin-bottom:14px;text-shadow:3px 3px 0 rgba(0,0,0,.5);}
.cover-title em{color:var(--gold);font-style:normal;}
.cover-sub{font-family:'Lora',serif;font-style:italic;font-size:17px;color:var(--gold2);margin-bottom:44px;max-width:500px;margin-left:auto;margin-right:auto;}
.gline{width:200px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:0 auto 36px;}
.toc{display:grid;grid-template-columns:1fr 1fr;gap:5px 28px;text-align:left;max-width:460px;margin:0 auto;}
.toc a{color:var(--cream);text-decoration:none;font-family:'Lora',serif;font-size:14px;display:flex;align-items:center;gap:9px;opacity:.7;transition:opacity .2s,color .2s;padding:5px 0;border-bottom:1px solid rgba(200,169,110,.07);}
.toc a:hover{opacity:1;color:var(--gold);}
.toc-n{font-family:'Cinzel',serif;font-size:10px;color:var(--gold);min-width:18px;opacity:.9;}
/* ── ANIMATED COVER BOARD ── */
#coverBoard{position:absolute;bottom:0;right:0;opacity:.15;pointer-events:none;z-index:1;}
/* ── LAYOUT ── */
.section{max-width:860px;margin:0 auto;padding:80px 28px;}
.sdiv{height:1px;background:linear-gradient(90deg,transparent,var(--bg4),rgba(200,169,110,.4),var(--bg4),transparent);}
.bgalt{background:rgba(38,21,8,.4);}
.ch{font-family:'Cinzel',serif;font-size:10px;letter-spacing:5px;color:var(--gold);text-transform:uppercase;margin-bottom:14px;display:block;opacity:.85;}
h2{font-family:'Playfair Display',serif;font-size:clamp(28px,5vw,50px);font-weight:700;color:var(--cream);line-height:1.15;margin-bottom:12px;}
h2 em{color:var(--gold);font-style:italic;}
h3{font-family:'Playfair Display',serif;font-size:22px;font-weight:600;color:var(--gold2);margin:46px 0 16px;}
p{margin-bottom:18px;}
strong{color:var(--gold2);font-weight:600;}
em.hi{color:var(--gold);font-style:italic;}
.drop::first-letter{font-family:'Playfair Display',serif;font-size:70px;font-weight:900;color:var(--gold);float:left;line-height:.72;margin:10px 12px 0 0;}
.callout{background:linear-gradient(135deg,rgba(54,32,12,.85),rgba(22,12,4,.92));border-left:3px solid var(--gold);padding:20px 26px;margin:30px 0;border-radius:0 8px 8px 0;}
.callout strong{display:block;font-family:'Cinzel',serif;font-size:10px;letter-spacing:3px;color:var(--gold);margin-bottom:8px;text-transform:uppercase;}
.callout p{margin:0;font-style:italic;opacity:.88;}
blockquote{border-left:3px solid var(--gold);margin:32px 0;padding:16px 26px;font-style:italic;font-size:19px;color:var(--gold2);}
blockquote cite{display:block;font-size:11px;font-style:normal;color:var(--cream);opacity:.45;margin-top:8px;font-family:'Cinzel',serif;letter-spacing:2px;}
/* ── BOARD SYSTEM ── */
.board-wrap{display:flex;justify-content:center;margin:28px 0;user-select:none;}
.board-outer{display:flex;flex-direction:column;align-items:center;}
.board-frame{border:3px solid var(--bg4);box-shadow:0 16px 56px rgba(0,0,0,.65),0 0 0 1px rgba(200,169,110,.08);}
.sq{display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;}
.sq.l{background:var(--ls);}.sq.d{background:var(--ds);}
.sq.sel{outline:3px solid var(--acc);outline-offset:-3px;z-index:3;}
.sq.sel .pi{animation:ppulse .5s ease-in-out infinite alternate;}
@keyframes ppulse{from{transform:scale(1)}to{transform:scale(1.14)}}
.sq .vdot{border-radius:50%;background:rgba(0,0,0,.22);animation:dotpop .2s ease both;pointer-events:none;position:absolute;}
.sq.l .vdot{background:rgba(100,55,5,.26);}
.sq.cring::after{content:'';position:absolute;inset:3px;border-radius:50%;border:4px solid rgba(0,0,0,.26);pointer-events:none;animation:dotpop .2s ease both;}
.sq.l.cring::after{border-color:rgba(100,55,5,.3);}
@keyframes dotpop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.sq .pi{pointer-events:none;line-height:1;display:block;transition:transform .12s;}
.sq:hover:not(.no-hover) .pi{transform:scale(1.12);}
.sq.lf{background:rgba(212,148,26,.32) !important;}.sq.lt{background:rgba(212,148,26,.44) !important;}
.sq.checked{background:rgba(192,57,43,.4) !important;}
.flbl{text-align:center;font-family:'Cinzel',serif;font-size:11px;color:var(--gold);opacity:.55;line-height:1;}
.rlbl{text-align:center;font-family:'Cinzel',serif;font-size:11px;color:var(--gold);opacity:.55;}
.board-cap{font-family:'Cinzel',serif;font-size:9px;letter-spacing:3px;color:var(--gold);opacity:.45;text-align:center;margin-top:8px;margin-bottom:0;text-transform:uppercase;}
/* ── MINI BOARDS ── */
.mini-set{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:32px 0;}
@media(max-width:600px){.mini-set{grid-template-columns:1fr 1fr;}}
.mini-wrap{text-align:center;}
.mini-board{display:inline-grid;grid-template-columns:repeat(8,32px);grid-template-rows:repeat(8,32px);border:2px solid var(--bg4);box-shadow:0 6px 22px rgba(0,0,0,.45);}
.msq{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:18px;position:relative;}
.msq.ml{background:var(--ls);}.msq.md{background:var(--ds);}
.msq .mdot{width:11px;height:11px;border-radius:50%;background:rgba(0,0,0,.22);}
.msq.ml .mdot{background:rgba(100,55,5,.26);}
.msq.mv{animation:sqfi .3s ease both;}
@keyframes sqfi{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.msq.mfrom{background:rgba(212,148,26,.44) !important;}
.mlabel{font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px;color:var(--gold);margin-top:8px;text-transform:uppercase;}
.msub{font-size:12px;color:var(--cream);opacity:.5;margin-top:2px;}
/* ── PIECE ENTRIES ── */
.pentry{display:grid;grid-template-columns:46px 110px auto;gap:0 14px;align-items:start;padding:18px 0;border-bottom:1px solid rgba(200,169,110,.08);}
.pentry:last-child{border-bottom:none;}
.pe-sym{font-size:36px;text-align:center;line-height:1;padding-top:2px;}
.pe-nm{font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px;color:var(--gold);display:block;margin-bottom:4px;}
.pe-val{display:inline-block;background:var(--bg0);border:1px solid rgba(200,169,110,.25);color:var(--acc);font-family:'Cinzel',serif;font-size:10px;padding:2px 8px;border-radius:20px;}
.pe-desc{font-size:15px;opacity:.82;line-height:1.62;}
/* ── TIMELINE ── */
.timeline{position:relative;padding-left:34px;margin:32px 0;}
.timeline::before{content:'';position:absolute;left:4px;top:0;bottom:0;width:1px;background:linear-gradient(180deg,var(--gold),rgba(200,169,110,.1));}
.tli{position:relative;margin-bottom:38px;opacity:0;transform:translateX(-16px);transition:opacity .65s,transform .65s;}
.tli.tlv{opacity:1;transform:translateX(0);}
.tldot{position:absolute;left:-34px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px rgba(200,169,110,.6);}
.tly{font-family:'Cinzel',serif;font-size:10px;color:var(--gold);letter-spacing:2px;margin-bottom:4px;}
.tltt{font-family:'Playfair Display',serif;font-size:18px;color:var(--gold2);margin-bottom:6px;font-weight:600;}
.tltx{font-size:15px;opacity:.8;line-height:1.75;}
/* ── INTERACTIVE PANELS ── */
.ipanel{background:var(--bg2);border:1px solid rgba(200,169,110,.14);border-radius:10px;padding:26px 24px;margin:30px 0;}
.ip-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:18px;}
.ip-title{font-family:'Cinzel',serif;font-size:10px;letter-spacing:3px;color:var(--gold);text-transform:uppercase;}
.ip-badge{font-family:'Cinzel',serif;font-size:12px;color:var(--cream);background:var(--bg4);padding:5px 14px;border-radius:4px;min-width:120px;text-align:center;}
.ip-note{font-style:italic;font-size:14px;opacity:.7;margin-top:12px;min-height:36px;line-height:1.6;}
.ip-grid{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;}
@media(max-width:640px){.ip-grid{grid-template-columns:1fr;}}
.ib{background:var(--bg4);border:1px solid rgba(200,169,110,.2);color:var(--gold);font-family:'Cinzel',serif;font-size:10px;letter-spacing:1px;padding:8px 16px;border-radius:4px;cursor:pointer;transition:all .2s;}
.ib:hover{background:rgba(200,169,110,.12);border-color:var(--gold);}
.ib:disabled{opacity:.3;cursor:not-allowed;}
.hint-bar{font-family:'Cinzel',serif;font-size:9px;letter-spacing:3px;color:var(--gold);opacity:.5;text-align:center;margin-bottom:6px;text-transform:uppercase;}
.info-bar{background:var(--bg4);border-radius:5px;padding:9px 15px;margin:8px 0;font-family:'Cinzel',serif;font-size:13px;color:var(--gold2);text-align:center;min-height:36px;transition:all .3s;}
/* ── OPENING MOVES LIST ── */
.op-list{font-family:'Cinzel',serif;font-size:12px;}
.op-row{display:grid;grid-template-columns:22px 1fr 1fr;gap:3px 6px;margin-bottom:4px;opacity:.4;transition:opacity .25s,color .25s;}
.op-row.opast{opacity:.65;}.op-row.oact{opacity:1;color:var(--gold);}
.op-num{color:var(--gold);opacity:.5;}
/* ── RULE CARDS ── */
.rule-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0;}
@media(max-width:560px){.rule-grid{grid-template-columns:1fr;}}
.rc{background:linear-gradient(135deg,rgba(54,32,12,.7),rgba(22,12,4,.85));border:1px solid rgba(200,169,110,.13);border-radius:8px;padding:20px;}
.rc-icon{font-family:'Cinzel',serif;font-size:13px;letter-spacing:2px;color:var(--gold);margin-bottom:8px;display:block;text-transform:uppercase;}
.rc p{font-size:14px;opacity:.8;margin:0;}
/* ── NOTATION ── */
.nc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0;}
@media(max-width:500px){.nc-grid{grid-template-columns:1fr;}}
.nc{background:var(--bg3);border:1px solid rgba(200,169,110,.1);border-radius:6px;padding:11px 15px;}
.nc code{font-family:'Courier New',monospace;font-size:20px;color:var(--gold);display:block;margin-bottom:2px;}
.nc span{font-size:13px;opacity:.65;}
/* ── SPECIAL MOVE CARD ── */
.sp{background:var(--bg2);border:1px solid rgba(200,169,110,.12);border-radius:8px;padding:22px 24px;margin:18px 0;}
.sp h4{font-family:'Playfair Display',serif;font-size:19px;color:var(--gold2);margin-bottom:12px;}
.sp-btn{background:var(--bg4);border:1px solid rgba(200,169,110,.3);color:var(--gold);font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px;padding:8px 18px;border-radius:4px;cursor:pointer;margin-top:12px;transition:all .2s;text-transform:uppercase;}
.sp-btn:hover{background:rgba(200,169,110,.1);}
/* ── OPENING PRINCIPLES ── */
.prlist{counter-reset:pr;list-style:none;padding:0;margin:22px 0;}
.prlist li{counter-increment:pr;display:grid;grid-template-columns:40px 1fr;gap:0 14px;margin-bottom:22px;align-items:start;}
.prlist li::before{content:counter(pr);font-family:'Cinzel',serif;font-size:20px;font-weight:700;color:var(--gold);line-height:1.3;padding-top:2px;}
.prlist li>div{min-width:0;}
.prlist li strong{display:block;font-family:'Playfair Display',serif;font-size:17px;color:var(--gold2);margin-bottom:3px;font-weight:600;}
.prlist li p{font-size:14px;opacity:.78;margin:0;line-height:1.7;}
/* ── GOOD/BAD COMPARISON ── */
.compare-wrap{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:32px 0;}
@media(max-width:560px){.compare-wrap{grid-template-columns:1fr;}}
.comp-card{background:var(--bg2);border-radius:8px;overflow:hidden;}
.comp-label{font-family:'Cinzel',serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;padding:10px 14px;text-align:center;}
.comp-good .comp-label{background:rgba(39,174,96,.15);color:#6fcf97;border-bottom:1px solid rgba(39,174,96,.2);}
.comp-bad .comp-label{background:rgba(192,57,43,.15);color:#eb8585;border-bottom:1px solid rgba(192,57,43,.2);}
.comp-board{display:flex;justify-content:center;padding:14px;}
.comp-text{padding:10px 14px 14px;font-size:13px;opacity:.75;line-height:1.6;}
/* ── TACTICS ── */
.tactic-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:26px 0;}
@media(max-width:620px){.tactic-grid{grid-template-columns:1fr;}}
.tc{background:var(--bg2);border:1px solid rgba(200,169,110,.12);border-radius:10px;overflow:hidden;}
.tc-head{background:linear-gradient(90deg,var(--bg0),var(--bg2));padding:12px 17px;border-bottom:1px solid rgba(200,169,110,.1);display:flex;align-items:center;gap:10px;}
.tc-tag{width:28px;height:28px;border-radius:50%;background:var(--bg4);border:1px solid rgba(200,169,110,.25);display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-size:11px;color:var(--gold);flex-shrink:0;}
.tc-nm{font-family:'Cinzel',serif;font-size:11px;letter-spacing:2px;color:var(--gold);text-transform:uppercase;}
.tc-body{padding:14px 16px;}
.tc-body p{font-size:14px;opacity:.78;margin:0 0 10px;line-height:1.65;}
.tc-board-wrap{position:relative;display:flex;justify-content:center;}
.tc-cap{font-family:'Cinzel',serif;font-size:9px;letter-spacing:2px;color:var(--gold);opacity:.45;text-align:center;margin-top:5px;text-transform:uppercase;}
/* ── CHECKMATE PATTERNS ── */
.mate-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:26px 0;}
@media(max-width:600px){.mate-grid{grid-template-columns:1fr;}}
.mc{background:var(--bg2);border:1px solid rgba(200,169,110,.12);border-radius:10px;overflow:hidden;}
.mc-head{background:var(--bg0);padding:13px 17px;border-bottom:1px solid rgba(200,169,110,.09);}
.mc-nm{font-family:'Cinzel',serif;font-size:10px;letter-spacing:3px;color:var(--gold);text-transform:uppercase;}
.mc-sub{font-size:12px;opacity:.6;margin-top:4px;font-style:italic;}
.mc-board{display:flex;justify-content:center;padding:14px 14px 6px;}
.mc-tx{padding:0 16px 16px;font-size:13px;opacity:.76;line-height:1.65;}
/* ── HOW TO THINK ── */
.think-list{counter-reset:th;list-style:none;padding:0;margin:22px 0;}
.think-list li{counter-increment:th;background:var(--bg2);border:1px solid rgba(200,169,110,.08);border-radius:8px;padding:16px 18px 16px 64px;margin-bottom:12px;position:relative;transition:border-color .2s,background .2s;}
.think-list li:hover{border-color:rgba(200,169,110,.25);background:var(--bg3);}
.think-list li::before{content:counter(th);position:absolute;left:18px;top:14px;font-family:'Cinzel',serif;font-size:24px;font-weight:700;color:var(--gold);opacity:.6;}
.think-list li strong{display:block;font-family:'Playfair Display',serif;font-size:17px;color:var(--gold2);margin-bottom:4px;}
.think-list li p{font-size:14px;opacity:.78;margin:0;}
/* ── ENDGAME LIST ── */
.eglist{list-style:none;padding:0;margin:18px 0;}
.eglist li{display:grid;grid-template-columns:32px 1fr;gap:0 13px;margin-bottom:18px;align-items:start;}
.eg-r{font-family:'Cinzel',serif;font-size:13px;color:var(--gold);font-weight:700;padding-top:1px;}
/* ── PATH CARDS ── */
.path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:32px 0;}
@media(max-width:540px){.path-grid{grid-template-columns:1fr;}}
.pcard{background:var(--bg3);border:1px solid rgba(200,169,110,.15);border-radius:8px;padding:20px 16px;text-align:center;transition:transform .2s,border-color .2s;}
.pcard:hover{transform:translateY(-4px);border-color:rgba(200,169,110,.35);}
.pc-n{font-family:'Cinzel',serif;font-size:28px;font-weight:700;color:var(--gold);display:block;margin-bottom:8px;}
.pcard h4{font-family:'Cinzel',serif;font-size:9px;letter-spacing:2px;color:var(--gold2);margin:0 0 7px;text-transform:uppercase;}
.pcard p{font-size:13px;opacity:.7;margin:0;}
/* ── REVEAL / ANIM ── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s;}
.reveal.vis{opacity:1;transform:translateY(0);}
/* ── NAV DOTS ── */
#ndots{position:fixed;right:13px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;z-index:500;}
.nd{width:7px;height:7px;border-radius:50%;background:rgba(200,169,110,.25);cursor:pointer;border:none;outline:none;transition:all .22s;display:block;}
.nd.on,.nd:hover{background:var(--gold);transform:scale(1.6);}
/* ── DEMO BOARDS (static) ── */
.demo-board{display:inline-grid;border:2px solid var(--bg4);box-shadow:0 8px 28px rgba(0,0,0,.5);}
.dsq{display:flex;align-items:center;justify-content:center;position:relative;}
.dsq.l{background:var(--ls);}.dsq.d{background:var(--ds);}
.dsq.hi{background:rgba(212,148,26,.42) !important;}
.dsq.hicheck{background:rgba(192,57,43,.38) !important;}
/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:var(--bg0);}
::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--gold);}
/* ── RESPONSIVE BOARD WRAPPERS ── */
.board-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.board-outer{max-width:100%;}
.board-frame{max-width:100%;}
.tc-board-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.mc-board{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.comp-board{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.mini-set .mini-board{display:grid;}
.ipanel .board-outer{margin:0 auto;}
.sp .board-outer{margin:0 auto;}
#castleDemo .board-outer,
#enPassantDemo .board-outer,
#promotionDemo .board-outer{margin:0 auto;}
@media(max-width:580px){
.toc{grid-template-columns:1fr;}
.nc-grid,.rule-grid{grid-template-columns:1fr;}
.pentry{grid-template-columns:38px 90px 1fr;}
.mini-set{grid-template-columns:1fr 1fr;}
.tactic-grid{grid-template-columns:1fr;}
.mate-grid{grid-template-columns:1fr;}
.compare-wrap{grid-template-columns:1fr;}
.section{padding:60px 18px;}
.op-grid{grid-template-columns:1fr;}
.ip-grid{grid-template-columns:1fr;}
}
@media(max-width:400px){
.pentry{grid-template-columns:34px 80px 1fr;}
.mini-set{grid-template-columns:1fr 1fr;}
}
</style>
</head>
<body>
<nav id="ndots"></nav>
<!-- ████ COVER ████ -->
<section id="s0" class="cover" data-sec="Cover">
<div class="cover-chessboard" id="covBg"></div>
<canvas id="coverBoard" width="320" height="320"></canvas>
<div class="cover-inner">
<div class="cover-deco"></div>
<div class="tag-line">A Complete Guidebook to Chess</div>
<h1 class="cover-title">The<br><em>Chess</em><br>Codex</h1>
<p class="cover-sub">From an ancient Indian battlefield to the 64 squares in front of you — everything you need to play your first real game of chess.</p>
<div class="gline"></div>
<nav class="toc">
<a href="#s1"><span class="toc-n">01</span> The Origin Story</a>
<a href="#s2"><span class="toc-n">02</span> The Board</a>
<a href="#s3"><span class="toc-n">03</span> The Six Pieces</a>
<a href="#s4"><span class="toc-n">04</span> Rules & Special Moves</a>
<a href="#s5"><span class="toc-n">05</span> Your First Opening</a>
<a href="#s6"><span class="toc-n">06</span> Opening Principles</a>
<a href="#s7"><span class="toc-n">07</span> Tactics & Traps</a>
<a href="#s8"><span class="toc-n">08</span> Checkmate Patterns</a>
<a href="#s9"><span class="toc-n">09</span> How to Think</a>
<a href="#s10"><span class="toc-n">10</span> The Endgame</a>
</nav>
</div>
</section>
<!-- ████ CH 01 — HISTORY ████ -->
<section id="s1" data-sec="History">
<div class="section reveal">
<span class="ch">Chapter 01</span>
<h2>The Game That<br><em>Crossed Continents</em></h2>
<p class="drop">Every time you set up a chess board, you are touching something 1,500 years old. Chess did not appear in Europe one morning. It traveled through empires, was renamed by every civilization it passed through, had its pieces redesigned to match local politics, and arrived at your table shaped by India, Persia, the Islamic world, and medieval Europe — all at once.</p>
<div class="callout"><strong>The One Thing That Never Changed</strong><p>Across every civilization, every language, every era — chess has always been the only major game in the world with zero randomness. No dice. No shuffle. No luck. Whatever happens on the board is entirely the product of two minds.</p></div>
<div class="timeline" id="tlWrap"></div>
<blockquote>Chess is a sea in which a gnat may drink and an elephant may bathe.<cite>Indian Proverb</cite></blockquote>
</div>
</section>
<div class="sdiv"></div>
<!-- ████ CH 02 — BOARD ████ -->
<section id="s2" class="bgalt" data-sec="The Board">
<div class="section reveal">
<span class="ch">Chapter 02</span>
<h2>The Board —<br><em>Your Battlefield</em></h2>
<p>The board is 8×8 — 64 squares, alternating light and dark. Every square has a coordinate address built from a file letter (a–h, left to right) and a rank number (1–8, bottom to top). Click any square below to see its exact address and role in the game.</p>
<div class="hint-bar">Click any square to identify it</div>
<div class="board-wrap"><div class="board-outer" id="coordBoard"></div></div>
<div class="info-bar" id="coordInfo">Click a square above — its coordinate and role will appear here.</div>
<h3>The Single Most Common Setup Error</h3>
<p>There must be a <strong>light square in your bottom-right corner</strong> from both players' perspectives. Dark square in the bottom-right? Rotate the board 90 degrees. This single mistake is made by the majority of first-time players.</p>
<p>Back rank left to right for White: <strong>Rook — Knight — Bishop — Queen — King — Bishop — Knight — Rook.</strong> The Queen always starts on her own color. When both queens face each other across the center, setup is correct.</p>
<h3>The Four Zones</h3>
<div class="compare-wrap" style="grid-template-columns:1fr;">
<div style="background:var(--bg2);border:1px solid rgba(200,169,110,.13);border-radius:8px;padding:22px 24px;">
<p style="margin:0;font-size:15px;">The <strong>center</strong> (squares d4, d5, e4, e5) is the most valuable territory — whoever controls it generally controls the game. The <strong>queenside</strong> (a–d files) and <strong>kingside</strong> (e–h files) divide the board lengthwise. Your <strong>back rank</strong> is your starting row — ranks 1 and 2 for White. Every strategic decision in chess maps back to these four zones. When you advance toward your opponent, you are thinking about zones. When you castle, you are thinking about zones.</p>
</div>
</div>
</div>
</section>
<div class="sdiv"></div>
<!-- ████ CH 03 — PIECES ████ -->
<section id="s3" data-sec="Pieces">
<div class="section reveal">
<span class="ch">Chapter 03</span>
<h2>Six Pieces —<br><em>Six Different Languages</em></h2>
<p>Each piece moves in its own way. This is the alphabet of chess — once it is automatic, you can start reading the game. The board below is fully interactive: click any White piece to see every square it can reach. Click a highlighted square to move it.</p>
<div class="hint-bar">Click any White piece to see its moves</div>
<div class="board-wrap"><div class="board-outer" id="pieceBoard"></div></div>
<div class="info-bar" id="pieceInfo">Select a White piece to see where it can move from its current position.</div>
<h3>The Six Pieces — Complete Guide</h3>
<div id="pieceList"></div>
<h3>Movement Maps</h3>
<p>Each board shows a piece placed near the center. Every highlighted dot is a square it can reach from that position. Notice how dramatically the number of available squares changes based on where a piece stands.</p>
<div class="mini-set" id="miniSet"></div>
<div class="callout"><strong>The Point Value System</strong><p>Pawn = 1 point. Knight = 3. Bishop = 3. Rook = 5. Queen = 9. King = priceless — the game ends when you lose him. These values help you decide whether to accept a trade. Giving up a rook (5) for a bishop (3) costs you two points — you need a specific reason to do it. Values are baselines, not laws. A perfectly placed knight can outperform a bishop, and a bad queen can be worth less than nothing.</p></div>
</div>
</section>
<div class="sdiv"></div>
<!-- ████ CH 04 — RULES ████ -->
<section id="s4" class="bgalt" data-sec="Rules">
<div class="section reveal">
<span class="ch">Chapter 04</span>
<h2>Rules, Turns,<br><em>and the Special Moves</em></h2>
<p>White moves first. Then Black. Players alternate. On each turn you must move exactly one piece (castling moves two simultaneously). You cannot pass your turn. The game ends by checkmate, resignation, or a draw condition.</p>
<div class="rule-grid">
<div class="rc"><span class="rc-icon">CHECK</span><p>Your king is directly attacked. You must resolve it immediately — move the king, block the attack, or capture the attacking piece. No other move is legal while in check.</p></div>
<div class="rc"><span class="rc-icon">CHECKMATE</span><p>Your king is in check with no legal escape. The game ends immediately. There is no "capturing" the king — checkmate stops the game the moment it is confirmed.</p></div>
<div class="rc"><span class="rc-icon">STALEMATE</span><p>It is your turn, you have no legal moves, but your king is NOT in check. Immediate draw. A losing player can sometimes engineer this as a survival technique.</p></div>
<div class="rc"><span class="rc-icon">OTHER DRAWS</span><p>Draw by agreement, threefold repetition, the 50-move rule (no pawn move or capture in 50 moves), or insufficient mating material to deliver checkmate.</p></div>
</div>
<h3>Special Move I — Castling</h3>
<div class="sp">
<h4>The Only Move That Moves Two Pieces</h4>
<p>The King slides two squares toward a Rook. The Rook jumps to the other side. <strong>You cannot castle if:</strong> the king or rook has moved, any square between them is occupied, the king is in check, or the king passes through or lands on an attacked square. Press the button to see it happen.</p>
<div class="hint-bar" style="margin-top:16px;">Kingside vs Queenside castling</div>
<div id="castleDemo"></div>
<div style="display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;">
<button class="sp-btn" id="btnCastleK">Animate O-O (Kingside)</button>
<button class="sp-btn" id="btnCastleQ">Animate O-O-O (Queenside)</button>
<button class="sp-btn" id="btnCastleReset">Reset</button>
</div>
<div class="info-bar" id="castleInfo" style="margin-top:10px;">Select a castling type above.</div>
</div>
<h3>Special Move II — En Passant</h3>
<div class="sp">
<h4>The Ghost Capture</h4>
<p>When a pawn uses its two-square first move to land beside your pawn, you may capture it as if it had only moved one square. Your pawn moves diagonally forward to the empty square, and the enemy pawn disappears. This right exists for <strong>exactly one move</strong> — wait and it is gone forever.</p>
<div id="enPassantDemo"></div>
<button class="sp-btn" id="btnEP" style="margin-top:12px;">Show En Passant Capture</button>
<div class="info-bar" id="epInfo" style="margin-top:10px;">Press the button to see the capture in action.</div>
<div class="callout" style="margin-top:16px;margin-bottom:0;"><strong>Why This Rule Exists</strong><p>When the two-square pawn advance was added in 15th-century Spain, players realized a pawn could skip past a defended square entirely. En passant was invented specifically to close that loophole.</p></div>
</div>
<h3>Special Move III — Pawn Promotion</h3>
<div class="sp">
<h4>A Soldier Becomes a General</h4>
<p>When any pawn reaches the far end of the board, it must immediately become another piece — Queen, Rook, Bishop, or Knight. You are almost always promoting to a Queen. However, in rare endgame positions, promoting to a Knight instead — called an <strong>underpromotion</strong> — wins a game where a new Queen would accidentally stalemate the opponent. You can legally have two, three, even nine queens on the board at the same time.</p>
<div id="promotionDemo"></div>
<button class="sp-btn" id="btnPromo" style="margin-top:12px;">Animate Pawn Promotion</button>
<div class="info-bar" id="promoInfo" style="margin-top:10px;">See a pawn march to the back rank and transform.</div>
</div>
<h3>Algebraic Notation — Reading Chess</h3>
<p>Every chess book, video, database, and app uses Algebraic Notation to write moves. Learning it takes ten minutes and opens the entire chess world to you.</p>
<div class="nc-grid">
<div class="nc"><code>e4</code><span>Pawn to e4 — no letter prefix for pawns</span></div>
<div class="nc"><code>Nf3</code><span>Knight to f3 — N for Knight (K is King)</span></div>
<div class="nc"><code>Bxe5</code><span>Bishop captures on e5 — x means capture</span></div>
<div class="nc"><code>O-O</code><span>Kingside castling (short castling)</span></div>
<div class="nc"><code>O-O-O</code><span>Queenside castling (long castling)</span></div>
<div class="nc"><code>e8=Q</code><span>Pawn promotes to Queen on e8</span></div>
<div class="nc"><code>Rd1+</code><span>Rook to d1, giving check (+)</span></div>
<div class="nc"><code>Qf7#</code><span>Queen to f7, checkmate (#)</span></div>
</div>
</div>
</section>
<div class="sdiv"></div>
<!-- ████ CH 05 — FIRST OPENING ████ -->
<section id="s5" data-sec="First Opening">
<div class="section reveal">
<span class="ch">Chapter 05</span>
<h2>Your First Opening —<br><em>The Italian Game</em></h2>
<p>The Italian Game is over 400 years old and is still played at the World Championship level today. It follows every opening principle at once — control the center, develop pieces, castle early. Step through each move with the buttons below and read why each move is played.</p>
<div class="ipanel">
<div class="ip-head">
<span class="ip-title">Italian Game — Interactive Step-Through</span>
<span class="ip-badge" id="opCur">Starting Position</span>
</div>
<div class="ip-grid">
<div id="opList" class="op-list"></div>
<div>
<div class="board-outer" id="opBoard"></div>
<div class="ip-note" id="opNote">The starting position. Both armies face each other. White moves first.</div>
</div>
</div>
<div style="display:flex;gap:9px;margin-top:14px;justify-content:center;flex-wrap:wrap;">
<button class="ib" id="obPrev" disabled>← Prev</button>
<button class="ib" id="obNext">Next →</button>
<button class="ib" id="obReset">Reset</button>
</div>
</div>
<h3>Watch Out — The Scholar's Mate</h3>
<p>The Scholar's Mate is a four-move checkmate that catches almost every beginner at least once. It only works if Black ignores the threat. Step through the trap below, then see exactly how to defend against it.</p>
<div class="ipanel">
<div class="ip-head">
<span class="ip-title">Scholar's Mate — Step-Through</span>
<span class="ip-badge" id="smCur">Starting Position</span>
</div>
<div class="board-outer" id="smBoard" style="margin:0 auto;"></div>
<div class="ip-note" id="smNote" style="text-align:center;max-width:440px;margin:0 auto;">Step through to see how the trap is set up, and exactly where Black goes wrong.</div>
<div style="display:flex;gap:9px;margin-top:14px;justify-content:center;">
<button class="ib" id="smPrev" disabled>← Prev</button>
<button class="ib" id="smNext">Next →</button>
<button class="ib" id="smReset">Reset</button>
</div>
</div>
</div>
</section>
<div class="sdiv"></div>
<!-- ████ CH 06 — OPENING PRINCIPLES ████ -->
<section id="s6" class="bgalt" data-sec="Opening">
<div class="section reveal">
<span class="ch">Chapter 06</span>
<h2>Opening Principles —<br><em>Six Laws That Never Expire</em></h2>
<p>These are not suggestions for one particular opening. They apply in every chess game ever played, at every level, by every player. Learn to measure every opening move against these six standards before you memorize any specific sequences.</p>
<ol class="prlist">
<li><div><strong>Control the Center</strong><p>The four central squares — e4, d4, e5, d5 — are the most valuable territory on the board. Pieces placed near the center have more mobility and more attacking options than pieces on the edges. A knight on e5 controls 8 squares. The same knight on a1 controls 2. Open with a central pawn: 1.e4 or 1.d4.</p></div></li>
<li><div><strong>Develop Every Piece</strong><p>Get your knights and bishops off their starting squares and into active positions in the first ten moves. Move each piece once before moving any piece twice. While you spend a move repositioning a knight already in play, your opponent develops two new pieces. That is how you get attacked before you are ready.</p></div></li>
<li><div><strong>Castle Early</strong><p>Your king is a target in the center of the board during the opening. Castle before move 10. Castling tucks the king behind a pawn wall and connects your rooks simultaneously. As a beginner, kingside castling (O-O) is almost always the right choice.</p></div></li>
<li><div><strong>Do Not Move the Same Piece Twice</strong><p>Unless there is a specific, concrete tactical reason — an immediate threat or a clear winning combination — moving the same piece twice in the opening wastes a tempo. Every extra move you spend repositioning is a free development move for your opponent.</p></div></li>
<li><div><strong>Keep the Queen Back</strong><p>The queen is your most powerful piece, which also makes her the easiest target. Bring her out early and your opponent attacks her with minor pieces worth only 3 points, forcing repeated retreats while they develop freely. The queen comes out for a specific threat, not as an opening routine.</p></div></li>
<li><div><strong>Connect Your Rooks</strong><p>Once all minor pieces are developed and you have castled, your back rank should be entirely clear — no pieces between your two rooks. Connected rooks are ready to double on open files, support passed pawns, and invade the seventh rank. This moment signals the transition from opening to middlegame.</p></div></li>
</ol>
<h3>Good Development vs. Bad Development</h3>
<p>After five moves, the difference between a player following these principles and a player ignoring them is already dramatic. The boards below show the same number of moves — but completely different positions.</p>
<div class="compare-wrap">
<div class="comp-card comp-good">
<div class="comp-label">GOOD DEVELOPMENT — After 5 moves each</div>
<div class="comp-board" id="goodDevBoard"></div>
<div class="comp-text">White has played e4, Nf3, Bc4, O-O, d3. Center controlled, two pieces developed, king safe, rooks connecting. Every move served a purpose.</div>
</div>
<div class="comp-card comp-bad">
<div class="comp-label">BAD DEVELOPMENT — After 5 moves each</div>
<div class="comp-board" id="badDevBoard"></div>
<div class="comp-text">White has moved the queen twice, a pawn on the wing, the same knight twice, and delayed castling. Five moves spent, no real progress. Black's army is already more active.</div>
</div>
</div>
</div>
</section>
<div class="sdiv"></div>
<!-- ████ CH 07 — TACTICS ████ -->
<section id="s7" data-sec="Tactics">
<div class="section reveal">
<span class="ch">Chapter 07</span>
<h2>Tactics —<br><em>The Art of the Threat</em></h2>
<p>Strategy is the long-term plan. Tactics are the short-term execution. A tactic is a sequence — usually two to five moves — that wins material or delivers checkmate through concrete calculation. The fastest way to improve at chess is to drill tactics every single day. Every winning move in every game ever played came down to a player seeing a tactical opportunity their opponent missed.</p>
<div class="tactic-grid" id="tacticGrid"></div>
</div>
</section>
<div class="sdiv"></div>
<!-- ████ CH 08 — CHECKMATE PATTERNS ████ -->
<section id="s8" class="bgalt" data-sec="Checkmates">
<div class="section reveal">
<span class="ch">Chapter 08</span>
<h2>Checkmate Patterns —<br><em>Shapes You Must Recognize</em></h2>
<p>Checkmate is not calculated from scratch every game. The same geometric patterns appear across millions of games at all levels of play. Learn these shapes and you will start seeing them in your own games — both as opportunities to deliver them and as warnings when your opponent is setting them up against you.</p>
<div class="mate-grid" id="mateGrid"></div>
<div class="callout"><strong>Pattern Recognition Is the Real Skill</strong><p>Grandmasters do not calculate every variation from scratch — their minds have stored thousands of patterns over years of play. When they see a position, familiar shapes surface immediately. Every tactics puzzle you solve adds a pattern to your memory library. Ten puzzles a day for three months makes you a genuinely different player than you were before.</p></div>
</div>
</section>
<div class="sdiv"></div>
<!-- ████ CH 09 — HOW TO THINK ████ -->
<section id="s9" data-sec="How to Think">
<div class="section reveal">
<span class="ch">Chapter 09</span>
<h2>How to Think<br><em>During Your Turn</em></h2>
<p>Most beginners move on instinct — they see something that looks good and they play it immediately. This works until the moment it doesn't. The players who improve fastest are the ones who develop a repeatable mental process and apply it on every single move, including the easy-looking ones.</p>
<ol class="think-list">
<li><strong>What is my opponent threatening?</strong><p>Before you look at what you want to do, ask: if I do nothing right now, what is the worst thing my opponent can do on their next move? Can they take a piece? Deliver check? Set up a fork? This is the single most important question in chess. Beginners skip it. Players who ask it every single turn stop hanging pieces practically overnight.</p></li>
<li><strong>Am I in immediate danger?</strong><p>If your opponent has a threat, you must address it first unless you have something more forcing. A forcing move demands a response — check, capture of a major piece, or a checkmate threat. If your response is more forcing than their threat, play it. Otherwise, deal with the threat first.</p></li>
<li><strong>Find your candidate moves</strong><p>Generate two or three candidate moves before committing to any one of them. "Candidate move" simply means: what are the reasonable options? Most beginners play the first move that looks acceptable. Strong players force themselves to consider at least two before deciding. The second move you identify is often better than the first.</p></li>
<li><strong>Calculate each candidate</strong><p>For each candidate, trace the sequence: if I play this, what does my opponent most likely play? If they play that, what do I play? Go two to three moves deep. You do not need to see everything — you only need to verify that your move is not immediately refuted. If a candidate fails immediately, eliminate it and move to the next.</p></li>
<li><strong>The blunder check before you touch the piece</strong><p>Before your hand moves toward a piece, ask one last question: does this move leave anything hanging, undefended, or exposed to a check, fork, or pin I have not considered? This two-second pause eliminates the majority of the blunders beginners make in every game. It is the cheapest improvement available in chess.</p></li>
</ol>
<div class="callout"><strong>Botvinnik's Rule</strong><p>Mikhail Botvinnik, World Champion through most of the 1950s and 60s, taught that the hallmark of a strong player is asking "why?" after every opponent's move — not just "what did they do?" but "why did they do it? What are they planning? What did that move set up?" Ask this on every turn and the game starts making sense at a different level.</p></div>
</div>
</section>
<div class="sdiv"></div>
<!-- ████ CH 10 — ENDGAME ████ -->
<section id="s10" class="bgalt" data-sec="Endgame">
<div class="section reveal">
<span class="ch">Chapter 10</span>
<h2>The Endgame —<br><em>Where Games Are Actually Decided</em></h2>
<p>Most beginners ignore the endgame entirely and focus on opening preparation and attacking. This is a significant mistake. More games at the beginner and intermediate level are decided by endgame technique — or the complete lack of it — than by brilliant middlegame combinations. The endgame is where winning a pawn actually converts into winning the game.</p>
<h3>The King Becomes a Fighting Piece</h3>
<p>In the opening the king hides for good reason. In the endgame, with fewer pieces on the board, he becomes one of the most powerful pieces still in play. Activate your king toward the center the moment queens come off the board. Beginners who leave their king on the back rank in the endgame routinely draw or lose positions that should be won.</p>
<ul class="eglist">
<li><span class="eg-r">I</span><div><strong>Push passed pawns immediately.</strong> A passed pawn has no enemy pawns blocking or flanking it. It is a future queen. Your opponent will dedicate pieces to stopping it. Push aggressively and use your remaining pieces to clear its path. Every move the passed pawn advances is a crisis for the opponent.</div></li>
<li><span class="eg-r">II</span><div><strong>The opposition.</strong> When two kings face each other with one square between them, the player whose turn it is does NOT have the opposition — they must step aside. Having the opposition is a decisive weapon in king-and-pawn endgames, allowing your king to advance past your opponent's. The king with the opposition controls the critical squares.</div></li>
<li><span class="eg-r">III</span><div><strong>Rooks belong behind passed pawns.</strong> Whether it is your pawn or your opponent's, place the rook directly behind it. Behind your own pawn, the rook gains power as the pawn advances. Behind the opponent's pawn, the rook restrains it with constant pressure from the rear.</div></li>
<li><span class="eg-r">IV</span><div><strong>The square rule.</strong> Draw an imaginary square from the pawn to its promotion square. If the enemy king can step inside that square on his turn, he catches the pawn. Outside it, the pawn promotes. This lets you calculate pawn races in seconds without moving any pieces. See the interactive demonstration below.</div></li>
<li><span class="eg-r">V</span><div><strong>Create a second weakness.</strong> If your opponent defends one weakness perfectly, create a second weakness on the opposite side of the board. They cannot defend both at once. This two-weakness principle is the foundation of most winning endgame strategies where only a small material or positional advantage exists.</div></li>
<li><span class="eg-r">VI</span><div><strong>Rook endgames are the most common type.</strong> More games end in rook endgames than any other. The Lucena position (rook + pawn vs lone rook — winning side's technique) and the Philidor position (defending rook vs rook + pawn — how to hold the draw) are the two most important endgame positions in chess. Learn them both.</div></li>
</ul>
<h3>The Lawnmower Mate — Your First Winning Technique</h3>
<p>Two rooks against a lone king. The technique is simple and mechanical: confine the king to an ever-smaller strip of the board, one rank at a time. Watch the animation below to see it executed.</p>
<div class="ipanel">
<div class="ip-head">
<span class="ip-title">Lawnmower Mate — Animated</span>
<span class="ip-badge" id="lmCur">Starting Position</span>
</div>
<div class="board-outer" id="lmBoard" style="margin:0 auto;"></div>
<div class="ip-note" id="lmNote" style="text-align:center;max-width:440px;margin:0 auto;">The two White rooks will systematically push the Black king to the edge of the board.</div>
<div style="display:flex;gap:9px;margin-top:14px;justify-content:center;">
<button class="ib" id="lmPrev" disabled>← Prev</button>
<button class="ib" id="lmNext">Next →</button>
<button class="ib" id="lmAuto">Auto-Play</button>
<button class="ib" id="lmReset">Reset</button>
</div>
</div>
<h3>The Square Rule — Interactive</h3>
<p>Click any pawn on the board below to draw its "square." If the enemy king is inside that square when it is his turn to move, he catches the pawn. Outside it, the pawn promotes without needing the king's help.</p>
<div class="hint-bar">Click a pawn to draw its square</div>
<div class="board-wrap"><div class="board-outer" id="sqRuleBoard"></div></div>
<div class="info-bar" id="sqRuleInfo">Click one of the White pawns above to see the square rule in action.</div>
</div>
</section>
<div class="sdiv"></div>
<!-- ████ CH 11 — NEXT STEPS ████ -->
<section id="s11" data-sec="Next Steps">
<div class="section reveal" style="text-align:center;padding-bottom:120px;">
<span class="ch">Chapter 11</span>
<h2>You Know<br><em>Enough to Begin</em></h2>
<p style="max-width:560px;margin:0 auto 22px;">You now have everything needed to sit across from your friend, set up the board correctly, play a complete game from first move to checkmate, understand what went wrong, and start improving. That is more than most people who own a chess board ever actually learn.</p>
<blockquote style="max-width:560px;margin:32px auto;">Chess is not about memorizing moves. It is about training your mind to see one move further than it saw yesterday.<cite>Anonymous</cite></blockquote>
<div class="path-grid" style="max-width:640px;margin:32px auto;">
<div class="pcard"><span class="pc-n">I</span><h4>Tactics Daily</h4><p>Ten puzzles a day on Lichess or Chess.com — both free. Pattern recognition builds faster here than anywhere else.</p></div>
<div class="pcard"><span class="pc-n">II</span><h4>Play Slow Games</h4><p>Ten-minute games minimum. Fast blitz builds bad habits when you are starting out and have not yet internalized the thinking process.</p></div>
<div class="pcard"><span class="pc-n">III</span><h4>Analyze Every Game</h4><p>Use Stockfish on Lichess — free. Find your worst move. Understand why it was wrong. One analyzed game beats ten played blindly.</p></div>
</div>
<div class="callout" style="text-align:left;max-width:540px;margin:36px auto;">
<strong>Your First Seven Days</strong>
<p>Day 1–2: Run through piece movements until they are automatic. Day 3–4: Play your first real game using the opening principles. Day 5–7: Ten tactics puzzles on Lichess each day and two more games. After one week, re-read the How to Think chapter — it will read completely differently after real games.</p>
</div>
<div class="gline" style="margin:44px auto;"></div>
<p style="font-family:'Cinzel',serif;font-size:10px;letter-spacing:6px;color:var(--gold);opacity:.5;margin-top:12px;">THE BOARD IS SET. YOUR MOVE.</p>
</div>
</section>
<footer style="text-align:center;padding:32px;font-family:'Cinzel',serif;font-size:9px;letter-spacing:4px;color:var(--gold);opacity:.3;border-top:1px solid rgba(200,169,110,.06);">THE CHESS CODEX — FROM CHATURANGA TO CHECKMATE</footer>
<script>
// ════════════════════════════════════════════════════════════════
// CONSTANTS
// ════════════════════════════════════════════════════════════════
const LS='l', DS='d';
const SYM={wK:'♔',wQ:'♕',wR:'♖',wB:'♗',wN:'♘',wP:'♙',bK:'♚',bQ:'♛',bR:'♜',bB:'♝',bN:'♞',bP:'♟'};
const FILES=['a','b','c','d','e','f','g','h'];
function sqC(r,c){return(r+c)%2===0?LS:DS;}
function clone(b){return b.map(r=>[...r]);}
const START=[
['bR','bN','bB','bQ','bK','bB','bN','bR'],
['bP','bP','bP','bP','bP','bP','bP','bP'],
[null,null,null,null,null,null,null,null],
[null,null,null,null,null,null,null,null],
[null,null,null,null,null,null,null,null],
[null,null,null,null,null,null,null,null],
['wP','wP','wP','wP','wP','wP','wP','wP'],
['wR','wN','wB','wQ','wK','wB','wN','wR'],
];
// ════════════════════════════════════════════════════════════════
// RESPONSIVE SQUARE SIZE — container-aware
// ════════════════════════════════════════════════════════════════
function sqSz(availPx, hasCoords, maxSz) {
const labels = hasCoords ? 52 : 4;
const sq = Math.floor((availPx - labels) / 8);
return Math.max(24, Math.min(maxSz || 54, sq));
}
// Section usable width (minus section horizontal padding)
function secW() {
const vw = window.innerWidth;
const pad = vw <= 580 ? 36 : 56;
return Math.min(vw - pad, 804);
}
// Boards directly in .section (board-wrap)
function mainSz(hasCoords, maxSz) {
return sqSz(secW(), hasCoords, maxSz || 54);
}
// Boards inside .sp cards (.sp has padding:22px 24px → 48px horizontal)
function spSz(hasCoords, maxSz) {
return sqSz(secW() - 48, hasCoords, maxSz || 52);
}
// Boards inside .ipanel (.ipanel has padding:26px 24px → 48px horizontal)
function ipanelSz(hasCoords, maxSz) {
return sqSz(secW() - 48, hasCoords, maxSz || 52);
}
// Boards inside .ipanel > .ip-grid right column (2-col layout on desktop)
function ipanelGridSz(hasCoords, maxSz) {
const vw = window.innerWidth;
if (vw <= 640) return ipanelSz(hasCoords, maxSz); // stacks to 1 col on mobile
// ip-grid: "auto 1fr" with 20px gap. op-list auto ≈ 90px
const available = secW() - 48 - 90 - 20;
return sqSz(available, hasCoords, maxSz || 46);
}
// Boards inside .comp-card (.compare-wrap is 2-col, comp-board has padding:14px)
function compSz(hasCoords, maxSz) {
const vw = window.innerWidth;
const cols = vw <= 560 ? 1 : 2;
const cardW = cols === 1 ? secW() : (secW() - 20) / 2;
return sqSz(cardW - 28, hasCoords, maxSz || 42);
}
// Tactic and mate boards inside card grids
function tacticSzFn() {
const vw = window.innerWidth;
const cols = vw < 620 ? 1 : 2;
const cardW = cols === 1 ? secW() : (secW() - 20) / 2;
return Math.max(24, Math.min(40, Math.floor((cardW - 34) / 8)));
}
// Mini movement boards (3-col or 2-col)
function miniSzFn() {
const vw = window.innerWidth;
const cols = vw < 600 ? 2 : 3;
const cardW = (secW() - (cols - 1) * 24) / cols;
return Math.max(16, Math.min(30, Math.floor(cardW / 8)));
}
// ════════════════════════════════════════════════════════════════
// MOVE GENERATION (pseudolegal for demo)
// ════════════════════════════════════════════════════════════════
function getMoves(board,r,c){
const p=board[r][c]; if(!p) return [];
const col=p[0], type=p[1], mv=[];
const ray=(drs,dcs)=>{for(let i=0;i<drs.length;i++){for(let s=1;s<8;s++){const nr=r+drs[i]*s,nc=c+dcs[i]*s;if(nr<0||nr>=8||nc<0||nc>=8)break;if(board[nr][nc]){if(board[nr][nc][0]!==col)mv.push([nr,nc]);break;}mv.push([nr,nc]);}}};
if(type==='R'||type==='Q')ray([0,0,1,-1],[1,-1,0,0]);
if(type==='B'||type==='Q')ray([1,1,-1,-1],[1,-1,1,-1]);
if(type==='N'){[[2,1],[2,-1],[-2,1],[-2,-1],[1,2],[1,-2],[-1,2],[-1,-2]].forEach(([dr,dc])=>{const nr=r+dr,nc=c+dc;if(nr>=0&&nr<8&&nc>=0&&nc<8&&(!board[nr][nc]||board[nr][nc][0]!==col))mv.push([nr,nc]);});}
if(type==='K'){[[0,1],[0,-1],[1,0],[-1,0],[1,1],[1,-1],[-1,1],[-1,-1]].forEach(([dr,dc])=>{const nr=r+dr,nc=c+dc;if(nr>=0&&nr<8&&nc>=0&&nc<8&&(!board[nr][nc]||board[nr][nc][0]!==col))mv.push([nr,nc]);});}
if(type==='P'){const dir=col==='w'?-1:1,sr=col==='w'?6:1;if(r+dir>=0&&r+dir<8&&!board[r+dir]?.[c]){mv.push([r+dir,c]);if(r===sr&&!board[r+2*dir]?.[c])mv.push([r+2*dir,c]);}[-1,1].forEach(dc=>{const nr=r+dir,nc=c+dc;if(nr>=0&&nr<8&&nc>=0&&nc<8&&board[nr]?.[nc]&&board[nr][nc][0]!==col)mv.push([nr,nc]);});}
return mv;
}
// ════════════════════════════════════════════════════════════════
// BOARD BUILDER
// ════════════════════════════════════════════════════════════════
function buildBoard(container, board, sz, showCoords, clickFn){
container.innerHTML='';
function mkFileRow(){
const row=document.createElement('div');
const cols=showCoords?`24px repeat(8,${sz}px) 24px`:`repeat(8,${sz}px)`;
row.style.cssText=`display:grid;grid-template-columns:${cols};padding:3px 0;`;
if(showCoords){const s=document.createElement('span');row.appendChild(s);}
FILES.forEach(f=>{const s=document.createElement('span');s.textContent=f;s.style.cssText=`text-align:center;font-family:'Cinzel',serif;font-size:${Math.max(8,Math.round(sz*.2))}px;color:var(--gold);opacity:.55;width:${sz}px;display:block;`;row.appendChild(s);});
if(showCoords){const s=document.createElement('span');row.appendChild(s);}
return row;
}
if(showCoords) container.appendChild(mkFileRow());
const frame=document.createElement('div');
frame.className='board-frame';
for(let r=0;r<8;r++){
const row=document.createElement('div');
const cols=showCoords?`24px repeat(8,${sz}px) 24px`:`repeat(8,${sz}px)`;
row.style.cssText=`display:grid;grid-template-columns:${cols};`;
if(showCoords){const rl=document.createElement('span');rl.style.cssText=`line-height:${sz}px;text-align:center;width:24px;font-family:'Cinzel',serif;font-size:${Math.max(8,Math.round(sz*.2))}px;color:var(--gold);opacity:.55;`;rl.textContent=8-r;row.appendChild(rl);}
for(let c=0;c<8;c++){
const sq=document.createElement('div');
sq.className='sq '+(sqC(r,c)===LS?'l':'d');
sq.style.cssText=`width:${sz}px;height:${sz}px;font-size:${Math.round(sz*.6)}px;`;
sq.dataset.r=r; sq.dataset.c=c;
if(board[r]?.[c]){const pi=document.createElement('span');pi.className='pi';pi.textContent=SYM[board[r][c]];sq.appendChild(pi);}
if(clickFn) sq.addEventListener('click',()=>clickFn(r,c,sq,frame));
row.appendChild(sq);
}
if(showCoords){const rl=document.createElement('span');rl.style.cssText=`line-height:${sz}px;text-align:center;width:24px;font-family:'Cinzel',serif;font-size:${Math.max(8,Math.round(sz*.2))}px;color:var(--gold);opacity:.55;`;rl.textContent=8-r;row.appendChild(rl);}
frame.appendChild(row);
}
container.appendChild(frame);
if(showCoords) container.appendChild(mkFileRow());
return {frame, getSq:(r,c)=>frame.querySelector(`.sq[data-r="${r}"][data-c="${c}"]`)};
}
// ════════════════════════════════════════════════════════════════
// SVG ARROW OVERLAY
// ════════════════════════════════════════════════════════════════
function mkSVGArrows(arrows, sz, color, uid){
const NS='http://www.w3.org/2000/svg';
const total=sz*8;
const svg=document.createElementNS(NS,'svg');
svg.setAttribute('viewBox',`0 0 ${total} ${total}`);
svg.style.cssText=`position:absolute;top:0;left:0;width:${total}px;height:${total}px;pointer-events:none;`;
const defs=document.createElementNS(NS,'defs');
const mk=document.createElementNS(NS,'marker');
mk.setAttribute('id',uid); mk.setAttribute('markerWidth','8'); mk.setAttribute('markerHeight','8');
mk.setAttribute('refX','6'); mk.setAttribute('refY','3.5'); mk.setAttribute('orient','auto');
const path=document.createElementNS(NS,'path');
path.setAttribute('d','M0,0 L0,7 L8,3.5 z'); path.setAttribute('fill',color);
mk.appendChild(path); defs.appendChild(mk); svg.appendChild(defs);
arrows.forEach(([fr,fc,tr,tc],i)=>{
const x1=fc*sz+sz/2, y1=fr*sz+sz/2, x2=tc*sz+sz/2, y2=tr*sz+sz/2;
const dx=x2-x1, dy=y2-y1, len=Math.sqrt(dx*dx+dy*dy)||1;
const sx=x1+dx/len*16, sy=y1+dy/len*16, ex=x2-dx/len*18, ey=y2-dy/len*18;
const line=document.createElementNS(NS,'line');
line.setAttribute('x1',sx); line.setAttribute('y1',sy); line.setAttribute('x2',ex); line.setAttribute('y2',ey);
line.setAttribute('stroke',color); line.setAttribute('stroke-width','3.5');
line.setAttribute('marker-end',`url(#${uid})`);
const l2=Math.sqrt((ex-sx)**2+(ey-sy)**2);
line.setAttribute('stroke-dasharray',l2+50); line.setAttribute('stroke-dashoffset',l2+50);
line.style.animation=`arrowDraw .5s ease ${.25+i*.12}s forwards`;
svg.appendChild(line);
});
return svg;
}
const arrowSt=document.createElement('style');
arrowSt.textContent='@keyframes arrowDraw{to{stroke-dashoffset:0}}';
document.head.appendChild(arrowSt);
// ════════════════════════════════════════════════════════════════
// COVER
// ════════════════════════════════════════════════════════════════
(()=>{
const bg=document.getElementById('covBg');
for(let r=0;r<8;r++) for(let c=0;c<8;c++){const d=document.createElement('div');d.className=(r+c)%2===0?'cbl':'cbd';bg.appendChild(d);}
const cvs=document.getElementById('coverBoard');
const ctx=cvs.getContext('2d');
const SZ=40;
const pieces=[
{p:'♔',r:7,c:4,col:'#f5f0e8'},{p:'♛',r:7,c:3,col:'#f5f0e8'},
{p:'♖',r:7,c:0,col:'#f5f0e8'},{p:'♖',r:7,c:7,col:'#f5f0e8'},
{p:'♚',r:0,c:4,col:'#2a1a0a'},{p:'♜',r:0,c:0,col:'#2a1a0a'},{p:'♜',r:0,c:7,col:'#2a1a0a'},
];
pieces.forEach((p,i)=>{p.x=p.c*SZ; p.y=p.r===0?-SZ*2:SZ*10; p.ty=p.r*SZ; p.delay=i*8;});
let f=0;
function draw(){
ctx.clearRect(0,0,320,320);
for(let r=0;r<8;r++) for(let c=0;c<8;c++){ctx.fillStyle=(r+c)%2===0?'#f0d9b5':'#b58863';ctx.fillRect(c*SZ,r*SZ,SZ,SZ);}
pieces.forEach(p=>{
if(f>p.delay){const spd=2.5;if(Math.abs(p.y-p.ty)>spd)p.y+=(p.ty>p.y?spd:-spd);else p.y=p.ty;}
ctx.font=`${Math.round(SZ*.7)}px serif`; ctx.textAlign='center'; ctx.textBaseline='middle';
ctx.fillStyle=p.col; ctx.globalAlpha=.85; ctx.fillText(p.p,p.x+SZ/2,p.y+SZ/2); ctx.globalAlpha=1;
});
f++;
if(pieces.some(p=>Math.abs(p.y-p.ty)>.5)) requestAnimationFrame(draw);
}
draw();
})();
// ════════════════════════════════════════════════════════════════
// COORD BOARD (Ch 02) — responsive, rebuilds on resize
// ════════════════════════════════════════════════════════════════
let coordBoardState={};
(()=>{
const wrap=document.getElementById('coordBoard');
const info=document.getElementById('coordInfo');
const b=clone(START);
function build(){
const sz=mainSz(true);
let bObj=buildBoard(wrap,b,sz,true,(r,c,sq,frame)=>{
frame.querySelectorAll('.sq').forEach(s=>s.style.outline='');
sq.style.outline='3px solid var(--acc)'; sq.style.outlineOffset='-3px';
const file=FILES[c], rank=8-r;
const pc=b[r][c];
const pname=pc?` — ${pc[0]==='w'?'White':'Black'} ${{K:'King',Q:'Queen',R:'Rook',B:'Bishop',N:'Knight',P:'Pawn'}[pc[1]]}`:' — empty';
const zone=r<=1?'Black\'s back ranks':r>=6?'White\'s back ranks':r===3||r===4?'Center':'Extended territory';
info.textContent=`${file}${rank}${pname} · ${zone}`;
});
}
build();
coordBoardState.build=build;
})();
// ════════════════════════════════════════════════════════════════
// PIECE DEMO (Ch 03) — responsive
// ════════════════════════════════════════════════════════════════
let pieceBoardState={};
(()=>{
const wrap=document.getElementById('pieceBoard');
const info=document.getElementById('pieceInfo');
const PNAMES={K:'King',Q:'Queen',R:'Rook',B:'Bishop',N:'Knight',P:'Pawn'};
let board=clone(START), selR=-1, selC=-1, bObj;
function rebuild(){
const sz=mainSz(true);
bObj=buildBoard(wrap,board,sz,true,click);
}
function clearHL(){
bObj.frame.querySelectorAll('.sq').forEach(sq=>{
sq.classList.remove('sel','cring','lf','lt');
sq.querySelectorAll('.vdot').forEach(d=>d.remove());
});
}
function click(r,c){
const p=board[r][c];
if(selR>=0){
const moves=getMoves(board,selR,selC);
if(moves.find(([mr,mc])=>mr===r&&mc===c)){
const sr=selR,sc=selC;
board[r][c]=board[sr][sc]; board[sr][sc]=null;
selR=-1; selC=-1;
rebuild();
bObj.getSq(sr,sc)?.classList.add('lf');
bObj.getSq(r,c)?.classList.add('lt');
info.textContent='Moved! Click another White piece to continue.';
return;
}
}
clearHL();
if(!p||p[0]!=='w'){selR=-1;selC=-1;info.textContent='Click a White piece to see where it can go.';return;}
selR=r; selC=c;
bObj.getSq(r,c)?.classList.add('sel');
const moves=getMoves(board,r,c);
let mc=0,cc=0;
const sz=mainSz(true);
moves.forEach(([mr,mc_],i)=>{
const tsq=bObj.getSq(mr,mc_); if(!tsq) return;
if(board[mr][mc_]){tsq.classList.add('cring');cc++;}
else{const d=document.createElement('span');d.className='vdot';const s=Math.round(sz*.3);d.style.cssText=`width:${s}px;height:${s}px;animation-delay:${i*20}ms;`;tsq.appendChild(d);mc++;}
});
info.textContent=`${PNAMES[p[1]]} on ${FILES[c]}${8-r} — ${mc} move${mc!==1?'s':''}, ${cc} capture${cc!==1?'s':''} available.`;
}
rebuild();
pieceBoardState.rebuild=rebuild;
})();
// ════════════════════════════════════════════════════════════════
// PIECE LIST (Ch 03)
// ════════════════════════════════════════════════════════════════
[
{sym:'♔',name:'King',val:'∞',desc:"The most important piece on the board, though not the most powerful. The King moves one square in any direction. He cannot step onto a square where he would be attacked. The entire game revolves around protecting your king and threatening the enemy's. When the king has no escape from check, the game ends."},
{sym:'♕',name:'Queen',val:'9 pts',desc:"The most powerful piece. Moves any number of squares horizontally, vertically, or diagonally — in all eight directions. She is a rook and bishop fused together. Losing your queen early is almost always fatal. She should be active but safe, never recklessly exposed."},
{sym:'♖',name:'Rook',val:'5 pts',desc:"Moves any number of squares horizontally or vertically. Cannot jump over pieces. Two rooks doubled on an open file or sitting on the opponent's 7th rank are devastating. Rooks gain power as the board opens up."},
{sym:'♗',name:'Bishop',val:'3 pts',desc:"Moves diagonally any number of squares. Always stays on one color. A bishop with a long open diagonal is a powerful long-range attacker. When the center is locked with pawns, the bishop can become passive."},
{sym:'♘',name:'Knight',val:'3 pts',desc:"Moves in an L-shape: two squares one direction then one perpendicular. The only piece that can jump over others. Exceptional in closed positions. A knight in the center with no enemy pawn to kick it is a dominant force."},
{sym:'♙',name:'Pawn',val:'1 pt',desc:"Eight foot soldiers. Move forward only, one square at a time (two on the first move). Capture diagonally. A pawn reaching the far rank must promote — almost always to a queen. Pawn structure shapes the entire middlegame and endgame."},
].forEach(({sym,name,val,desc})=>{
const row=document.createElement('div'); row.className='pentry';
row.innerHTML=`<div class="pe-sym">${sym}</div><div><span class="pe-nm">${name.toUpperCase()}</span><span class="pe-val">${val}</span></div><div class="pe-desc">${desc}</div>`;
document.getElementById('pieceList').appendChild(row);
});
// ════════════════════════════════════════════════════════════════
// MINI MOVEMENT BOARDS (Ch 03)
// ════════════════════════════════════════════════════════════════
let miniBoardsState={};
(()=>{
const set=document.getElementById('miniSet');
const DATA=[
{piece:'wQ',r:3,c:3,label:'Queen',sub:'All 8 directions, any distance'},
{piece:'wR',r:3,c:3,label:'Rook',sub:'Horizontal & vertical rays'},
{piece:'wB',r:3,c:3,label:'Bishop',sub:'Diagonal rays, one color'},
{piece:'wN',r:3,c:3,label:'Knight',sub:'L-shape, jumps over pieces'},
{piece:'wK',r:3,c:3,label:'King',sub:'One square, all directions'},
{piece:'wP',r:4,c:3,label:'Pawn',sub:'Forward only, captures diag.'},
];
function build(){
set.innerHTML='';
const mSz=miniSzFn();
DATA.forEach(({piece,r,c,label,sub})=>{
const wrap=document.createElement('div'); wrap.className='mini-wrap';
const mb=document.createElement('div');
mb.style.cssText=`display:inline-grid;grid-template-columns:repeat(8,${mSz}px);grid-template-rows:repeat(8,${mSz}px);border:2px solid var(--bg4);box-shadow:0 6px 22px rgba(0,0,0,.42);`;
const tb=Array.from({length:8},()=>Array(8).fill(null)); tb[r][c]=piece;
const mvs=getMoves(tb,r,c); const mvSet=new Set(mvs.map(([mr,mc])=>mr*8+mc));
for(let ri=0;ri<8;ri++) for(let ci=0;ci<8;ci++){
const sq=document.createElement('div');
sq.style.cssText=`width:${mSz}px;height:${mSz}px;display:flex;align-items:center;justify-content:center;font-size:${Math.round(mSz*.6)}px;background:${sqC(ri,ci)===LS?'var(--ls)':'var(--ds)'};`;
if(ri===r&&ci===c){sq.style.background='rgba(212,148,26,.44)';sq.textContent=SYM[piece];}
else if(mvSet.has(ri*8+ci)){
sq.style.animation=`sqfi .3s ease ${(Math.abs(ri-r)+Math.abs(ci-c))*25}ms both`;
const dot=document.createElement('div');
const ds=Math.round(mSz*.35);
dot.style.cssText=`width:${ds}px;height:${ds}px;border-radius:50%;background:${sqC(ri,ci)===LS?'rgba(100,55,5,.26)':'rgba(0,0,0,.22)'};`;
sq.appendChild(dot);
}
mb.appendChild(sq);
}
wrap.appendChild(mb);
wrap.innerHTML+=`<div style="font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px;color:var(--gold);margin-top:8px;text-transform:uppercase;">${label}</div><div style="font-size:12px;color:var(--cream);opacity:.5;margin-top:2px;">${sub}</div>`;
set.appendChild(wrap);
});
}
build();
miniBoardsState.build=build;
})();
// ════════════════════════════════════════════════════════════════
// TIMELINE (Ch 01)
// ════════════════════════════════════════════════════════════════
[
{year:'550 AD — India',title:'Chaturanga: The First Army Game',text:'In the courts of the Gupta Empire, a war simulation called Chaturanga was played on an 8×8 grid. The name means "four divisions" — the four wings of an ancient Indian army: infantry (pawns), cavalry (knights), war elephants (bishops), and chariots (rooks). The king piece already existed. Chess was strategic military simulation, a way for military minds to rehearse battlefield decisions without actual soldiers.'},
{year:'600 AD — Persia',title:'Shatranj: The Soul of Chess',text:'Persian traders encountered Chaturanga and brought it home, renaming it Shatranj. In Persian hands, the game gained its most important concept: check and checkmate. The word Shah means King in Persian. Shah mat — "the king is helpless" — is the direct origin of our word checkmate. The Persians wrote entire manuscripts about chess theory.'},
{year:'700–900 AD — Islamic World',title:'Chess Travels with the Caliphate',text:'As the Arab caliphate expanded across the Middle East, North Africa, and into Spain, chess went with it. Arab scholars wrote detailed opening theory and produced the first serious analytical literature about the game. Through Moorish Spain, chess crossed into Christian Europe.'},
{year:'1200–1400 AD — Medieval Europe',title:'The Church, the Queen, the Knight',text:'Europeans rewrote the cast of characters to match their own world. The war elephant became a bishop. The chariot became a castle. The advisor became a queen — and was given almost unlimited power. In Shatranj, the advisor could only move one square diagonally. The European queen became the most powerful piece overnight. The entire pace of the game changed.'},
{year:'1475 — Spain',title:'The Modern Rules Are Born',text:'The final revolution arrived in 15th-century Spain. The queen received her current unlimited movement. Pawns were allowed their two-square first move. Castling was introduced. En passant was invented directly in response to the two-square pawn advance. These changes — adopted within a few decades — created the game we play today.'},
{year:'1886 — World Championship',title:'Steinitz and the Birth of Strategy',text:'Wilhelm Steinitz became the first official World Chess Champion by defeating Johannes Zukertort. More importantly, Steinitz introduced positional chess — that accumulating small structural advantages was as powerful as tactical attacks. Before him, chess was about flashy sacrifices. After him, it became a science.'},
{year:'1972 — Cold War on 64 Squares',title:'Fischer vs Spassky, Reykjavik',text:'The Cold War found its chess battlefield in Iceland. Bobby Fischer of the United States challenged Boris Spassky of the Soviet Union. The match became global news — front pages, television coverage, political significance. Fischer won in a match of extraordinary quality. For a few months, chess was the most watched intellectual contest in the world.'},
{year:'1997 — The Machine Wins',title:'Deep Blue Defeats Kasparov',text:"IBM's supercomputer Deep Blue defeated reigning World Champion Garry Kasparov — the first time a machine beat the world's best human in a formal match. Chess did not die. It transformed. Computers became indispensable training partners, opening preparation tools, and analysis engines."},
{year:'2020s — The Streaming Renaissance',title:'Chess Everywhere, All at Once',text:"Netflix's The Queen's Gambit triggered a global chess explosion in 2020. Chess.com and Lichess gained millions of new users overnight. Streamers like Hikaru Nakamura and Magnus Carlsen played live for hundreds of thousands of viewers. Chess is more popular globally right now than at any point in its 1,500-year history."},
].forEach(({year,title,text})=>{
const item=document.createElement('div'); item.className='tli';
const dot=document.createElement('div'); dot.className='tldot';
item.innerHTML=`<div class="tly">${year}</div><div class="tltt">${title}</div><div class="tltx">${text}</div>`;
item.insertBefore(dot,item.firstChild);
document.getElementById('tlWrap').appendChild(item);
});
// ════════════════════════════════════════════════════════════════
// CASTLING DEMO (Ch 04) — responsive
// ════════════════════════════════════════════════════════════════
let castleDemoState={};
(()=>{
const wrap=document.getElementById('castleDemo');
const info=document.getElementById('castleInfo');
const before=[
[null,null,null,null,'bK',null,null,null],
['bP','bP',null,null,null,'bP','bP','bP'],
[null,null,null,null,null,null,null,null],[null,null,null,null,null,null,null,null],
[null,null,null,null,null,null,null,null],[null,null,null,null,null,null,null,null],
['wP','wP','wP','wP','wP','wP','wP','wP'],
['wR',null,null,null,'wK',null,null,'wR'],
];
const afterK=clone(before); afterK[7][4]=null;afterK[7][7]=null;afterK[7][6]='wK';afterK[7][5]='wR';
const afterQ=clone(before); afterQ[7][4]=null;afterQ[7][0]=null;afterQ[7][2]='wK';afterQ[7][3]='wR';
let curBoard=before, curHL=[[7,0],[7,4],[7,7]];
function draw(){
wrap.innerHTML='';
const sz=spSz(false);
const bObj=buildBoard(wrap,curBoard,sz,false);
curHL.forEach(([r,c])=>{const sq=bObj.getSq(r,c);if(sq)sq.style.background='rgba(212,148,26,.38)';});
}
draw();
castleDemoState.draw=draw;
document.getElementById('btnCastleK').addEventListener('click',()=>{
curBoard=afterK; curHL=[[7,5],[7,6]];
draw(); info.textContent='O-O Kingside: King moved e1→g1, Rook jumped h1→f1. King is now safe behind the pawn wall.';
});
document.getElementById('btnCastleQ').addEventListener('click',()=>{