:root{color-scheme:light;--canvas:#262e29;--canvas-glow:#465549;--paper:#eee8d9;--paper-deep:#ded5c2;--sheet:#f7f2e7;--ink:#25332c;--muted:#6e776e;--faint:#958d7c;--line:#c9bfaa;--line-soft:#ddd5c5;--accent:#a64232;--accent-soft:#ddc5ad;--button:#273d34;--button-ink:#fbf6e9;--board-light:#e8dfc6;--board-dark:#708373;--board-frame:#283c33;--last-light:#dac97a;--last-dark:#a6a55c;--selected:#c2a23f;--selected-ring:#473d20;--danger:#bd6757;--piece-white:#fff9e8;--piece-white-stroke:#4e5d53;--piece-black:#263d34;--piece-black-stroke:#142820;--panel:#f5efe2;--status:#283d34;--status-ink:#fbf6e9;--focus:#d17935;--shadow:#11181259;--serif:Georgia,'Times New Roman',serif;--sans:Arial,Helvetica,sans-serif}
:root[data-theme=night]{color-scheme:dark;--canvas:#0f1112;--canvas-glow:#34302b;--paper:#232324;--paper-deep:#18191a;--sheet:#2a2928;--ink:#f1e4cd;--muted:#b2a998;--faint:#8b8173;--line:#514b43;--line-soft:#3d3934;--accent:#cf8b4c;--accent-soft:#66452f;--button:#c48a50;--button-ink:#191613;--board-light:#d0ad78;--board-dark:#5f493b;--board-frame:#141414;--last-light:#e0bf6a;--last-dark:#826c37;--selected:#dd914e;--selected-ring:#fff0d0;--danger:#a8493f;--piece-white:#fff0d4;--piece-white-stroke:#765f45;--piece-black:#171719;--piece-black-stroke:#d0a66f;--panel:#302e2b;--status:#171719;--status-ink:#f5e5ca;--focus:#f0aa58;--shadow:#000000a3}
:root[data-theme=modernist]{--canvas:#272724;--canvas-glow:#575347;--paper:#eee5ce;--paper-deep:#d9cfb4;--sheet:#f4ecd8;--ink:#171816;--muted:#656256;--faint:#8c806c;--line:#252622;--line-soft:#c8bda4;--accent:#a43d33;--accent-soft:#dbb5a3;--button:#171816;--button-ink:#f6edd8;--board-light:#e8d8b9;--board-dark:#a34b40;--board-frame:#191a18;--last-light:#d9b74c;--last-dark:#d07854;--selected:#edc64c;--selected-ring:#181815;--danger:#741f1b;--piece-white:#f9ecd0;--piece-white-stroke:#1d1e1b;--piece-black:#171815;--piece-black-stroke:#171815;--panel:#f3ead5;--status:#171816;--status-ink:#f6edd8;--focus:#a43d33;--shadow:#0b0b095e}
*{box-sizing:border-box}html{min-height:100%;background:var(--canvas)}body{margin:0;min-width:300px;min-height:100vh;background:radial-gradient(circle at 50% 14%,var(--canvas-glow),var(--canvas) 58%);color:var(--ink);font-family:var(--sans);transition:background .35s,color .35s}button{font:inherit;cursor:pointer;color:inherit}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:3px}[hidden]{display:none!important}.ambient-mark{position:fixed;right:-.08em;bottom:-.33em;color:#ffffff08;font-family:var(--serif);font-size:min(72vw,800px);line-height:1;pointer-events:none;user-select:none}.site-header{position:relative;z-index:2;max-width:1260px;height:84px;margin:auto;padding:0 34px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:#f1ecdf}.brand{justify-self:start;border:0;background:none;padding:0;text-align:left;color:inherit}.brand-kicker{display:block;font-size:8px;letter-spacing:2.2px;text-transform:uppercase;opacity:.58}.brand-title{display:block;margin-top:4px;font-family:var(--serif);font-size:22px;letter-spacing:.2px}.header-note{font-size:9px;letter-spacing:1.8px;text-transform:uppercase;opacity:.56}.text-button,.page-back{border:0;background:none;padding:8px 0}.site-header>.text-button{justify-self:end;color:inherit;font-size:11px;letter-spacing:.5px}.text-button span{margin-left:12px}.book-wrap{position:relative;z-index:1;width:min(1180px,calc(100% - 44px));margin:0 auto;padding:0 0 26px}.book{position:relative;min-height:700px;perspective:1800px}.book:before{content:'';position:absolute;z-index:-4;inset:12px 20px -9px;border-radius:4px 9px 12px 4px;background:var(--paper-deep);box-shadow:0 28px 65px var(--shadow)}.book-edge{position:absolute;z-index:-2;left:12px;right:4px;height:10px;border:1px solid #81786450;background:repeating-linear-gradient(0deg,var(--paper) 0,var(--paper) 1px,var(--paper-deep) 2px,var(--paper-deep) 3px);border-radius:0 0 5px 5px}.book-edge-one{bottom:-5px}.book-edge-two{bottom:-10px;left:22px;right:11px}.book-spine{position:absolute;z-index:3;top:0;bottom:0;left:50%;width:34px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#342d2210 32%,#120e091f 50%,#fff8e22e 59%,transparent);pointer-events:none}.book-page{position:relative;min-height:700px;overflow:hidden;border:1px solid #615a4a52;border-radius:4px 10px 10px 4px;background:linear-gradient(90deg,var(--paper) 0%,var(--sheet) 48%,var(--paper) 50%,var(--sheet) 53%,var(--paper) 100%);box-shadow:inset 0 0 80px #594d3510;padding:56px 66px 52px;transform-origin:left center}.book-page.page-enter-forward{animation:pageInForward .52s cubic-bezier(.2,.72,.25,1)}.book-page.page-enter-back{animation:pageInBack .48s cubic-bezier(.2,.72,.25,1)}@keyframes pageInForward{0%{opacity:.15;transform:rotateY(-8deg) translateX(22px);filter:brightness(.75)}100%{opacity:1;transform:none;filter:none}}@keyframes pageInBack{0%{opacity:.2;transform:rotateY(7deg) translateX(-18px);filter:brightness(.8)}100%{opacity:1;transform:none;filter:none}}.page-running{position:absolute;top:25px;left:66px;right:66px;display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:10px;color:var(--muted);font-family:var(--serif);font-size:10px;font-style:italic;letter-spacing:.5px}.page-back{margin:-8px 0;color:var(--muted);font-family:var(--sans);font-size:10px;font-style:normal;letter-spacing:1px;text-transform:uppercase}.folio{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:var(--faint);font-family:var(--serif);font-size:11px}.toc-layout,.chapter-grid{display:grid;grid-template-columns:1fr 1fr;min-height:590px}.toc-layout>div,.chapter-grid>div{min-width:0}.title-leaf{position:relative;display:flex;flex-direction:column;padding:48px 65px 12px 0;border-right:1px solid var(--line-soft)}.contents-leaf{padding:74px 0 20px 72px}.overline,.chapter-label{margin:0;color:var(--accent);font-size:9px;font-weight:700;letter-spacing:2.1px}.title-ornament{position:absolute;right:56px;top:84px;color:var(--accent);font-family:var(--serif);font-size:78px;line-height:1;opacity:.15;transform:rotate(-8deg)}h1,h2,p{margin-top:0}.title-leaf h1,.chapter-intro h1,.section-heading h1{margin:52px 0 26px;font-family:var(--serif);font-size:clamp(58px,7vw,94px);font-weight:400;line-height:.83;letter-spacing:-4px}.lead{max-width:370px;color:var(--muted);font-family:var(--serif);font-size:16px;line-height:1.65}.edition{margin:auto 0 0;padding-top:18px;border-top:1px solid var(--line);color:var(--faint);font-family:var(--serif);font-size:10px;font-style:italic;line-height:1.6}.contents-leaf h2{margin:23px 0 63px;font-family:var(--serif);font-size:42px;font-weight:400}.toc-list{display:grid}.toc-row{display:grid;grid-template-columns:28px auto 1fr 26px;gap:12px;align-items:baseline;width:100%;border:0;border-bottom:1px solid var(--line-soft);background:none;padding:17px 3px 15px;text-align:left}.toc-row:first-child{border-top:1px solid var(--line-soft)}.toc-number{color:var(--accent);font-size:10px;font-weight:bold}.toc-name{font-family:var(--serif);font-size:19px}.toc-dots{height:1px;border-bottom:1px dotted var(--faint)}.toc-folio{color:var(--muted);font-family:var(--serif);font-size:11px;text-align:right}.toc-row:hover .toc-name,.toc-row:focus-visible .toc-name{color:var(--accent);transform:translateX(5px)}.toc-name{transition:color .15s,transform .15s}.contents-leaf blockquote{margin:70px 0 0;padding:0 0 0 18px;border-left:2px solid var(--accent);color:var(--muted);font-family:var(--serif);font-size:13px;font-style:italic;line-height:1.7}.chapter-intro{position:relative;padding:72px 60px 20px 0;border-right:1px solid var(--line-soft)}.chapter-content{display:flex;flex-direction:column;justify-content:center;padding:50px 0 32px 72px}.chapter-intro h1{font-size:70px;margin-top:44px}.chapter-figure{position:absolute;right:35px;bottom:0;color:var(--accent);font-family:var(--serif);font-size:200px;line-height:.8;opacity:.09}.difficulty-list{display:grid;border-top:1px solid var(--line)}.difficulty-list>button{display:grid;grid-template-columns:36px 1fr 24px;gap:15px;align-items:center;border:0;border-bottom:1px solid var(--line);background:none;padding:22px 4px;text-align:left}.difficulty-index{color:var(--faint);font-family:var(--serif);font-size:11px}.difficulty-list strong{display:block;font-family:var(--serif);font-size:23px;font-weight:400}.difficulty-list small{display:block;margin-top:7px;color:var(--muted);font-size:10px;letter-spacing:.3px}.choice-mark{color:var(--faint);font-size:16px;text-align:center}.difficulty-list button[aria-pressed=true]{background:linear-gradient(90deg,transparent,var(--accent-soft) 130%)}.difficulty-list button[aria-pressed=true] .choice-mark,.difficulty-list button[aria-pressed=true] strong{color:var(--accent)}.primary-button,.secondary-button{border:1px solid transparent;border-radius:2px;padding:15px 19px;font-size:11px;font-weight:700;letter-spacing:.5px}.primary-button{background:var(--button);color:var(--button-ink)}.primary-button:hover{filter:brightness(1.11)}.secondary-button{border-color:var(--line);background:transparent;color:var(--ink)}.chapter-action{display:flex;justify-content:space-between;width:100%;margin-top:30px}.continue-action{display:flex;justify-content:space-between;width:100%;margin-top:10px;text-align:left}.continue-action>span:last-child{color:var(--muted);font-size:9px}.marginalia{margin:18px 0 0;color:var(--faint);font-family:var(--serif);font-size:10px;font-style:italic;text-align:center}.section-heading{position:relative;width:42%;padding:42px 50px 25px 0}.section-heading h1{margin:28px 0 20px;font-size:57px}.section-heading .lead{font-size:13px}.stats-chapters{position:absolute;top:95px;right:62px;bottom:62px;width:50%;display:grid;gap:9px;overflow:auto;padding-right:4px}.level-stats{border:1px solid var(--line);padding:15px 18px;background:#ffffff0e}.level-stats-heading{display:flex;justify-content:space-between;align-items:baseline}.level-stats-heading h3{margin:0;font-family:var(--serif);font-size:20px;font-weight:400}.level-stats-heading>span{color:var(--muted);font-size:9px}.level-stats dl{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:15px 0 0}.level-stats dl>div{display:flex;flex-direction:column-reverse;gap:5px}.level-stats dt{color:var(--muted);font-size:8px}.level-stats dd{margin:0;font-family:var(--serif);font-size:22px}#stats-legacy{position:absolute;left:66px;bottom:65px;width:38%;font-size:10px}.compact-heading{width:42%}.theme-list{position:absolute;top:92px;right:62px;bottom:58px;width:51%;display:grid;align-content:center;gap:10px}.theme-card{display:grid;grid-template-columns:74px 1fr 20px;gap:17px;align-items:center;width:100%;min-height:126px;border:1px solid var(--line);background:#ffffff10;padding:13px;text-align:left}.theme-card[aria-checked=true]{border-color:var(--accent);box-shadow:inset 3px 0 var(--accent)}.theme-swatch{position:relative;display:grid;place-items:center;width:74px;height:94px;overflow:hidden;border:1px solid #0004;font-family:var(--serif);font-size:38px}.theme-swatch i{position:absolute;inset:0 50% 0 0}.theme-swatch b{z-index:1;font-weight:400}.swatch-classic{background:#eee8d9;color:#263b32}.swatch-classic i{background:#708373}.swatch-night{background:#232324;color:#cf8b4c}.swatch-night i{background:#5f493b}.swatch-modernist{background:#eee5ce;color:#171816}.swatch-modernist i{background:#a43d33}.theme-copy>*{display:block}.theme-copy small{color:var(--accent);font-size:8px;font-style:normal;letter-spacing:1.5px}.theme-copy strong{margin:8px 0 7px;font-family:var(--serif);font-size:17px;font-weight:400}.theme-copy em{color:var(--muted);font-size:10px;line-height:1.45}.theme-check{color:var(--accent);font-size:15px}.game-page{padding-top:69px}.game-layout{display:grid;grid-template-columns:minmax(0,570px) minmax(250px,330px);gap:58px;align-items:start;justify-content:center}.player{display:flex;align-items:center;gap:11px;padding:0 1px 12px}.player:last-child{padding:12px 1px 0}.avatar{display:grid;place-items:center;width:35px;height:35px;border:1px solid var(--line);background:var(--panel);font-size:25px}.dark-avatar{border-color:var(--status);background:var(--status);color:var(--status-ink)}.player strong{font-family:var(--serif);font-size:13px;font-weight:400}.player small{display:block;margin-top:3px;color:var(--muted);font-size:9px}.player-side{margin-left:auto;color:var(--muted);font-size:8px;letter-spacing:1.5px}.turn-dot{width:7px;height:7px;border-radius:50%;background:var(--line)}.turn-dot.active{background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}.board-frame{border:8px solid var(--board-frame);border-radius:2px;box-shadow:0 14px 26px #0002;overflow:hidden}.board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;touch-action:manipulation}.square{position:relative;display:grid;place-items:center;min-width:0;aspect-ratio:1;border:0;border-radius:0;background:var(--board-light);padding:0}.square.dark{background:var(--board-dark)}.square.last{background:var(--last-light)}.square.dark.last{background:var(--last-dark)}.square.selected{background:var(--selected);box-shadow:inset 0 0 0 3px var(--selected-ring)}.square.check{background:var(--danger)}.square svg{z-index:1;width:80%;height:80%;pointer-events:none;filter:drop-shadow(0 2px 1px #0004)}.piece-white{fill:var(--piece-white);stroke:var(--piece-white-stroke)}.piece-black{fill:var(--piece-black);stroke:var(--piece-black-stroke)}.square.legal:after{content:'';position:absolute;z-index:2;width:24%;height:24%;border-radius:50%;background:#18231d66;pointer-events:none}.square.capture:after{width:84%;height:84%;border:4px solid #18231d70;background:none}.coordinate{position:absolute;color:#4c5a50;font-size:8px;font-weight:bold;pointer-events:none}.dark .coordinate{color:#f3ead9}.rank{top:3px;left:3px}.file{right:4px;bottom:3px}aside{display:grid;gap:13px}.panel{border:1px solid var(--line);background:var(--panel);padding:19px}.status-panel{border-color:var(--status);background:var(--status);color:var(--status-ink)}.status-panel .chapter-label{color:var(--accent)}.status-panel h2{margin:13px 0 8px;font-family:var(--serif);font-size:28px;font-weight:400}.status-panel>p:not(.chapter-label){min-height:38px;margin:0;color:color-mix(in srgb,var(--status-ink) 70%,transparent);font-size:10px;line-height:1.55}.status-footer{display:flex;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid #ffffff22;font-size:8px;letter-spacing:.5px;opacity:.67}.actions-panel .primary-button{width:100%}.section-title{display:flex;justify-content:space-between;align-items:center;gap:8px}.section-title h2{margin:0;font-family:var(--serif);font-size:16px;font-weight:400}.section-title>span{color:var(--muted);font-size:7px;letter-spacing:1px}.history-head,.history-row{display:grid;grid-template-columns:30px 1fr 1fr;padding:7px 5px;font-size:10px}.history-head{margin-top:11px;border-bottom:1px solid var(--line);color:var(--muted);font-size:8px}.history{height:105px;overflow-y:auto;scrollbar-width:thin}.history-row:nth-child(even){background:#00000008}.history-row span:first-child{color:var(--muted)}.empty-history{margin:22px 8px;color:var(--faint);font-family:var(--serif);font-size:10px;font-style:italic;text-align:center}footer{display:flex;justify-content:space-between;padding:22px 6px 0;color:#f1ecdf80;font-family:var(--serif);font-size:9px;font-style:italic;letter-spacing:.3px}dialog{max-width:480px;width:calc(100% - 30px);max-height:calc(100dvh - 30px);overflow:auto;border:1px solid var(--line);border-radius:3px;background:var(--paper);color:var(--ink);padding:29px;box-shadow:0 25px 90px #0008}dialog::backdrop{background:#101511b8;backdrop-filter:blur(3px)}dialog h2{margin:12px 0 14px;font-family:var(--serif);font-size:29px;font-weight:400}dialog p:not(.chapter-label){color:var(--muted);font-family:var(--serif);font-size:13px;line-height:1.65}.promotion-options{display:flex;gap:7px;margin:18px 0}.promotion-options button{width:25%;border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:7px 3px;font-size:9px}.promotion-options svg{display:block;width:100%}.dialog-actions{display:flex;gap:8px;margin-top:22px}.dialog-actions>*{flex:1}dialog>.primary-button{width:100%}
@media(max-width:900px){.book-page{padding-left:42px;padding-right:42px}.page-running{left:42px;right:42px}.title-leaf{padding-right:38px}.contents-leaf,.chapter-content{padding-left:44px}.title-leaf h1{font-size:72px}.chapter-intro h1{font-size:56px}.stats-chapters,.theme-list{right:40px}.game-layout{grid-template-columns:minmax(0,1fr) 250px;gap:28px}.book-spine{width:22px}}
@media(max-width:680px){.site-header{height:66px;padding:0 18px;grid-template-columns:1fr auto}.header-note{display:none}.brand-title{font-size:19px}.book-wrap{width:calc(100% - 20px);padding-bottom:18px}.book{min-height:0}.book:before{inset:7px 8px -7px}.book-spine{display:none}.book-page{min-height:calc(100dvh - 112px);border-radius:3px 7px 7px 3px;background:linear-gradient(90deg,var(--sheet),var(--paper));padding:50px 24px 42px}.page-running{top:19px;left:24px;right:24px}.toc-layout,.chapter-grid{display:block;min-height:0}.title-leaf{padding:28px 0 25px;border:0}.title-leaf .lead,.title-leaf .edition{display:none}.title-ornament{right:8px;top:35px;font-size:60px}.title-leaf h1{margin:25px 0 0;font-size:54px;line-height:.86}.contents-leaf{padding:22px 0 0;border-top:1px solid var(--line)}.contents-leaf h2{margin:13px 0 23px;font-size:30px}.toc-row{grid-template-columns:22px auto 1fr 22px;gap:8px;padding:15px 2px}.toc-name{font-size:16px}.contents-leaf blockquote{margin:30px 0 0;font-size:11px}.chapter-intro{padding:38px 0 20px;border:0}.chapter-intro h1,.section-heading h1{margin:20px 0 16px;font-size:42px;letter-spacing:-2px;line-height:.92}.chapter-intro .lead{font-size:13px}.chapter-figure{display:none}.chapter-content{padding:15px 0 0}.difficulty-list>button{padding:15px 3px}.difficulty-list strong{font-size:18px}.difficulty-list small{margin-top:4px}.chapter-action{margin-top:20px}.section-heading,.compact-heading{width:auto;padding:34px 0 14px}.section-heading .lead{font-size:12px}.stats-chapters,.theme-list{position:static;width:auto;max-height:none;overflow:visible;display:grid;padding:0}.level-stats{padding:12px}.level-stats-heading h3{font-size:17px}.level-stats dl{margin-top:11px}.level-stats dd{font-size:19px}.theme-card{grid-template-columns:58px 1fr 16px;min-height:100px;padding:9px;gap:12px}.theme-swatch{width:58px;height:76px;font-size:31px}.theme-copy strong{font-size:14px}.theme-copy em{font-size:9px}.game-page{padding-top:56px}.game-layout{grid-template-columns:1fr;gap:20px}.game-page .page-running span{display:none}.board-frame{border-width:5px}.player-side{display:none}.player small{font-size:8px}aside{grid-template-columns:1fr}.status-panel>p:not(.chapter-label){min-height:0}.history{height:100px}.folio{bottom:13px}footer{padding:17px 3px 0;gap:12px;font-size:8px}.ambient-mark{display:none}}
@media(max-width:350px){.book-wrap{width:calc(100% - 12px)}.book-page{padding-left:18px;padding-right:18px}.page-running{left:18px;right:18px}.title-leaf h1{font-size:47px}.contents-leaf blockquote{display:none}.difficulty-list>button{grid-template-columns:27px 1fr 18px}.theme-card{grid-template-columns:46px 1fr 14px}.theme-swatch{width:46px;height:65px}.theme-copy em{display:none}.game-page{padding-left:12px;padding-right:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Page-state refinements. */
:root{--status-accent:#e7d29f}:root[data-theme=night]{--status-accent:#e4ad71}:root[data-theme=modernist]{--status-accent:#e5c675}
.theme-card[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 3px 0 var(--accent)}
.status-panel .chapter-label{color:var(--status-accent)}
@keyframes pageInForward{0%{opacity:.08;transform:rotateY(-42deg) translateX(36px);filter:brightness(.62)}100%{opacity:1;transform:none;filter:none}}
@keyframes pageInBack{0%{opacity:.1;transform:rotateY(38deg) translateX(-30px);filter:brightness(.68)}100%{opacity:1;transform:none;filter:none}}
#stats-legacy:not([hidden]){bottom:112px;max-height:160px;overflow:auto}
@media(max-width:680px){#stats-legacy:not([hidden]){position:static;width:auto;max-height:none;margin-top:12px}}
html,body{overflow-x:hidden;overflow-x:clip}

/* Every desktop chapter is a true two-page spread around the fixed center fold. */
.folio{left:auto;right:66px;transform:none}
@media(min-width:681px){
  .section-heading,.compact-heading{width:calc(50% - 34px);padding-right:42px}
  .stats-results,.theme-list{position:absolute;top:92px;right:66px;bottom:58px;left:calc(50% + 24px);width:auto;overflow:auto}
  .stats-results .stats-chapters{position:static;width:auto;display:grid;gap:9px;overflow:visible;padding:0}
  .stats-results #stats-legacy:not([hidden]){position:static;width:auto;max-height:none;margin-top:9px;overflow:visible}
  .theme-list{display:grid;align-content:center;gap:10px;overflow:visible}
  .game-layout{grid-template-columns:minmax(0,calc(50% - 24px)) minmax(0,calc(50% - 24px));gap:48px;align-items:start;justify-content:stretch}
  .play-area,aside{min-width:0;width:100%}
}
@media(min-width:681px) and (max-width:900px){
  .folio{right:42px}
  .stats-results,.theme-list{right:42px;left:calc(50% + 22px)}
  .game-layout{grid-template-columns:minmax(0,calc(50% - 20px)) minmax(0,calc(50% - 20px));gap:40px}
}
@media(max-width:680px){.folio{right:24px}.stats-results{position:static;width:auto}}

.level-stats-hard{padding-bottom:13px}.hard-leaderboard{margin-top:13px;padding-top:11px;border-top:1px solid var(--line-soft)}.hard-score{display:flex;align-items:baseline;justify-content:space-between}.hard-score span,.leaderboard-status,.leaderboard-rank{color:var(--muted);font-size:9px}.hard-score strong{color:var(--accent);font-family:var(--serif);font-size:22px}.leaderboard-status{margin:8px 0 5px;line-height:1.4}.leaderboard-auth{border:0;border-bottom:1px solid currentColor;background:none;padding:2px 0;margin:0 0 6px;color:var(--accent);font-size:9px}.leaderboard-auth:disabled{opacity:.5}.leaderboard-list{display:grid;gap:3px;margin:0;padding:0;list-style:none}.leaderboard-list li{display:flex;justify-content:space-between;gap:12px;padding:3px 5px;background:#00000008;font-size:9px}.leaderboard-list span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaderboard-list strong{font-family:var(--serif);font-weight:400}.leaderboard-rank{margin:6px 0 0;color:var(--accent)}
@media(max-width:350px){.folio{right:18px}}

/* A single inert leaf turns around the center crease; the live spread never moves. */
.book-page.page-enter-forward,.book-page.page-enter-back{animation:none!important}
.page-turn-viewport{position:absolute;z-index:8;inset:0;overflow:hidden;clip-path:inset(0 round 4px 10px 10px 4px);perspective:1800px;perspective-origin:center;pointer-events:none}
.page-turn-canvas{position:absolute;z-index:2;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.page-still-canvas{z-index:1}
.book-page.page-turn-hold{position:absolute;z-index:7;inset:0;width:100%;height:var(--turn-old-height);min-height:0;pointer-events:none;user-select:none}
.book-page.page-turn-hold-left{clip-path:inset(0 50% 0 0)}
.book-page.page-turn-hold-right{clip-path:inset(0 0 0 50%)}
.page-turn-leaf{position:absolute;top:0;bottom:0;width:50%;pointer-events:none;transform-style:preserve-3d;will-change:transform;filter:drop-shadow(0 8px 10px #0002)}
.page-turn-leaf.page-turn-forward{left:50%;transform-origin:left center;animation:turnRightToLeft .72s cubic-bezier(.36,.02,.22,1)}
.page-turn-leaf.page-turn-back{left:0;transform-origin:right center;animation:turnLeftToRight .72s cubic-bezier(.36,.02,.22,1)}
.turn-face{position:absolute;inset:0;display:block;overflow:hidden;border:1px solid #756c5852;background:linear-gradient(90deg,var(--sheet),var(--paper) 88%);backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:inset 0 0 70px #51452f14}
.turn-face:before{content:'ТИХИЙ ХОД';position:absolute;top:25px;right:40px;left:40px;padding-bottom:10px;border-bottom:1px solid var(--line);color:var(--faint);font-family:var(--serif);font-size:9px;font-style:italic;letter-spacing:.8px;text-align:right}
.turn-face:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 4px,#6d604906 5px);mix-blend-mode:multiply}
.turn-back{transform:rotateY(180deg);background:linear-gradient(90deg,var(--paper-deep),var(--sheet) 18%,var(--paper) 100%);box-shadow:inset 22px 0 46px #3b312423}
.page-turn-forward .turn-front{border-radius:0 9px 9px 0;box-shadow:inset 14px 0 30px #3b312414}
.page-turn-forward .turn-back{border-radius:9px 0 0 9px}
.page-turn-back .turn-front{border-radius:9px 0 0 9px;background:linear-gradient(90deg,var(--paper),var(--sheet));box-shadow:inset -14px 0 30px #3b312414}
.page-turn-back .turn-back{border-radius:0 9px 9px 0;background:linear-gradient(90deg,var(--paper),var(--sheet) 82%,var(--paper-deep));box-shadow:inset -22px 0 46px #3b312423}
@keyframes turnRightToLeft{0%{transform:rotateY(0);filter:drop-shadow(-2px 7px 7px #0002)}38%{filter:drop-shadow(-22px 12px 18px #0007)}52%{transform:rotateY(-96deg);filter:drop-shadow(-32px 14px 24px #0008)}76%{filter:drop-shadow(-15px 10px 16px #0005)}100%{transform:rotateY(-180deg);filter:drop-shadow(0 6px 7px transparent)}}
@keyframes turnLeftToRight{0%{transform:rotateY(0);filter:drop-shadow(2px 7px 7px #0002)}38%{filter:drop-shadow(22px 12px 18px #0007)}52%{transform:rotateY(96deg);filter:drop-shadow(32px 14px 24px #0008)}76%{filter:drop-shadow(15px 10px 16px #0005)}100%{transform:rotateY(180deg);filter:drop-shadow(0 6px 7px transparent)}}

/* Theme-aware notation scrollbars. */
:root{--history-track:#d9d0bd;--history-thumb:#657d6e;--history-thumb-hover:#415c4d}
:root[data-theme=night]{--history-track:#171719;--history-thumb:#b47b48;--history-thumb-hover:#d39a5d}
:root[data-theme=modernist]{--history-track:#d6cab0;--history-thumb:#963d34;--history-thumb-hover:#6f2721}
#history,.stats-results{scrollbar-width:thin;scrollbar-color:var(--history-thumb) var(--history-track)}
#history::-webkit-scrollbar,.stats-results::-webkit-scrollbar{width:9px;height:9px}
#history::-webkit-scrollbar-track,.stats-results::-webkit-scrollbar-track{background:var(--history-track);border-radius:20px}
#history::-webkit-scrollbar-thumb,.stats-results::-webkit-scrollbar-thumb{min-height:28px;border:2px solid var(--history-track);border-radius:20px;background:var(--history-thumb)}
#history::-webkit-scrollbar-thumb:hover,.stats-results::-webkit-scrollbar-thumb:hover{background:var(--history-thumb-hover)}

@media(max-width:680px){
  .page-turn-leaf{left:0!important;width:100%}
  .page-turn-leaf.page-turn-forward{transform-origin:left center}
  .page-turn-leaf.page-turn-back{transform-origin:right center}
  .turn-face:before{right:24px;left:24px}
}

/* The free edge bows while the leaf travels, with a moving highlight and contact shadow. */
.page-turn-leaf.page-turn-forward{animation:turnRightToLeft 1.02s cubic-bezier(.42,0,.16,1) both}
.page-turn-leaf.page-turn-back{animation:turnLeftToRight 1.02s cubic-bezier(.42,0,.16,1) both}
.page-turn-forward .turn-face{animation:bowFreeEdgeRight 1.02s ease-in-out both}
.page-turn-back .turn-face{animation:bowFreeEdgeLeft 1.02s ease-in-out both}
.curl-contour,.curl-glint{position:absolute;z-index:2;top:-2%;bottom:-2%;display:block;pointer-events:none;transform-style:preserve-3d}
.curl-contour{width:22%;opacity:0}
.curl-glint{width:5%;opacity:0;filter:blur(.5px)}
.page-turn-forward .curl-contour{right:0;transform-origin:right center;background:linear-gradient(90deg,transparent,#5a4b342b 38%,#fff9df9c 72%,#4b3e2b42);animation:curlBandForward 1.02s ease-in-out both}
.page-turn-forward .curl-glint{right:1%;background:linear-gradient(90deg,transparent,#fffbe6d9,transparent);animation:curlGlintForward 1.02s ease-in-out both}
.page-turn-back .curl-contour{left:0;transform-origin:left center;background:linear-gradient(90deg,#4b3e2b42,#fff9df9c 28%,#5a4b342b 62%,transparent);animation:curlBandBack 1.02s ease-in-out both}
.page-turn-back .curl-glint{left:1%;background:linear-gradient(90deg,transparent,#fffbe6d9,transparent);animation:curlGlintBack 1.02s ease-in-out both}
@keyframes turnRightToLeft{from{transform:rotateY(0)}to{transform:rotateY(-180deg)}}
@keyframes turnLeftToRight{from{transform:rotateY(0)}to{transform:rotateY(180deg)}}
@keyframes bowFreeEdgeRight{
  0%,100%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:brightness(1)}
  28%,72%{clip-path:polygon(0 0,97% .6%,100% 50%,97% 99.4%,0 100%);filter:brightness(.96)}
  50%{clip-path:polygon(0 0,91% 2.2%,100% 50%,91% 97.8%,0 100%);filter:brightness(.89)}
}
@keyframes bowFreeEdgeLeft{
  0%,100%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:brightness(1)}
  28%,72%{clip-path:polygon(3% .6%,100% 0,100% 100%,3% 99.4%,0 50%);filter:brightness(.96)}
  50%{clip-path:polygon(9% 2.2%,100% 0,100% 100%,9% 97.8%,0 50%);filter:brightness(.89)}
}
@keyframes curlBandForward{
  0%,100%{opacity:0;transform:translateX(0) rotateY(0) scaleX(.4)}
  25%,75%{opacity:.48;transform:translateX(-2%) rotateY(-18deg) scaleX(.9)}
  50%{opacity:1;transform:translateX(-7%) translateZ(14px) rotateY(-48deg) scaleX(1.45)}
}
@keyframes curlBandBack{
  0%,100%{opacity:0;transform:translateX(0) rotateY(0) scaleX(.4)}
  25%,75%{opacity:.48;transform:translateX(2%) rotateY(18deg) scaleX(.9)}
  50%{opacity:1;transform:translateX(7%) translateZ(14px) rotateY(48deg) scaleX(1.45)}
}
@keyframes curlGlintForward{0%,100%{opacity:0;transform:translateX(0) scaleX(.5)}35%,65%{opacity:.5}50%{opacity:.92;transform:translateX(-18px) translateZ(18px) scaleX(2.4)}}
@keyframes curlGlintBack{0%,100%{opacity:0;transform:translateX(0) scaleX(.5)}35%,65%{opacity:.5}50%{opacity:.92;transform:translateX(18px) translateZ(18px) scaleX(2.4)}}

/* Sixteen connected ribbons form one continuous bowed sheet from the fold to its free edge. */
.page-turn-leaf.page-turn-forward{animation-duration:1.08s}
.page-turn-leaf.page-turn-back{animation-duration:1.08s}
.turn-surface{position:absolute;inset:0;display:block;transform-style:preserve-3d}
.turn-strip{--fl:1;--bl:1;position:absolute;top:0;bottom:0;left:calc(var(--i) * 6.25%);width:calc(6.25% + 2px);margin:0;transform-style:preserve-3d;transform-origin:center center;will-change:transform,filter}
.turn-strip>b{position:absolute;inset:0;display:block;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background-color:var(--sheet);background-image:linear-gradient(90deg,var(--sheet),var(--paper));background-size:1600% 100%;background-position:calc(var(--i) * 6.6667%) 0;box-shadow:inset 0 1px #fff3,inset 0 -1px #4f432b12}
.turn-strip>b:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 4px,#6d604907 5px);mix-blend-mode:multiply}
.turn-strip>b+ b{transform:rotateY(180deg) translateZ(.2px);background-color:var(--paper);background-image:linear-gradient(90deg,var(--paper-deep),var(--sheet));box-shadow:inset 0 0 22px #40352212}
.page-turn-forward .turn-strip{animation:sheetBendForward 1.08s ease-in-out both}
.page-turn-back .turn-strip{animation:sheetBendBack 1.08s ease-in-out both}
.turn-strip:nth-child(1){--fl:1.02;--bl:1.13}.turn-strip:nth-child(2){--fl:1.01;--bl:1.07}.turn-strip:nth-child(3){--fl:1;--bl:1.01}.turn-strip:nth-child(4){--fl:.99;--bl:.96}
.turn-strip:nth-child(5){--fl:.98;--bl:.92}.turn-strip:nth-child(6){--fl:.96;--bl:.9}.turn-strip:nth-child(7){--fl:.94;--bl:.89}.turn-strip:nth-child(8){--fl:.92;--bl:.9}
.turn-strip:nth-child(9){--fl:.9;--bl:.92}.turn-strip:nth-child(10){--fl:.89;--bl:.94}.turn-strip:nth-child(11){--fl:.9;--bl:.96}.turn-strip:nth-child(12){--fl:.92;--bl:.98}
.turn-strip:nth-child(13){--fl:.96;--bl:.99}.turn-strip:nth-child(14){--fl:1.01;--bl:1}.turn-strip:nth-child(15){--fl:1.07;--bl:1.01}.turn-strip:nth-child(16){--fl:1.13;--bl:1.02}
@keyframes sheetBendForward{
  0%,100%{transform:translateX(0) translateZ(0) rotateY(0);filter:brightness(1)}
  50%{transform:translateX(var(--fx)) translateZ(var(--fz)) rotateY(var(--fr));filter:brightness(var(--fl))}
}
@keyframes sheetBendBack{
  0%,100%{transform:translateX(0) translateZ(0) rotateY(0);filter:brightness(1)}
  50%{transform:translateX(var(--bx)) translateZ(var(--bz)) rotateY(var(--br));filter:brightness(var(--bl))}
}
.page-turn-leaf.page-turn-forward,.page-turn-leaf.page-turn-back{animation-duration:1.2s}

/* One physical trim size for every chapter; long mobile matter scrolls inside. */
.book{height:716px;min-height:716px}
.book-page{height:100%;min-height:0}
@media(max-width:680px){
  .book{height:clamp(560px,calc(100dvh - 112px),760px);min-height:0}
  .book-page{height:100%;min-height:0;overflow:hidden}
  #main-menu,#play-menu,#stats-page,#appearance-page,#game-screen{display:flex;flex-direction:column}
  .toc-layout,.chapter-grid,.game-layout{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;align-content:start;padding-right:3px;padding-bottom:28px}
  .section-heading{flex:0 0 auto}
  .stats-results,.theme-list{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding-right:3px;padding-bottom:28px;align-content:start}
  .toc-layout,.chapter-grid,.game-layout,.stats-results,.theme-list{scrollbar-width:thin;scrollbar-color:var(--history-thumb) var(--history-track)}
  .toc-layout::-webkit-scrollbar,.chapter-grid::-webkit-scrollbar,.game-layout::-webkit-scrollbar,.stats-results::-webkit-scrollbar,.theme-list::-webkit-scrollbar{width:7px;height:7px}
  .toc-layout::-webkit-scrollbar-track,.chapter-grid::-webkit-scrollbar-track,.game-layout::-webkit-scrollbar-track,.stats-results::-webkit-scrollbar-track,.theme-list::-webkit-scrollbar-track{background:var(--history-track);border-radius:20px}
  .toc-layout::-webkit-scrollbar-thumb,.chapter-grid::-webkit-scrollbar-thumb,.game-layout::-webkit-scrollbar-thumb,.stats-results::-webkit-scrollbar-thumb,.theme-list::-webkit-scrollbar-thumb{min-height:28px;border:2px solid var(--history-track);border-radius:20px;background:var(--history-thumb)}
}

/* Keep the physical crease above the canvas turn. It is one composited layer,
   so its highlight remains continuous even on the animation's first/last frame. */
:root{--spine-shadow:#120e091f;--spine-glint:#fff8e22e;--spine-shadow-color:#120e09;--spine-glint-color:#fff8e2}
:root[data-theme=night]{--spine-shadow:#05040480;--spine-glint:#ffdca952;--spine-shadow-color:#050404;--spine-glint-color:#ffdca9}
.book-spine{z-index:9;transform:translateX(-50%) translateZ(0);background:linear-gradient(90deg,transparent,#342d2210 32%,var(--spine-shadow) 50%,var(--spine-glint) 59%,transparent)}
.book-spine:after{content:'';position:absolute;top:0;bottom:0;left:calc(50% + 2px);width:1.5px;background:color-mix(in srgb,var(--spine-glint-color) 46%,transparent);box-shadow:0 0 4px color-mix(in srgb,var(--spine-glint-color) 18%,transparent)}

/* Captured material has its own compact, readable ledger on the right page. */
.player-info{min-width:0;margin-right:auto}
.captured-symbols{display:block;min-width:0;overflow:hidden;color:var(--ink);font-family:Georgia,'Times New Roman',serif;font-size:21px;font-weight:700;line-height:1;letter-spacing:0;white-space:nowrap;text-overflow:clip}
.player-side{margin-left:0}
@media(max-width:350px){.player{gap:7px}.avatar{width:31px;height:31px;font-size:22px}.player-info small{max-width:66px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}

/* Filled black chess glyphs need a light ink treatment on the charcoal panel. */
:root[data-theme=night] .captured-black{color:#f0c998;text-shadow:0 1px 0 #090807,0 0 2px #090807,0 0 7px #d58c4559}
@media(min-width:901px){.game-layout{grid-template-columns:minmax(0,550px) minmax(250px,330px)}}
@media(min-width:681px){.game-layout aside{gap:9px}.game-layout aside .panel{padding:14px 16px}.game-layout .status-panel h2{margin:9px 0 6px;font-size:25px}.game-layout .status-panel>p:not(.chapter-label){min-height:30px}.game-layout .status-footer{margin-top:9px;padding-top:8px}.game-layout .actions-panel .marginalia{margin-top:10px}.game-layout .history{height:86px}.game-layout .history-head{margin-top:8px}}
@media(max-width:680px){.game-page .game-layout{padding-bottom:48px;scroll-padding-bottom:48px}.game-layout aside{padding-bottom:8px}}

/* Night edition is deliberately matte: retain the crease shadow, remove light glints. */
:root[data-theme=night] .book-spine{background:linear-gradient(90deg,transparent,var(--spine-shadow) 50%,transparent)}
:root[data-theme=night] .book-spine:after{display:none}

.captures-summary{padding:13px 16px}
.captures-summary-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:9px}
.captures-summary-list>div{min-width:0;border-left:2px solid var(--accent);padding-left:8px}
.captures-summary-label{display:block;color:var(--muted);font-size:11px;font-weight:700;line-height:1.2}
.captures-summary .captured-symbols{display:block;min-height:23px;margin-top:4px;overflow:hidden;font-size:22px;font-weight:700;line-height:1;white-space:nowrap}
.captures-summary .captured-symbols:not(.has-captures){color:var(--muted);font-family:var(--sans);font-size:11px;line-height:23px;text-shadow:none}
:root[data-theme=night] .captures-summary .captured-black{color:#f0c998;text-shadow:0 1px 0 #090807,0 0 2px #090807,0 0 7px #d58c4559}
:root[data-theme=night] .captures-summary .captured-white{color:#fff7e7;text-shadow:0 1px 1px #090807}
@media(min-width:681px){.game-layout .captures-summary{padding:11px 14px}.game-layout .captures-summary-list{margin-top:7px}.game-layout .captures-summary .captured-symbols{min-height:21px;font-size:22px}.game-layout .captures-summary .captured-symbols:not(.has-captures){font-size:11px;line-height:21px}}

/* The game uses the two physical leaves as hard layout columns. */
@media(min-width:901px){.game-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;justify-content:stretch}}
@media(min-width:681px) and (max-width:900px){.game-layout{grid-template-columns:minmax(0,calc(50% - 14px)) minmax(0,calc(50% - 14px));gap:28px;justify-content:stretch}}
@media(min-width:681px){.game-layout>.play-area,.game-layout>aside,.game-layout .board-frame{min-width:0;width:100%;max-width:100%}}
@media(min-width:681px) and (max-width:900px){.play-area .player-side{display:none}.play-area .player{gap:8px}.play-area .player-info{min-width:0;overflow:hidden}.play-area .player-info strong,.play-area .player-info small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.play-area .turn-dot{flex:none}}

/* Every fallback animation layer is matte in the night edition too. */
:root[data-theme=night] .curl-glint{display:none}
:root[data-theme=night] .page-turn-forward .curl-contour{background:linear-gradient(90deg,transparent,#08070670 55%,#030303a8)}
:root[data-theme=night] .page-turn-back .curl-contour{background:linear-gradient(90deg,#030303a8,#08070670 45%,transparent)}
:root[data-theme=night] .turn-face{border-color:#080706;background:linear-gradient(90deg,var(--sheet),var(--paper));box-shadow:inset 0 0 70px #00000038}
:root[data-theme=night] .turn-back,:root[data-theme=night] .page-turn-back .turn-front,:root[data-theme=night] .page-turn-back .turn-back{box-shadow:inset 22px 0 46px #00000052}
:root[data-theme=night] .turn-strip>b{box-shadow:inset 0 1px #0004,inset 0 -1px #0008}

/* Turning leaves use shadow-only curvature in every edition. */
.curl-glint{display:none}
.page-turn-forward .curl-contour{background:linear-gradient(90deg,transparent,#211b1436 58%,#0b09075c)}
.page-turn-back .curl-contour{background:linear-gradient(90deg,#0b09075c,#211b1436 42%,transparent)}

.theme-card:disabled{cursor:not-allowed;filter:saturate(.45);opacity:.72}
.theme-card:disabled .theme-swatch{filter:grayscale(.35)}
.theme-progress{margin-top:8px;color:var(--accent);font-family:var(--sans);font-size:8px;font-style:normal;font-weight:700;letter-spacing:.35px;line-height:1.35;text-transform:uppercase}
.theme-card:disabled .theme-progress{color:var(--muted)}
@media(max-width:680px){.theme-progress{margin-top:5px;font-size:7px}.theme-card{min-height:112px}}

/* A compact marginal note keeps the latest named chess event beneath the move list. */
.move-comment{display:grid;gap:4px;margin-top:10px;padding:9px 10px 8px;border-top:1px solid var(--line);border-left:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--panel))}
.move-comment-label{color:var(--accent);font-size:8px;font-weight:700;letter-spacing:1.2px}
.move-comment strong{font-family:var(--serif);font-size:15px;font-weight:400;line-height:1.15}
.move-comment p{margin:0;color:var(--muted);font-size:10px;line-height:1.4}
@media(min-width:681px){.game-layout .history-panel.has-comment .history-head{margin-top:5px}.game-layout .history-panel.has-comment .move-comment{margin-top:7px;padding-top:7px;padding-bottom:6px}}
@media(min-width:681px) and (max-height:760px){.game-layout aside .status-panel{padding-top:10px;padding-bottom:10px}}

/* The move ledger takes the full space left by the removed in-game restart button. */
@media(min-width:681px){.game-layout>aside{height:100%;min-height:0;align-self:stretch;grid-template-rows:auto auto minmax(0,1fr)}.game-layout .history-panel{display:flex;min-height:0;flex-direction:column;overflow:hidden}.game-layout .history{flex:1 1 auto;height:auto;min-height:96px}}
@media(max-width:680px){.game-layout .history{height:220px}}
.header-actions{justify-self:end;display:flex;align-items:center;gap:18px}.header-actions .text-button{color:inherit;font-size:11px;letter-spacing:.5px}.language-toggle{min-width:28px;font-weight:700;letter-spacing:1px!important}
@media(max-width:680px){.header-actions{gap:14px}}

/* When a browser cannot paint SVG foreignObject snapshots, turn real page
   clones instead of showing the decorative but empty paper faces. */
.page-turn-dom .turn-content{position:absolute;inset:0;display:block;overflow:visible;pointer-events:none}
.page-turn-leaf.page-turn-dom{filter:none!important;transform-style:preserve-3d}
.page-turn-dom .turn-face{overflow:visible;border:0;background:none;box-shadow:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;animation:none!important}
.page-turn-dom .turn-band{position:absolute;z-index:1;overflow:hidden;pointer-events:none}
.page-turn-dom .turn-band-sheet{position:absolute;overflow:hidden;transform-origin:0 0;animation:domSheetBow 1.02s cubic-bezier(.42,0,.16,1) both}
.page-turn-dom .turn-band-sheet>.book-page{position:absolute!important;min-height:0!important;max-height:none!important;overflow:hidden;box-shadow:none;transform:none!important;animation:none!important}
.page-turn-dom .turn-face::before,.page-turn-dom .turn-face::after{display:none}

/* Real page content follows the curved sheet in the DOM fallback too. */
.page-turn-viewport{overflow:visible;clip-path:none;perspective:2600px}
.page-turn-dom .curl-contour,.page-turn-dom .curl-glint{display:none}
@keyframes domSheetBow{
  0%,100%{transform:none}
  30%,70%{transform:translateX(var(--bow-shift-soft)) skewX(var(--bow-angle-soft))}
  50%{transform:translateX(var(--bow-shift)) skewX(var(--bow-angle))}
}

/* Publication shell: the browser viewport never gains a system scrollbar. */
html,body{height:100%;overflow:hidden}
body{display:grid;grid-template-rows:auto minmax(0,1fr)}
.site-header{width:min(1260px,100%)}
.book{user-select:none;-webkit-user-select:none}
.book-wrap{height:100%;min-height:0;overflow:hidden;padding-bottom:0}
@media(min-width:681px){.book-wrap{display:flex;flex-direction:column}.book{flex:0 1 716px;height:716px;min-height:0}.book-page{height:100%;min-height:0}.book-wrap>footer{flex:0 0 42px;height:42px;padding-top:14px}.toc-layout,.chapter-grid,.game-layout{height:100%;min-height:0;max-height:100%;overflow-y:auto;scrollbar-width:none}.toc-layout::-webkit-scrollbar,.chapter-grid::-webkit-scrollbar,.game-layout::-webkit-scrollbar{display:none}}
@media(max-width:680px){.book-wrap{height:100%}.book{height:calc(100% - 38px);min-height:0}.book-wrap>footer{height:38px;padding-top:12px}}
@media(min-width:681px) and (max-height:760px){.site-header{height:64px}.brand-title,.header-note{white-space:nowrap}.book-page{padding-top:48px;padding-bottom:42px}.title-leaf{padding-top:24px}.title-leaf h1{margin-top:28px;margin-bottom:18px;font-size:76px}.title-leaf .lead{font-size:14px;line-height:1.45}.edition{padding-top:10px}.contents-leaf{padding-top:34px;padding-bottom:10px}.contents-leaf h2{margin:12px 0 25px;font-size:36px}.toc-row{padding-top:12px;padding-bottom:11px}.contents-leaf blockquote{margin-top:25px;font-size:11px}.chapter-intro{padding-top:42px}.chapter-content{padding-top:28px;padding-bottom:18px}.theme-list{top:74px;bottom:40px}.stats-chapters{top:76px;bottom:42px}.game-page{padding-top:58px}.game-layout{height:100%}.game-layout .player{padding-bottom:8px}.game-layout .player:last-child{padding-top:8px}}
@media(min-width:901px) and (max-height:760px){.game-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.game-layout>.play-area{width:395px;max-width:395px}}

/* Fit every desktop spread to the physical book trim.  Width alone is not a
   sufficient constraint on short laptop/browser windows: the square board
   and the chapter controls used to keep their comfortable desktop height and
   made the otherwise fixed book internally scroll. */
@media(min-width:681px){
  .toc-layout,.chapter-grid,.game-layout{overflow:hidden}
  .game-layout>.play-area{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;min-height:0;align-self:stretch}
  .game-layout .board-frame{align-self:center;justify-self:center;width:min(100%,calc(100dvh - 300px));max-height:100%;aspect-ratio:1}
  .game-layout .board{width:100%;height:100%;aspect-ratio:1}
  .game-layout>aside{overflow:hidden}
  .game-layout .history{min-height:0}
}
@media(min-width:681px) and (max-height:760px){
  .chapter-intro{padding-top:24px;padding-bottom:10px}
  .chapter-intro h1{margin-top:24px;margin-bottom:14px;font-size:50px;line-height:.88}
  .chapter-intro .lead{font-size:12px;line-height:1.45}
  .chapter-content{padding-top:14px;padding-bottom:8px}
  .difficulty-list>button{padding-top:12px;padding-bottom:12px}
  .difficulty-list strong{font-size:19px}
  .difficulty-list small{margin-top:3px}
  .chapter-action{margin-top:16px;padding-top:12px;padding-bottom:12px}
  .continue-action{padding-top:11px;padding-bottom:11px}
  .marginalia{margin-top:10px}
  .game-layout{gap:28px}
  .game-layout>.play-area{width:100%;max-width:none}
  .game-layout .player{gap:8px;padding-bottom:5px}
  .game-layout .player:last-child{padding-top:5px}
  .game-layout .avatar{width:30px;height:30px;font-size:21px}
  .game-layout aside{gap:6px}
  .game-layout aside .panel{padding:9px 12px}
  .game-layout .captures-summary-list{gap:6px;margin-top:5px}
  .game-layout .captures-summary .captured-symbols{min-height:17px;margin-top:2px;font-size:18px;line-height:17px}
  .game-layout .captures-summary .captured-symbols:not(.has-captures){font-size:9px;line-height:17px}
  .game-layout .status-panel h2{margin:5px 0 3px;font-size:21px}
  .game-layout .status-panel>p:not(.chapter-label){min-height:0;font-size:9px;line-height:1.35}
  .game-layout .status-footer{margin-top:5px;padding-top:5px}
  .game-layout .history-head{margin-top:5px;padding-top:4px;padding-bottom:4px}
  .game-layout .history-row{padding-top:4px;padding-bottom:4px}
  .game-layout .empty-history{margin-top:10px;margin-bottom:10px}
}
@media(min-width:681px) and (max-height:620px){
  .site-header{height:52px}
  .brand-kicker,.header-note{display:none}
  .brand-title{margin-top:0;font-size:18px}
  .book-wrap>footer{flex-basis:30px;height:30px;padding-top:8px}
  .book-page{padding-top:43px;padding-bottom:30px}
  .page-running{top:17px;padding-bottom:7px}
  .folio{bottom:10px}
  .chapter-intro h1{font-size:43px}
  .difficulty-list>button{padding-top:9px;padding-bottom:9px}
  .difficulty-list small{display:none}
  .chapter-action{margin-top:11px}
  .marginalia{margin-top:6px}
  .game-page{padding-top:45px}
  .game-layout .board-frame{width:min(100%,calc(100dvh - 274px))}
}

/* On a phone the board, two players and the three right-page ledgers cannot
   retain their desktop dimensions in a single fixed leaf.  Present the
   ledgers as compact summaries and give the remaining height to the board;
   nothing important is hidden behind an inner page scroll. */
@media(max-width:680px){
  .chapter-grid,.game-layout{overflow:hidden;padding-right:0;padding-bottom:0}

  .chapter-intro{padding-top:22px;padding-bottom:8px}
  .chapter-intro h1{margin-top:12px;margin-bottom:8px;font-size:36px;line-height:.88}
  .chapter-intro .lead{margin-bottom:0;font-size:11px;line-height:1.35}
  .chapter-content{padding-top:7px}
  .difficulty-list>button{grid-template-columns:28px 1fr 18px;gap:9px;padding:9px 2px}
  .difficulty-list strong{font-size:16px}
  .difficulty-list small{margin-top:2px;font-size:8px}
  .chapter-action{margin-top:10px;padding-top:11px;padding-bottom:11px}
  .continue-action{margin-top:6px;padding-top:9px;padding-bottom:9px}
  .marginalia{margin-top:6px;font-size:8px}

  .game-page{padding-top:48px;padding-bottom:25px}
  .game-page .page-running{top:16px;padding-bottom:7px}
  .game-page .folio{bottom:8px}
  .game-page .game-layout{display:grid;grid-template-rows:minmax(0,auto) minmax(0,1fr);gap:5px;height:100%;min-height:0;align-content:stretch;scroll-padding-bottom:0}
  .game-layout>.play-area{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0}
  .game-layout .player{min-height:0;gap:6px;padding:0 1px 3px}
  .game-layout .player:last-child{padding:3px 1px 0}
  .game-layout .avatar{width:26px;height:26px;font-size:18px}
  .game-layout .player strong{font-size:11px}
  .game-layout .player small{margin-top:1px;font-size:7px}
  .game-layout .turn-dot{width:6px;height:6px}
  .game-layout .board-frame{align-self:center;justify-self:center;width:min(100%,calc(100dvh - 400px));min-width:152px;max-height:100%;aspect-ratio:1;border-width:4px}
  .game-layout .board{width:100%;height:100%;aspect-ratio:1}

  .game-layout aside{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto minmax(0,1fr);gap:3px;min-height:0;overflow:hidden;padding-bottom:0}
  .game-layout aside .panel{min-height:0;padding:4px 7px}
  .game-layout .section-title h2{font-size:12px}
  .game-layout .section-title>span{font-size:6px}
  .game-layout .captures-summary-list{grid-template-columns:1fr 1fr;gap:5px;margin-top:2px}
  .game-layout .captures-summary-list>div{display:flex;align-items:baseline;gap:4px;padding-left:5px}
  .game-layout .captures-summary-label{flex:none;font-size:8px}
  .game-layout .captures-summary .captured-symbols{min-height:0;margin-top:0;font-size:14px;line-height:1}
  .game-layout .captures-summary .captured-symbols:not(.has-captures){font-size:8px;line-height:1}
  .game-layout .status-panel .chapter-label,.game-layout .status-footer{display:none}
  .game-layout .status-panel h2{display:inline;margin:0 7px 0 0;font-size:17px;line-height:1.15}
  .game-layout .status-panel>p:not(.chapter-label){display:inline;min-height:0;margin:0;font-size:8px;line-height:1.25}
  .game-layout .history-panel{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:7px;overflow:hidden}
  .game-layout .history-panel .section-title{display:block}
  .game-layout .history-panel .section-title>span,.game-layout .history-head,.game-layout .move-comment{display:none}
  .game-layout .history{display:flex;align-items:center;height:20px;min-height:0;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none}
  .game-layout .history::-webkit-scrollbar{display:none}
  .game-layout .history-row{display:inline-grid;flex:none;grid-template-columns:20px auto auto;gap:5px;padding:2px 5px;font-size:8px}
  .game-layout .empty-history{margin:0;font-size:8px;white-space:nowrap}
}
@media(max-width:350px){
  .chapter-intro .lead{display:none}
  .difficulty-list small{display:none}
  .game-page{padding-left:10px;padding-right:10px}
  .game-layout .board-frame{width:min(100%,calc(100dvh - 400px));min-width:144px}
  .game-layout .captures-summary-label{font-size:7px}
}
/* Turning paper may extend beyond the book trim without creating page scroll. */
.book-wrap{overflow:visible}
/* The moving sheet receives one continuous shade in Canvas. Do not bake
   browser-specific CSS shadows into its source bitmap as well. */
.book-page.canvas-snapshot,.book-page.canvas-snapshot *,
.book-page.canvas-snapshot::before,.book-page.canvas-snapshot::after,
.book-page.canvas-snapshot *::before,.book-page.canvas-snapshot *::after{
  box-shadow:none!important;text-shadow:none!important;filter:none!important;
  -webkit-filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important
}

/* Size the chessboard from the actual space between the player labels.
   A viewport-height estimate can be larger than that grid row inside a
   Yandex Games iframe, leaving the bottom rank clipped by the board frame. */
@media(min-width:681px){
  .game-layout>.play-area{container-type:size}
  .game-layout .board-frame{width:min(100%,calc(100cqh - 100px));max-height:none}
}

/* Landscape phones still show a spread, but need far less chrome around the
   board. Keep the page-turn mode desktop-like while giving the board usable
   touch targets and keeping the ledgers on the opposite leaf. */
@media(orientation:landscape) and (max-height:500px) and (max-width:1000px) and (min-width:681px){
  .site-header{height:30px;padding:0 12px}
  .brand-kicker,.header-note{display:none}
  .brand-title{margin-top:0;font-size:15px}
  .site-header>.text-button{font-size:9px;padding:3px 0}
  .book-wrap{width:calc(100% - 12px)}
  .book-wrap>footer{display:none}
  .book{flex:1 1 auto;height:calc(100% - 7px)}
  .book-page{padding:35px 24px 15px}
  .page-running{top:11px;left:24px;right:24px;padding-bottom:6px;font-size:9px}
  .folio{bottom:6px;right:24px;font-size:9px}
  .toc-layout,.chapter-grid,.game-layout{height:100%}
  .title-leaf{padding:8px 17px 3px 0}
  .title-leaf h1{margin:18px 0 8px;font-size:48px}
  .title-leaf .lead{font-size:11px;line-height:1.3}
  .edition{padding-top:5px}
  .contents-leaf{padding:12px 0 0 22px}
  .contents-leaf h2{margin:4px 0 13px;font-size:26px}
  .toc-row{padding:9px 2px;gap:6px}
  .toc-name{font-size:15px}
  .contents-leaf blockquote{margin-top:12px;font-size:10px}
  .chapter-intro{padding:16px 18px 4px 0}
  .chapter-intro h1{margin:14px 0 9px;font-size:41px}
  .chapter-intro .lead{font-size:11px;line-height:1.3}
  .chapter-content{padding:4px 0 2px 22px}
  .difficulty-list>button{padding:7px 2px}
  .difficulty-list strong{font-size:16px}
  .difficulty-list small{display:none}
  .chapter-action{margin-top:9px;padding:8px 11px}
  .continue-action{margin-top:5px;padding:6px 11px}
  .marginalia{margin-top:5px;font-size:8px}
  .section-heading{padding-top:9px}
  .section-heading h1{margin:10px 0;font-size:36px}
  .section-heading .lead{font-size:10px;line-height:1.35}
  .stats-chapters,.theme-list{top:40px;right:22px;bottom:18px;width:48%;overflow:auto;align-content:start}
  .level-stats{padding:7px 9px}
  .level-stats dl{margin-top:6px}
  .theme-card{min-height:76px;padding:5px;gap:8px;grid-template-columns:40px 1fr 14px}
  .theme-swatch{width:40px;height:58px;font-size:25px}
  .theme-copy strong{margin:3px 0;font-size:13px}
  .theme-copy em{font-size:8px}
  .game-page{padding-top:34px;padding-bottom:13px}
  .game-layout{gap:20px}
  .game-layout .player{gap:5px;padding:0 1px 2px}
  .game-layout .player:last-child{padding:2px 1px 0}
  .game-layout .avatar{width:22px;height:22px;font-size:16px}
  .game-layout .player strong{font-size:10px}
  .game-layout .player small{margin-top:1px;font-size:7px}
  .game-layout .player-side{display:none}
  .game-layout .board-frame{width:min(100%,calc(100cqh - 60px));border-width:4px}
  .game-layout aside{gap:4px}
  .game-layout aside .panel{padding:5px 8px}
  .game-layout .captures-summary .captured-symbols{min-height:14px;font-size:15px;line-height:14px}
  .game-layout .captures-summary .captured-symbols:not(.has-captures){font-size:8px;line-height:14px}
  .game-layout .status-panel h2{margin:3px 0;font-size:17px}
  .game-layout .status-panel>p:not(.chapter-label){font-size:8px;line-height:1.2}
  .game-layout .status-footer{margin-top:3px;padding-top:3px}
  .game-layout .history-head{margin-top:3px;padding:3px 5px}
}

/* In a portrait Yandex Games iframe, 100dvh includes none of the space the
   portal takes away around the game. Give the compact ledgers only their
   natural height, then fit the square board into the remaining leaf. */
@media(max-width:680px){
  .game-page .game-layout{grid-template-rows:minmax(0,1fr) auto;padding-bottom:0}
  .game-layout>.play-area{height:100%;container-type:size}
  .game-layout .board-frame{width:min(100%,max(0px,calc(100cqh - 64px)));min-width:0;max-height:none}
  .game-layout aside{grid-template-rows:auto auto auto;align-content:start}
}
@media(max-width:680px) and (max-height:650px){
  .site-header{height:44px}
  .brand-kicker{display:none}
  .brand-title{margin-top:0;font-size:17px}
  .book-wrap>footer{display:none}
  .book{height:100%}
  .book-page{padding-top:42px;padding-bottom:14px}
  .page-running{top:12px;padding-bottom:6px}
  .game-page{padding-top:34px;padding-bottom:18px}
  .game-page .page-running{top:11px}
  .game-page .folio{bottom:3px}
  .game-layout .player{padding-bottom:1px}
  .game-layout .player:last-child{padding-top:1px}
  .game-layout .avatar{width:21px;height:21px;font-size:15px}
  .game-layout .player small{display:none}
  .game-layout .board-frame{width:min(100%,max(0px,calc(100cqh - 48px)))}
  .game-layout aside .panel{padding:2px 6px}
}

/* Anchor the grid to the frame's inner box. WebKit can resolve a percentage
   height against the aspect-ratio border box, clipping the last rank. */
.game-layout .board-frame{position:relative}
.game-layout .board{position:absolute;inset:0;width:auto;height:auto;aspect-ratio:auto;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr))}
.game-layout .square{min-height:0;aspect-ratio:auto}
.book.page-preparing{pointer-events:none;cursor:progress}

/* Landscape portal banners can leave only 250 CSS pixels for the game.
   Spend that height on the board and move record, not duplicated labels. */
@media(min-width:681px) and (max-width:1000px) and (max-height:340px){
  .site-header{height:24px}
  .book-page,.game-page{padding-top:26px;padding-bottom:14px}
  .page-running,.game-page .page-running{top:6px;padding-bottom:4px}
  .folio{bottom:3px}
  .game-layout>.play-area{grid-template-rows:minmax(0,1fr)}
  .game-layout .player{display:none}
  .game-layout .board-frame{width:min(100%,100cqh);border-width:3px}
  .game-layout aside{gap:3px}
  .game-layout aside .panel{padding:3px 6px}
  .game-layout .section-title h2{font-size:13px}
  .game-layout .section-title>span{font-size:6px}
  .game-layout .captures-summary-list{margin-top:2px;gap:5px}
  .game-layout .captures-summary-list>div{display:flex;align-items:baseline;gap:4px}
  .game-layout .captures-summary-label{font-size:8px}
  .game-layout .captures-summary .captured-symbols{min-height:0;margin:0;font-size:14px;line-height:1}
  .game-layout .captures-summary .captured-symbols:not(.has-captures){font-size:8px;line-height:1}
  .game-layout .status-panel .chapter-label,.game-layout .status-footer,.game-layout .history-head{display:none}
  .game-layout .status-panel h2{display:inline;margin:0 6px 0 0;font-size:14px}
  .game-layout .status-panel>p:not(.chapter-label){display:inline;margin:0;min-height:0;font-size:8px}
  .game-layout .history-row{padding:3px 6px;font-size:10px}
  .game-layout .empty-history{margin:4px 0;font-size:9px}
  .chapter-intro{padding-top:4px}
  .chapter-intro h1{margin:8px 0;font-size:28px}
  .chapter-intro .lead{font-size:10px}
  .difficulty-list>button{padding:5px 2px}
  .chapter-action{margin-top:5px;padding:6px 10px}
  .continue-action{margin-top:3px;padding:5px 10px}
  .marginalia{display:none}
}