Kitsune/dragon.html at main · swallowtail1056-collab/Kitsune · GitHub

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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1034556404852942" crossorigin="anonymous"></script>

<title>ドラゴン・シシリアン (Dragon Sicilian) - KitsuneChess</title>
<link href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;600;700&display=swap" rel="stylesheet">
<style>
:root {
  --bg: #f5edd6;
  --brown: #7c4a1e;
  --brown-dark: #4a2a0e;
  --brown-light: #a3692d;
  --text: #111;
  --text-sub: #222;
  --nav-bg: rgba(90, 58, 24, 0.1);
  --border-color: rgba(184, 134, 11, 0.3);
  --card-bg: rgba(255, 255, 255, 0.5);
  --card-border: rgba(90, 58, 24, 0.15);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--text); font-family:'Crimson Pro',serif; font-weight:600; min-height:100vh; }

nav { width:100%; background:var(--nav-bg); border-bottom:2px solid var(--border-color); }
.nav-inner { max-width:960px; margin:0 auto; width:100%; display:flex; align-items:center; justify-content:space-between; padding:8px 16px; }
.back-link { color:var(--brown); text-decoration:none; font-size:0.9rem; font-weight:700; }
.back-link:hover { color:var(--brown-dark); }
.lang-switch-btn { background:rgba(90,58,24,0.08); border:1px solid rgba(90,58,24,0.25); color:var(--text-sub); padding:5px 10px; border-radius:5px; font-family:'Crimson Pro',serif; font-size:0.8rem; font-weight:700; cursor:pointer; transition:all .2s; }
.lang-switch-btn:hover { border-color:var(--brown); color:var(--brown); background:rgba(90,58,24,0.15); }

.app-container { max-width:600px; margin:0 auto; width:100%; padding:24px 16px; }
.opening-title { font-size:1.6rem; color:var(--brown-dark); margin-bottom:16px; text-align:center; }

