:root{--paper:#f5f0e6;--ink:#2b2420;--red:#8b1e1e;--blue:#2f5d8a;--pink:#c0567a}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
header{text-align:center;padding:18px 10px 4px}
h1{font-weight:300;font-size:clamp(2.4rem,6vw,4rem);margin:0;letter-spacing:.04em}
.sub,.subtitle{font-style:italic;margin:.2em 0;font-size:1.2rem}
nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px}
nav button,.controls button,#moves button{font-family:"Special Elite","Courier New",monospace;background:#fffaf0;border:1.5px solid var(--ink);
border-radius:3px 6px 4px 7px;padding:6px 12px;cursor:pointer;box-shadow:2px 2px 0 rgba(43,36,32,.35);font-size:.95rem;color:var(--ink)}
nav button.on{background:var(--ink);color:var(--paper)}
main{max-width:1100px;margin:auto;padding:0 10px}
.cap{font-family:"Special Elite","Courier New",monospace;text-align:center;color:var(--red);margin-top:10px}
h2{font-weight:300;font-size:clamp(2rem,5vw,3.2rem);text-align:center;margin:.1em 0 0}
.subtitle{text-align:center}
.controls{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin:8px 0;font-family:"Special Elite",monospace}
.stage{background:rgba(255,252,244,.6);border:1px solid rgba(43,36,32,.2);border-radius:6px;overflow:hidden}
svg{width:100%;height:auto;display:block}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0 30px}
.box{background:#fffaf0;border:1.5px solid var(--ink);padding:8px 12px;border-radius:4px;box-shadow:4px 4px 0 rgba(43,36,32,.15)}
.box h3{margin:0 0 6px;font-style:italic;font-weight:400}
#moves{display:flex;flex-wrap:wrap;gap:6px}
#moves button{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:1.05rem;border-color:var(--red);color:var(--red)}
#log{margin:0;padding-left:22px;max-height:160px;overflow:auto;font-family:"Special Elite",monospace;font-size:.85rem}
.lbl{font-style:italic;font-size:19px;fill:var(--ink);cursor:default}
.lbl.en{fill:var(--red);cursor:pointer;font-weight:700}
.lbl.en:hover{text-decoration:underline}
.arrow{fill:none;stroke:#3a2a26;stroke-width:1.6}
.arrow.en{stroke:var(--red);stroke-width:2.4}
.arrow.path{stroke:#d01818;stroke-width:4}
.card .face{fill:#fffaf0;stroke:var(--ink);stroke-width:1.8}
.card.cur .face{fill:#fff3c4;stroke:#b07a00;stroke-width:3}
.card.cur{filter:drop-shadow(0 0 10px #f2c14e)}
.card text{font-family:"Special Elite","Courier New",monospace;font-size:17px;text-anchor:middle;fill:var(--ink)}
.card .no{font-size:11px;fill:#8a7d70}
.region{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-dasharray:7 5}
.stamp{font-family:"Special Elite",monospace;fill:none;stroke:#c41e1e;stroke-width:3}
footer{text-align:center;font-style:italic;padding:10px 0 24px}
@media(max-width:700px){.row{grid-template-columns:1fr}.lbl{font-size:24px}.card text{font-size:20px}}