.board-wrap { width:100%; max-width:420px; margin:0 auto 12px auto; }
.move-label { text-align:center; font-weight:700; color:var(--brown-dark); font-size:1.1rem; margin-bottom:8px; }
.board-grid {
  display:grid;
  grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(8,1fr);
  width:100%;
  aspect-ratio:1/1;
  border:4px solid var(--brown-dark);
  border-radius:4px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  overflow:hidden;
}
.cell { position:relative; display:flex; align-items:center; justify-content:center; min-width:0; min-height:0; }
.cell.light { background:var(--sq-light,#f0d9b5); }
.cell.dark { background:var(--sq-dark,#b58863); }
.piece-img { width:100%; height:100%; object-fit:contain; pointer-events:none; display:block; }

/* Board labels inside cells */
.cell-label {
  position:absolute;
  font-family:'Crimson Pro',serif;
  font-weight:800;
  font-size:clamp(0.85rem,3vw,1.2rem);
  line-height:1;
  pointer-events:none;
  z-index:2;
}
.cell.light .cell-label { color:rgba(80,40,0,0.85); }
.cell.dark  .cell-label { color:rgba(255,240,200,0.95); }
.cell-label.rank-label { top:2px; left:3px; }
.cell-label.file-label { bottom:2px; right:3px; }

/* ── 解説＋操作パネル：常に画面下部に固定表示 ── */
.bottom-panel {
  position:fixed;
  left:0; right:0; bottom:0;
  margin:0 auto;
  max-width:600px;
  background:var(--bg);
  border-top:2px solid var(--border-color);
  box-shadow:0 -4px 14px rgba(0,0,0,0.1);
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  z-index:50;
}
.commentary-row { display:flex; gap:14px; align-items:flex-start; margin-bottom:12px; }
.fox-avatar { width:56px; height:56px; flex-shrink:0; border-radius:50%; background:#fff8ea; border:2px solid var(--brown-light); object-fit:contain; }
.commentary-text { line-height:1.55; font-size:0.98rem; color:var(--text-sub); max-height:6.5em; overflow-y:auto; }

.lesson-controls { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.lesson-btn { background:var(--brown); color:#fff; border:none; padding:10px 18px; border-radius:6px; font-family:'Crimson Pro',serif; font-weight:700; font-size:0.95rem; cursor:pointer; transition:background .2s; }
.lesson-btn:hover { background:var(--brown-dark); }
.lesson-btn:disabled { opacity:.4; cursor:not-allowed; }
.lesson-progress { font-size:.85rem; color:var(--brown-light); font-weight:700; }

.lang-element-ja, .lang-element-en { display:none; }

footer { text-align:center; font-size:0.85rem; color:var(--brown-light); margin-top:20px; padding-bottom:10px; }

.opening-intro {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 20px;
  line-height: 1.75;
  font-size: 1rem;
  color: var(--text-sub);
}
</style>
  <script src="board-theme.js"></script>
</head>
<body>

<nav>
  <div class="nav-inner">
    <a href="openings_list.html" class="back-link lang-element-ja">← 一覧へ戻る</a>
    <a href="openings_list.html" class="back-link lang-element-en">← Back to List</a>
    <button id="langToggle" class="lang-switch-btn">English</button>
  </div>
</nav>

<div class="app-container">
  <h1 class="opening-title lang-element-ja">ドラゴン・シシリアン</h1>
  <h1 class="opening-title lang-element-en">Dragon Sicilian</h1>

  <div class="opening-intro">
    <p class="lang-element-ja">💡 ドラゴン・シシリアンはg6-Bg7のフィアンケットが特徴のシシリアンの変化だよ！黒のビショップをg7に配置することで、長い対角線h8-a1を支配する強力な「ドラゴン・ビショップ」が生まれるんだ。白は最も激しい対抗策としてユーゴスラフ・アタックを採用してBe3-Qd2-O-O-Oとクイーンサイドにキャスリングし、h4-h5と突いてキングサイドへの猛攻を仕掛けるよ。黒も負けじとdファイルを開けてdラインからの反撃を狙い、双方が相手のキングに向かって突っ走る超激戦になるんだ。深い理論研究が必要な上級者向けだけど、その迫力は格別だよ！</p>
    <p class="lang-element-en">💡 The Dragon Sicilian is named after the g6-Bg7 fianchetto formation that resembles a dragon's spine! Placing the bishop on g7 creates the powerful "Dragon Bishop" that controls the long diagonal from h8 to a1. White's sharpest response is the Yugoslav Attack, castling queenside with Be3-Qd2-O-O-O and launching a kingside pawn storm with h4-h5. Black fights back by opening the d-file for queenside counterplay. Both sides race to attack the opposing king. One wrong move can be immediately fatal. The Dragon is for advanced players, but the excitement it offers is absolutely unique!</p>
  </div>

  <div class="board-wrap">
    <div class="move-label" id="moveLabel"></div>
    <div class="board-grid" id="boardGrid"></div>
  </div>

  <footer>© KitsuneChess</footer>
</div>

<div class="bottom-panel" id="bottomPanel">
  <div class="commentary-row">
    <img id="foxAvatar" class="fox-avatar" src="" alt="Jene">
    <p class="commentary-text" id="commentaryText"></p>
  </div>
  <div class="lesson-controls">
    <button id="btnPrev" class="lesson-btn">← 前へ</button>
    <span class="lesson-progress" id="lessonProgress"></span>
    <button id="btnNext" class="lesson-btn">次へ →</button>
  </div>
</div>

<script>
const PIECE_IMG = {
  wP: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NSA0NSI+PHBhdGggZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBkPSJNMjIuNSA5Yy0yLjIxIDAtNCAxLjc5LTQgNCAwIC44OS4yOSAxLjcxLjc4IDIuMzhDMTcuMzMgMTYuNSAxNiAxOC41OSAxNiAyMWMwIDIuMDMuOTQgMy44NCAyLjQxIDUuMDMtMyAxLjA2LTcuNDEgNS41NS03LjQxIDEzLjQ3aDIzYzAtNy45Mi00LjQxLTEyLjQxLTcuNDEtMTMuNDcgMS40Ny0xLjE5IDIuNDEtMyAyLjQxLTUuMDMgMC0yLjQxLTEuMzMtNC41LTMuMjgtNS42Mi40OS0uNjcuNzgtMS40OS43OC0yLjM4IDAtMi4yMS0xLjc5LTQtNC00eiIvPjwvc3ZnPg==",
  wN: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NSA0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0yMiAxMGMxMC41IDEgMTYuNSA4IDE2IDI5SDE1YzAtOSAxMC02LjUgOC0yMSIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0yNCAxOGMuMzggMi45MS01LjU1IDcuMzctOCA5LTMgMi0yLjgyIDQuMzQtNSA0LTEuMDQyLS45NCAxLjQxLTMuMDQgMC0zLTEgMCAuMTkgMS4yMy0xIDItMSAwLTQuMDAzIDEtNC00IDAtMiA2LTEyIDYtMTJzMS44OS0xLjkgMi0zLjVjLS43My0uOTk0LS41LTItLjUtMyAxLTEgMyAyLjUgMyAyLjVoMnMuNzgtMS45OTIgMi41LTNjMSAwIDEgMyAxIDMiLz48cGF0aCBmaWxsPSIjMDAwIiBkPSJNOS41IDI1LjVhLjUuNSAwIDEgMS0xIDAgLjUuNSAwIDEgMSAxIDBtNS40MzMtOS43NWEuNSAxLjUgMzAgMSAxLS44NjYtLjUuNSAxLjUgMzAgMSAxIC44NjYuNSIvPjwvZz48L3N2Zz4=",
  wB: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NSA0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxnIGZpbGw9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJidXR0Ij48cGF0aCBkPSJNOSAzNmMzLjM5LS45NyAxMC4xMS40MyAxMy41LTIgMy4zOSAyLjQzIDEwLjExIDEuMDMgMTMuNSAyIDAgMCAxLjY1LjU0IDMgMi0uNjguOTctMS42NS45OS0zIC41LTMuMzktLjk3LTEwLjExLjQ2LTEzLjUtMS0zLjM5IDEuNDYtMTAuMTEuMDMtMTMuNSAxLTEuMzUuNDktMi4zMi40Ny0zLS41IDEuMzUtMS45NCAzLTIgMy0yeiIvPjxwYXRoIGQ9Ik0xNSAzMmMyLjUgMi41IDEyLjUgMi41IDE1IDAgLjUtMS41IDAtMiAwLTIgMC0yLjUtMi41LTQtMi41LTQgNS41LTEuNSA2LTExLjUtNS0xNS41LTExIDQtMTAuNSAxNC01IDE1LjUgMCAwLTIuNSAxLjUtMi41IDQgMCAwLS41LjUgMCAyeiIvPjxwYXRoIGQ9Ik0yNSA4YTIuNSAyLjUgMCAxIDEtNSAwIDIuNSAyLjUgMCAxIDEgNSAweiIvPjwvZz48cGF0aCBzdHJva2UtbGluZWpvaW49Im1pdGVyIiBkPSJNMTcuNSAyNmgxME0xNSAzMGgxNW0tNy41LTE0LjV2NU0yMCAxOGg1Ii8+PC9nPjwvc3ZnPg==",
  wR: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NSA0NSI+PGcgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxwYXRoIHN0cm9rZS1saW5lY2FwPSJidXR0IiBkPSJNOSAzOWgyN3YtM0g5em0zLTN2LTRoMjF2NHptLTEtMjJWOWg0djJoNVY5aDV2Mmg1VjloNHY1Ii8+PHBhdGggZD0ibTM0IDE0LTMgM0gxNGwtMy0zIi8+PHBhdGggc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiIGQ9Ik0zMSAxN3YxMi41SDE0VjE3Ii8+PHBhdGggZD0ibTMxIDI5LjUgMS41IDIuNWgtMjBsMS41LTIuNSIvPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiIGQ9Ik0xMSAxNGgyMyIvPjwvZz48L3N2Zz4=",
  wQ: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NSA0NSI+PGcgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxwYXRoIGQ9Ik04IDEyYTIgMiAwIDEgMS00IDAgMiAyIDAgMSAxIDQgMG0xNi41LTQuNWEyIDIgMCAxIDEtNCAwIDIgMiAwIDEgMSA0IDBNNDEgMTJhMiAyIDAgMSAxLTQgMCAyIDIgMCAxIDEgNCAwTTE2IDguNWEyIDIgMCAxIDEtNCAwIDIgMiAwIDEgMSA0IDBNMzMgOWEyIDIgMCAxIDEtNCAwIDIgMiAwIDEgMSA0IDAiLz48cGF0aCBzdHJva2UtbGluZWNhcD0iYnV0dCIgZD0iTTkgMjZjOC41LTEuNSAyMS0xLjUgMjcgMGwyLTEyLTcgMTFWMTFsLTUuNSAxMy41LTMtMTUtMyAxNS01LjUtMTRWMjVMNyAxNHoiLz48cGF0aCBzdHJva2UtbGluZWNhcD0iYnV0dCIgZD0iTTkgMjZjMCAyIDEuNSAyIDIuNSA0IDEgMS41IDEgMSAuNSAzLjUtMS41IDEtMS41IDIuNS0xLjUgMi41LTEuNSAxLjUuNSAyLjUuNSAyLjUgNi41IDEgMTYuNSAxIDIzIDAgMCAwIDEuNS0xIDAtMi41IDAgMCAuNS0xLjUtMS0yLjUtLjUtMi41LS41LTIgLjUtMy41IDEtMiAyLjUtMiAyLjUtNC04LjUtMS41LTE4LjUtMS41LTI3IDB6Ii8+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTExLjUgMzBjMy41LTEgMTguNS0xIDIyIDBNMTIgMzMuNWM2LTEgMTUtMSAyMSAwIi8+PC9nPjwvc3ZnPg==",
  wK: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NSA0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxwYXRoIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiIGQ9Ik0yMi41IDExLjYzVjZNMjAgOGg1Ii8+PHBhdGggZmlsbD0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiIGQ9Ik0yMi41IDI1czQuNS03LjUgMy0xMC41YzAgMC0xLTIuNS0zLTIuNXMtMyAyLjUtMyAyLjVjLTEuNSAzIDMgMTAuNSAzIDEwLjUiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTEuNSAzN2M1LjUgMy41IDE1LjUgMy41IDIxIDB2LTdzOS00LjUgNi0xMC41Yy00LTYuNS0xMy41LTMuNS0xNiA0VjI3di0zLjVjLTMuNS03LjUtMTMtMTAuNS0xNi00LTMgNiA1IDEwIDUgMTB6Ii8+PHBhdGggZD0iTTExLjUgMzBjNS41LTMgMTUuNS0zIDIxIDBtLTIxIDMuNWM1LjUtMyAxNS41LTMgMjEgMG0tMjEgMy41YzUuNS0zIDE1LjUtMyAyMSAwIi8+PC9nPjwvc3ZnPg==",
  bP: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NSA0NSI+PHBhdGggc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBkPSJNMjIuNSA5YTQgNCAwIDAgMC0zLjIyIDYuMzggNi40OCA2LjQ4IDAgMCAwLS44NyAxMC42NWMtMyAxLjA2LTcuNDEgNS41NS03LjQxIDEzLjQ3aDIzYzAtNy45Mi00LjQxLTEyLjQxLTcuNDEtMTMuNDdhNi40NiA2LjQ2IDAgMCAwLS44Ny0xMC42NUE0LjAxIDQuMDEgMCAwIDAgMjIuNSA5eiIvPjwvc3ZnPg==",
  bN: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NSA0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxwYXRoIGZpbGw9IiMwMDAiIGQ9Ik0yMiAxMGMxMC41IDEgMTYuNSA4IDE2IDI5SDE1YzAtOSAxMC02LjUgOC0yMSIvPjxwYXRoIGZpbGw9IiMwMDAiIGQ9Ik0yNCAxOGMuMzggMi45MS01LjU1IDcuMzctOCA5LTMgMi0yLjgyIDQuMzQtNSA0LTEuMDQtLjk0IDEuNDEtMy4wNCAwLTMtMSAwIC4xOSAxLjIzLTEgMi0xIDAtNCAxLTQtNCAwLTIgNi0xMiA2LTEyczEuODktMS45IDItMy41Yy0uNzMtMS0uNS0yLS41LTMgMS0xIDMgMi41IDMgMi41aDJzLjc4LTIgMi41LTNjMSAwIDEgMyAxIDMiLz48cGF0aCBmaWxsPSIjZWNlY2VjIiBzdHJva2U9IiNlY2VjZWMiIGQ9Ik05LjUgMjUuNWEuNS41IDAgMSAxLTEgMCAuNS41IDAgMSAxIDEgMG01LjQzLTkuNzVhLjUgMS41IDMwIDEgMS0uODYtLjUuNSAxLjUgMzAgMSAxIC44Ni41Ii8+PHBhdGggZmlsbD0iI2VjZWNlYyIgc3Ryb2tlPSJub25lIiBkPSJtMjQuNTUgMTAuNC0uNDUgMS40NS41LjE1YzMuMTUgMSA1LjY1IDIuNDkgNy45IDYuNzVTMzUuNzUgMjkuMDYgMzUuMjUgMzlsLS4wNS41aDIuMjVsLjA1LS41Yy41LTEwLjA2LS44OC0xNi44NS0zLjI1LTIxLjM0cy01Ljc5LTYuNjQtOS4xOS03LjE2eiIvPjwvZz48L3N2Zz4=",
  bB: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NSA0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxnIGZpbGw9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJidXR0Ij48cGF0aCBkPSJNOSAzNmMzLjQtMSAxMC4xLjQgMTMuNS0yIDMuNCAyLjQgMTAuMSAxIDEzLjUgMiAwIDAgMS42LjUgMyAyLS43IDEtMS42IDEtMyAuNS0zLjQtMS0xMC4xLjUtMTMuNS0xLTMuNCAxLjUtMTAuMSAwLTEzLjUgMS0xLjQuNS0yLjMuNS0zLS41IDEuNC0yIDMtMiAzLTJ6Ii8+PHBhdGggZD0iTTE1IDMyYzIuNSAyLjUgMTIuNSAyLjUgMTUgMCAuNS0xLjUgMC0yIDAtMiAwLTIuNS0yLjUtNC0yLjUtNCA1LjUtMS41IDYtMTEuNS01LTE1LjUtMTEgNC0xMC41IDE0LTUgMTUuNSAwIDAtMi41IDEuNS0yLjUgNCAwIDAtLjUuNSAwIDJ6Ii8+PHBhdGggZD0iTTI1IDhhMi41IDIuNSAwIDEgMS01IDAgMi41IDIuNSAwIDEgMSA1IDB6Ii8+PC9nPjxwYXRoIHN0cm9rZT0iI2VjZWNlYyIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgZD0iTTE3LjUgMjZoMTBNMTUgMzBoMTVtLTcuNS0xNC41djVNMjAgMThoNSIvPjwvZz48L3N2Zz4=",
  bR: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NSA0NSI+PGcgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxwYXRoIHN0cm9rZS1saW5lY2FwPSJidXR0IiBkPSJNOSAzOWgyN3YtM0g5em0zLjUtNyAxLjUtMi41aDE3bDEuNSAyLjV6bS0uNSA0di00aDIxdjR6Ii8+PHBhdGggc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiIGQ9Ik0xNCAyOS41di0xM2gxN3YxM3oiLz48cGF0aCBzdHJva2UtbGluZWNhcD0iYnV0dCIgZD0iTTE0IDE2LjUgMTEgMTRoMjNsLTMgMi41ek0xMSAxNFY5aDR2Mmg1VjloNXYyaDVWOWg0djV6Ii8+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZWNlY2VjIiBzdHJva2UtbGluZWpvaW49Im1pdGVyIiBzdHJva2Utd2lkdGg9IjEiIGQ9Ik0xMiAzNS41aDIxbS0yMC00aDE5bS0xOC0yaDE3bS0xNy0xM2gxN00xMSAxNGgyMyIvPjwvZz48L3N2Zz4=",
  bQ: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NSA0NSI+PGcgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxnIHN0cm9rZT0ibm9uZSI+PGNpcmNsZSBjeD0iNiIgY3k9IjEyIiByPSIyLjc1Ii8+PGNpcmNsZSBjeD0iMTQiIGN5PSI5IiByPSIyLjc1Ii8+PGNpcmNsZSBjeD0iMjIuNSIgY3k9IjgiIHI9IjIuNzUiLz48Y2lyY2xlIGN4PSIzMSIgY3k9IjkiIHI9IjIuNzUiLz48Y2lyY2xlIGN4PSIzOSIgY3k9IjEyIiByPSIyLjc1Ii8+PC9nPjxwYXRoIHN0cm9rZS1saW5lY2FwPSJidXR0IiBkPSJNOSAyNmM4LjUtMS41IDIxLTEuNSAyNyAwbDIuNS0xMi41TDMxIDI1bC0uMy0xNC4xLTUuMiAxMy42LTMtMTQuNS0zIDE0LjUtNS4yLTEzLjZMMTQgMjUgNi41IDEzLjV6Ii8+PHBhdGggc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIGQ9Ik05IDI2YzAgMiAxLjUgMiAyLjUgNCAxIDEuNSAxIDEgLjUgMy41LTEuNSAxLTEuNSAyLjUtMS41IDIuNS0xLjUgMS41LjUgMi41LjUgMi41IDYuNSAxIDE2LjUgMSAyMyAwIDAgMCAxLjUtMSAwLTIuNSAwIDAgLjUtMS41LTEtMi41LS41LTIuNS0uNS0yIC41LTMuNSAxLTIgMi41LTIgMi41LTQtOC41LTEuNS0xOC41LTEuNS0yNyAweiIvPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJidXR0IiBkPSJNMTEgMzguNWEzNSAzNSAxIDAgMCAyMyAwIi8+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZWNlY2VjIiBkPSJNMTEgMjlhMzUgMzUgMSAwIDEgMjMgMG0tMjEuNSAyLjVoMjBtLTIxIDNhMzUgMzUgMSAwIDAgMjIgMG0tMjMgM2EzNSAzNSAxIDAgMCAyNCAwIi8+PC9nPjwvc3ZnPg==",
  bK: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NSA0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxwYXRoIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiIGQ9Ik0yMi41IDExLjZWNiIvPjxwYXRoIGZpbGw9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJidXR0IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIiBkPSJNMjIuNSAyNXM0LjUtNy41IDMtMTAuNWMwIDAtMS0yLjUtMy0yLjVzLTMgMi41LTMgMi41Yy0xLjUgMyAzIDEwLjUgMyAxMC41Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTExLjUgMzdhMjIuMyAyMi4zIDAgMCAwIDIxIDB2LTdzOS00LjUgNi0xMC41Yy00LTYuNS0xMy41LTMuNS0xNiA0VjI3di0zLjVjLTMuNS03LjUtMTMtMTAuNS0xNi00LTMgNiA1IDEwIDUgMTB6Ii8+PHBhdGggc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgZD0iTTIwIDhoNSIvPjxwYXRoIHN0cm9rZT0iI2VjZWNlYyIgZD0iTTMyIDI5LjVzOC41LTQgNi05LjdDMzQuMSAxNCAyNSAxOCAyMi41IDI0LjZ2Mi4xLTIuMUMyMCAxOCA5LjkgMTQgNyAxOS45Yy0yLjUgNS42IDQuOCA5IDQuOCA5Ii8+PHBhdGggc3Ryb2tlPSIjZWNlY2VjIiBkPSJNMTEuNSAzMGM1LjUtMyAxNS41LTMgMjEgMG0tMjEgMy41YzUuNS0zIDE1LjUtMyAyMSAwbS0yMSAzLjVjNS41LTMgMTUuNS0zIDIxIDAiLz48L2c+PC9zdmc+",
};

// ============================================================
// JENE'S FACES
// ============================================================
const FOX_WELCOME_SRC = "https://raw.githubusercontent.com/swallowtail1056-collab/Kitsune/main/jene_welcome.png";
const FOX_HAPPY_SRC   = "https://raw.githubusercontent.com/swallowtail1056-collab/Kitsune/main/jene_happy.png";
const FOX_NORMAL_SRC  = "https://raw.githubusercontent.com/swallowtail1056-collab/Kitsune/main/jene_normal.png";
const FOX_SRC         = "https://raw.githubusercontent.com/swallowtail1056-collab/Kitsune/main/jene_quiz.png";
const FOX_WINK_SRC    = "https://raw.githubusercontent.com/swallowtail1056-collab/Kitsune/main/jene_wink.png";
const FOX_BY_MOOD = { welcome:FOX_WELCOME_SRC, normal:FOX_NORMAL_SRC, happy:FOX_HAPPY_SRC, quiz:FOX_SRC, wink:FOX_WINK_SRC };

// ============================================================
// 初期配置
// ============================================================
const initialBoard = [
  ['r','n','b','q','k','b','n','r'],
  ['p','p','p','p','p','p','p','p'],
  ['','','','','','','',''],
  ['','','','','','','',''],
  ['','','','','','','',''],
  ['','','','','','','',''],
  ['P','P','P','P','P','P','P','P'],
  ['R','N','B','Q','K','B','N','R']
];

// ============================================================
// レッスンステップ（手・解説・ジーンの表情）
// ============================================================
const LESSON_STEPS = [
  { move:null, moveLabel:{ja:"開始局面", en:"Starting Position"},
    ja:"ドラゴン・シシリアンのレッスンを始めるよ！g7にビショップを構えて、双方が相手のキングへ突っ走る、超激戦になりやすいシャープな変化だよ。ジーンと一緒に、一手ずつ「なぜその手を指すのか」を学んでいこう。",
    en:"Let's start the Dragon Sicilian lesson! With the bishop fianchettoed on g7, both sides often race straight for each other's king in this incredibly sharp variation. Jene will explain why each move is played, one step at a time.",
    fox:'welcome' },
  { move:{from:[6,4],to:[4,4]}, moveLabel:{ja:"1. e4", en:"1. e4"},
    ja:"白はe4で中央を制圧するよ。",
    en:"White plays 1.e4, claiming the center.",
    fox:'normal' },
  { move:{from:[1,2],to:[3,2]}, moveLabel:{ja:"1...c5", en:"1...c5"},
    ja:"黒はc5。非対称な局面を作り出して、自分なりの反撃を狙うよ。",
    en:"Black plays 1...c5, creating an asymmetrical fight.",
    fox:'normal' },
  { move:{from:[7,6],to:[5,5]}, moveLabel:{ja:"2. Nf3", en:"2. Nf3"},
    ja:"白はナイトをf3に展開して、d4への中央突破を狙うよ。",
    en:"White develops the knight to f3, preparing a central break with d4.",
    fox:'normal' },
  { move:{from:[1,3],to:[2,3]}, moveLabel:{ja:"2...d6", en:"2...d6"},
    ja:"黒はd6で将来の展開を支える柔軟な一手を指すよ。",
    en:"Black plays the flexible 2...d6.",
    fox:'normal' },
  { move:{from:[6,3],to:[4,3]}, moveLabel:{ja:"3. d4", en:"3. d4"},
    ja:"白はd4で中央に第二の突破を仕掛けるよ。",
    en:"White strikes again in the center with 3.d4.",
    fox:'normal' },
  { move:{from:[3,2],to:[4,3]}, moveLabel:{ja:"3...cxd4", en:"3...cxd4"},
    ja:"黒はcxd4でポーンを交換。シシリアンの核心となる一手だよ。",
    en:"Black trades with 3...cxd4, the core idea of the Sicilian.",
    fox:'quiz' },
  { move:{from:[5,5],to:[4,3]}, moveLabel:{ja:"4. Nxd4", en:"4. Nxd4"},
    ja:"白はナイトで取り返して、中央のいいマスに陣取るよ。",
    en:"White recaptures with the knight, landing on a strong central square.",
    fox:'normal' },
  { move:{from:[0,6],to:[2,5]}, moveLabel:{ja:"4...Nf6", en:"4...Nf6"},
    ja:"黒はナイトをf6へ。e4ポーンに圧力をかけながら展開するよ。",
    en:"Black develops the knight to f6, pressuring the e4 pawn.",
    fox:'normal' },
  { move:{from:[7,1],to:[5,2]}, moveLabel:{ja:"5. Nc3", en:"5. Nc3"},
    ja:"白はナイトをc3で展開して、e4ポーンを守りつつ駒を育てるよ。",
    en:"White develops the knight to c3, defending e4 while developing.",
    fox:'normal' },
  { move:{from:[1,6],to:[2,6]}, moveLabel:{ja:"5...g6（ドラゴン！）", en:"5...g6 (Dragon!)"},
    ja:"ここが本題、ドラゴン・シシリアンの一手！黒はg6でフィアンケットを準備するよ。長い対角線を支配する「ドラゴン・ビショップ」が生まれるんだ。",
    en:"Here's the Dragon Sicilian move! Black prepares the fianchetto with 5...g6, setting up the powerful long-diagonal \"Dragon Bishop\".",
    fox:'happy' },
  { move:{from:[7,2],to:[5,4]}, moveLabel:{ja:"6. Be3", en:"6. Be3"},
    ja:"白はビショップをe3へ。ユーゴスラフ・アタックの準備を始めるよ。",
    en:"White develops the bishop to e3, beginning preparations for the Yugoslav Attack.",
    fox:'normal' },
  { move:{from:[0,5],to:[1,6]}, moveLabel:{ja:"6...Bg7", en:"6...Bg7"},
    ja:"黒はビショップをg7へ。これがドラゴンの代名詞、長い対角線を支配する一手だよ！",
    en:"Black completes the fianchetto with 6...Bg7 — the defining move of the Dragon, controlling the long diagonal!",
    fox:'happy' },
  { move:{from:[6,5],to:[5,5]}, moveLabel:{ja:"7. f3", en:"7. f3"},
    ja:"白はf3でg4へのポーン突きと、キャスリング後のh4-h5の猛攻を準備するよ。これで本譜は一段落、続きはぜひ自分で指してみてね！",
    en:"White plays 7.f3, preparing g4 and the eventual h4-h5 pawn storm after castling queenside. That's the main line — try continuing the game yourself from here!",
    fox:'happy' }
];

const BUTTON_TEXT = { ja:{prev:'← 前へ', next:'次へ →'}, en:{prev:'← Prev', next:'Next →'} };

let currentLang = 'ja';
let currentStep = 0;
let boardSnapshots = [];

function pieceKey(p){
  if(!p) return null;
  return (p === p.toUpperCase() ? 'w' : 'b') + p.toUpperCase();
}
function cloneBoard(b){ return b.map(row => row.slice()); }

function applyMove(board, move){
  const nb = cloneBoard(board);
  if(move){
    const piece = nb[move.from[0]][move.from[1]];
    nb[move.from[0]][move.from[1]] = '';
    nb[move.to[0]][move.to[1]] = piece;
    if(move.castle){
      const rook = nb[move.castle.from[0]][move.castle.from[1]];
      nb[move.castle.from[0]][move.castle.from[1]] = '';
      nb[move.castle.to[0]][move.castle.to[1]] = rook;
    }
  }
  return nb;
}

function buildSnapshots(){
  let board = initialBoard;
  boardSnapshots = [cloneBoard(board)];
  for(let i = 1; i < LESSON_STEPS.length; i++){
    board = applyMove(board, LESSON_STEPS[i].move);
    boardSnapshots.push(cloneBoard(board));
  }
}

function renderBoard(board){
  const grid = document.getElementById('boardGrid');
  grid.innerHTML = '';
  const files = ['a','b','c','d','e','f','g','h'];
  const ranks = ['8','7','6','5','4','3','2','1'];
  for(let r = 0; r < 8; r++){
    for(let c = 0; c < 8; c++){
      const cell = document.createElement('div');
      const isLight = (r + c) % 2 === 0;
      cell.className = 'cell ' + (isLight ? 'light' : 'dark');
      if(c === 0){
        const rankLabel = document.createElement('span');
        rankLabel.className = 'cell-label rank-label';
        rankLabel.textContent = ranks[r];
        cell.appendChild(rankLabel);
      }
      if(r === 7){
        const fileLabel = document.createElement('span');
        fileLabel.className = 'cell-label file-label';
        fileLabel.textContent = files[c];
        cell.appendChild(fileLabel);
      }
      const piece = board[r][c];
      if(piece){
        const key = pieceKey(piece);
        if(PIECE_IMG[key]){
          const img = document.createElement('img');
          img.className = 'piece-img';
          img.src = PIECE_IMG[key];
          img.alt = key;
          cell.appendChild(img);
        }
      }
      grid.appendChild(cell);
    }
  }
}

function adjustBottomPadding(){
  const panel = document.getElementById('bottomPanel');
  const container = document.querySelector('.app-container');
  if(panel && container){
    container.style.paddingBottom = (panel.offsetHeight + 20) + 'px';
  }
}

function renderStep(){
  const step = LESSON_STEPS[currentStep];
  renderBoard(boardSnapshots[currentStep]);
  document.getElementById('moveLabel').textContent = (step.moveLabel && step.moveLabel[currentLang]) || '';
  document.getElementById('commentaryText').textContent = step[currentLang];
  document.getElementById('foxAvatar').src = FOX_BY_MOOD[step.fox] || FOX_BY_MOOD.normal;
  document.getElementById('lessonProgress').textContent = currentStep + ' / ' + (LESSON_STEPS.length - 1);
  document.getElementById('btnPrev').disabled = currentStep === 0;
  document.getElementById('btnNext').disabled = currentStep === LESSON_STEPS.length - 1;
  adjustBottomPadding();
}

function updateLanguageDisplay(lang){
  currentLang = lang;
  document.querySelectorAll('.lang-element-ja').forEach(el => el.style.display = lang === 'ja' ? 'block' : 'none');
  document.querySelectorAll('.lang-element-en').forEach(el => el.style.display = lang === 'en' ? 'block' : 'none');
  document.getElementById('langToggle').textContent = lang === 'ja' ? 'English' : '日本語';
  document.getElementById('btnPrev').textContent = BUTTON_TEXT[lang].prev;
  document.getElementById('btnNext').textContent = BUTTON_TEXT[lang].next;
  renderStep();
}

document.addEventListener('DOMContentLoaded', function(){
  buildSnapshots();

  const urlParams = new URLSearchParams(window.location.search);
  let lang = urlParams.get('lang') || window.location.hash.replace('#', '');
  if(!lang){
    const userLang = navigator.language || navigator.userLanguage;
    lang = userLang.startsWith('ja') ? 'ja' : 'en';
  }
  updateLanguageDisplay(lang);

  document.getElementById('langToggle').addEventListener('click', function(){
    updateLanguageDisplay(currentLang === 'ja' ? 'en' : 'ja');
  });
  document.getElementById('btnNext').addEventListener('click', function(){
    if(currentStep < LESSON_STEPS.length - 1){ currentStep++; renderStep(); }
  });
  document.getElementById('btnPrev').addEventListener('click', function(){
    if(currentStep > 0){ currentStep--; renderStep(); }
  });

  window.addEventListener('resize', adjustBottomPadding);
});
</script>

</body>
</html>