/* Four workspaces. Keep the existing AI art, give interactions a quieter frame. */
:root{--board-pane:clamp(360px,calc(100vh - 350px),740px)}
@supports(height:100dvh){:root{--board-pane:clamp(360px,calc(100dvh - 350px),740px)}}
.shell{max-width:1480px;padding:0 32px}header{position:sticky;top:0;z-index:40;height:68px;min-height:68px;gap:22px;background:linear-gradient(#100c16f5,#100c16f5),url('assets/ai-secondary.webp') center/140% 200%;backdrop-filter:blur(14px);border-bottom-color:#96748755}header:after{display:none}.brand{font-size:22px;letter-spacing:1px;white-space:nowrap}.brand-icon{font-size:25px}.header-right{margin-left:auto;font-size:0;gap:0}.header-right>.led{display:none}.header-right button{min-width:84px;padding:11px 14px;font-size:12px;margin:0}.app-nav{display:flex;align-items:center;gap:7px;margin:auto}.app-nav button{min-width:78px;min-height:42px;padding:10px 19px;border:1px solid #775d7666;border-radius:4px;background:linear-gradient(#1c1b29ef,#1c1b29ef),url('assets/ai-secondary.webp') center/150% 190%;box-shadow:none;font:15px 'Microsoft YaHei',sans-serif;color:#d6c7d6;letter-spacing:1px;cursor:pointer;white-space:nowrap}.app-nav button[aria-current=page]{background:linear-gradient(#6e304ef0,#6e304ef0),url('assets/ai-button.webp') center/150% 190%;border-color:#d9a7c5;color:#fff0f7;box-shadow:inset 0 -2px 0 #efbdcf}.app-nav button:hover:not(:disabled){border-color:#edc5dc;filter:brightness(1.12)}.app-nav button:disabled{opacity:.43;cursor:default}.app-nav .review-ready{outline:none}
.intro{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;min-height:60px;padding:13px 0;gap:20px;overflow:visible}.intro:before,.intro:after,.intro>.eyebrow,.intro>.edition-mark{display:none}.intro h1{font-size:29px;line-height:1.25;letter-spacing:2px;margin:0;white-space:nowrap}.intro #play-guide{font-size:13px;line-height:1.7;letter-spacing:0;max-width:none;margin:0;color:#d8c7d5;text-shadow:none}.intro #new{min-height:42px;min-width:122px;width:auto;margin:0;padding:11px 17px;border:1px solid #e8aac6;border-radius:4px;background:linear-gradient(#8f3159ef,#8f3159ef),url('assets/ai-button.webp') center/145% 190%;box-shadow:0 3px 0 #321124;color:#fff1f7;font-size:15px;letter-spacing:1px;text-shadow:0 1px 2px #4b1431;cursor:pointer}.intro #new:hover{filter:brightness(1.16)}
.game-layout{width:min(100%,calc(var(--board-pane) + 334px));margin:0 auto;grid-template-columns:minmax(0,1fr) 310px;align-items:start;gap:24px}.arena{width:100%;max-width:none;min-width:0;margin:0}.arena .player{height:44px;padding:0 5px;gap:10px}.player .avatar{width:31px;height:33px;font-size:18px}.player strong{font-size:14px;line-height:1.4}.player small{font-size:9px;margin-top:2px;letter-spacing:.7px}.player-state{font-size:12px}.player-state.current{font-size:11px;padding:8px 12px}.battle-strip{display:none}.last-action{font-size:12px;line-height:1.6;padding:7px 10px;min-height:34px;margin:0 0 4px;text-align:center}.board-frame{padding:9px}#board{touch-action:manipulation}#board .square:disabled{opacity:1;cursor:wait}#board .square:disabled:hover{filter:none;box-shadow:none}#board .square:disabled:hover .unit-art{transform:none}#board .square:focus-visible{outline:3px solid #fff0bd;outline-offset:-3px;z-index:3}
.board-quick-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:8px}.board-quick-actions button{min-width:0;min-height:42px;padding:10px 6px;border:1px solid #8b738b;border-radius:4px;background:linear-gradient(#1a2433f0,#1a2433f0),url('assets/ai-secondary.webp') center/145% 190%;color:#f3e5ef;font:13px 'Microsoft YaHei',sans-serif;box-shadow:0 2px 0 #070b12;cursor:pointer}.board-quick-actions button:hover:not(:disabled){border-color:#e8bdd8;filter:brightness(1.14)}.board-quick-actions button:disabled{opacity:.4;cursor:default}.board-quick-actions button[aria-pressed=true]{background:linear-gradient(#68412ff0,#68412ff0),url('assets/ai-secondary.webp') center/145% 190%;border-color:#edc28f}
.captured-row{min-height:25px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:3px 5px;color:#bcafbf;font-size:10px}.captured-row>div{display:flex;align-items:center;gap:3px;min-width:0;flex:1;flex-wrap:wrap}.captured-item{display:flex;align-items:center;gap:1px;height:21px;position:relative}.captured-item .unit-art{width:17px;height:21px;object-fit:contain;image-rendering:pixelated}.captured-item .unit-badge{display:none}.captured-item small{font-size:10px;color:#eee1ed}.game-aside{display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - 145px);overflow:auto;padding:3px;scrollbar-width:thin;scrollbar-color:#88627c #15111d}.game-aside .panel{margin:0;padding:19px!important;border-radius:5px}.game-aside .panel-label{font-size:12px;padding-bottom:11px;min-height:0}.game-aside .status-panel h2{font-size:29px;margin:15px 0 9px;line-height:1.3}.game-aside .status-panel p{font-size:13px;line-height:1.8;min-height:0}.game-aside .turn-track{display:none}.autosave-status{font-size:11px!important;line-height:1.8!important;margin:13px 0 0!important;color:#b9c9b9!important;border-top:1px solid #7f697d33;padding-top:10px;text-align:center}.autosave-status[data-state=error]{color:#ffd0a8!important}.game-aside #result-open{display:block;width:100%;margin-top:14px;font-size:14px;border:1px solid #bd92ad;background:linear-gradient(#38233bf0,#38233bf0),url('assets/ai-secondary.webp') center/150% 190%;border-radius:4px;color:#ffe8f3;padding:11px;min-height:44px}.game-aside #history{max-height:160px;margin-top:9px}.game-aside .move-row{font-size:14px;padding:8px 4px}.game-aside .empty{font-size:13px;line-height:1.9;padding:14px 0}.game-aside .empty small{font-size:11px;letter-spacing:0}.game-aside .save-actions{gap:9px;margin-top:13px}.game-aside .save-actions button{font-size:12px;padding:10px 6px;min-height:40px}.game-aside .tip{display:none}
.review-section,.library-section,.settings-section{margin:21px 0 0;scroll-margin-top:82px;padding:26px;border:1px solid #88718666;border-radius:5px;background:linear-gradient(#11121cef,#11121cef),url('assets/ai-panel.webp') center/160% 160%;box-shadow:0 10px 35px #0004}.review-heading h2{font-size:29px;line-height:1.4}.review-heading .eyebrow{font-size:11px}.review-heading>button,.settings-section button{background:linear-gradient(#1c2633ef,#1c2633ef),url('assets/ai-secondary.webp') center/145% 190%;border:1px solid #927b93;border-radius:4px;min-height:42px;padding:11px 16px;color:#f1e0ef;font-size:13px;cursor:pointer}.ux-disclosure{padding:13px 0;border-top:1px solid #8e748744;color:#d9c5d5}.ux-disclosure>summary{cursor:pointer;font-size:14px;line-height:1.8;color:#edcfdf;padding:3px 4px;list-style-position:inside}.ux-disclosure>summary:hover{color:#fff0f7}.ux-disclosure>summary:focus-visible{outline:2px solid #ffe1af;outline-offset:3px}.ux-disclosure .coach-settings{border:0;margin-top:10px;padding-top:10px}.ux-disclosure .review-caveat{margin:10px 4px}.review-comments .ux-disclosure{margin-bottom:15px}.review-comments>h3{margin-top:18px}.review-section #review-progress{font-size:15px;line-height:1.8}.review-topline{padding-top:15px;margin-top:12px}.review-training{margin-bottom:13px}.review-layout{gap:22px;margin-top:20px;grid-template-columns:200px minmax(0,1fr)}#review-list{max-height:720px}.review-detail{grid-template-columns:minmax(270px,.95fr) minmax(260px,1fr);gap:24px}.review-comments{min-width:0}.review-source{font-size:11px}.coach-chart{margin-top:16px}.coach-keypoints{margin-top:18px}.library-layout{grid-template-columns:minmax(260px,.9fr) minmax(300px,1.2fr)}.library-empty-detail{padding:40px 28px;border:1px dashed #8c6c8866;border-radius:5px;line-height:1.9;color:#d6c0d4;background:#131c2877}.library-empty-detail strong{font:700 25px/1.6 'KaiTi','SimSun',serif;color:#f1d7e3}.library-empty-detail p{font-size:14px;margin:15px 0 0}.library-layout:has(#library-detail:not([hidden])) .library-empty-detail{display:none}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:22px}.settings-grid .settings-card{margin:0;padding:25px;border:1px solid #7c5c7666;border-radius:4px;background:linear-gradient(#171522f3,#171522f3),url('assets/ai-panel.webp') center/160% 160%!important;box-shadow:none}.settings-card .panel-label{font-size:15px;line-height:1.6;justify-content:flex-start;color:#f5d8e8;border-bottom:1px solid #85687944;padding-bottom:14px}.settings-card label:not(.toggle){display:block;font-size:15px;color:#e5cddd;margin:19px 0 10px}.settings-card select{appearance:auto;background:#101a28!important;border:1px solid #9b8199;border-radius:4px;color:#f7e9f2;font:15px 'Microsoft YaHei',sans-serif;padding:13px 15px;box-shadow:none}.settings-card .toggle{justify-content:flex-start;font-size:15px;color:#ecdcea;gap:12px;margin-top:20px;padding-top:15px;border-color:#74546c33}.settings-card .toggle span{display:none}.settings-card .toggle input{flex-shrink:0}.settings-note{font-size:13px;line-height:1.95;color:#ccb8cc;margin:17px 0 0}.settings-card .engine-status{font-size:15px!important;line-height:1.9!important;color:#f3dba9!important;text-align:left;margin:18px 0 0}.settings-card button{margin-top:18px;font-size:14px}
details.unit-codex{margin-top:24px;padding:12px 18px;background:linear-gradient(#15111cec,#15111cec),url('assets/ai-panel.webp') center/160% 160%!important;border:1px solid #6c4c6455;box-shadow:none}.unit-codex>.panel-label{display:none}.unit-codex>summary{font-size:13px;padding:3px;color:#cbb5c7}.unit-codex[open]>summary{padding-bottom:14px}.unit-codex[open] #unit-list{border-top:1px solid #6c4c6455}.unit-codex .unit-card span{font-size:15px}.unit-codex .unit-card small{font-size:9px}footer{margin-top:13px;font-size:10px;padding:16px 0;color:#a98da2}
dialog.ux-dialog{width:min(460px,calc(100vw - 30px));max-height:88vh;overflow:auto;padding:28px!important;border:1px solid #d5a4c1;border-radius:5px;background:linear-gradient(#181320fa,#181320fa),url('assets/ai-panel.webp') center/160% 160%!important;color:#f4e6f1;box-shadow:0 20px 80px #000a}dialog.ux-dialog::backdrop{background:#08050cdb;backdrop-filter:blur(5px)}.ux-dialog h2{font:700 30px/1.4 'KaiTi','SimSun',serif;color:#ffe1e9;margin:13px 0}.ux-dialog p,.ux-dialog li{font-size:14px;line-height:1.9;color:#d9c5d6}.ux-dialog label{display:block;font-size:14px;margin:20px 0 10px}.ux-dialog select{appearance:auto;padding:12px 13px;border:1px solid #9a8198;border-radius:4px;background:#131c2a;color:#fff0f8;font-size:15px;box-shadow:none}.ux-dialog button{padding:12px 16px;min-height:45px;border:1px solid #a58aa1;border-radius:4px;background:linear-gradient(#1a2534ef,#1a2534ef),url('assets/ai-secondary.webp') center/150% 190%;color:#f9e9f3;font-size:14px;cursor:pointer}.ux-dialog-actions{display:flex;gap:11px;margin-top:25px}.ux-dialog-actions button{flex:1}.ux-dialog-actions .primary{margin:0;background:linear-gradient(#893154ef,#893154ef),url('assets/ai-button.webp') center/150% 190%;border-color:#e8abc4;box-shadow:none}.ux-dialog ol{padding-left:22px}.ux-dialog li{margin-bottom:10px}.ux-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:120;max-width:min(560px,calc(100vw - 32px));padding:13px 20px;border:1px solid #caa4bb;border-radius:5px;background:#181824f5;box-shadow:0 7px 30px #0009;color:#fff0ec;font-size:14px;line-height:1.8;text-align:center;pointer-events:none}
body.focus-mode .game-aside,body.focus-mode .intro #play-guide,body.focus-mode .unit-codex,body.focus-mode footer,body.focus-mode .captured-row{display:none}body.focus-mode .game-layout{width:min(100%,clamp(380px,calc(100vh - 300px),850px));grid-template-columns:1fr}body.focus-mode .intro{min-height:48px;padding:9px 0;grid-template-columns:1fr auto}body.focus-mode .board-frame{padding:8px}
@media(max-width:1150px){.review-detail{grid-template-columns:1fr}.review-position-panel{max-width:540px}.game-layout{gap:20px;width:min(100%,calc(var(--board-pane) + 310px));grid-template-columns:minmax(0,1fr) 290px}.shell{padding-inline:24px}.app-nav button{min-width:66px;padding:10px 14px}.brand{font-size:20px}.game-aside .panel{padding:17px!important}.intro #play-guide{font-size:12px}}
@media(max-width:960px){.shell{padding-inline:20px}header{gap:14px}.game-layout{width:100%;max-width:740px;grid-template-columns:1fr;gap:18px}.arena{max-width:650px;margin:auto}.game-aside{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-height:none;overflow:visible;padding:0}.game-aside .status-panel{grid-column:1}.game-aside .history-panel{grid-column:2}.game-aside #history{max-height:180px}.game-aside .status-panel p{font-size:14px}.intro{padding:15px 0;gap:14px}.intro #play-guide{font-size:12px}.intro h1{font-size:27px}.settings-grid{gap:15px}.review-section,.library-section,.settings-section{padding:23px 20px}.brand{font-size:19px;letter-spacing:.5px}.app-nav{gap:5px}.app-nav button{min-width:60px;font-size:14px;padding:10px 12px}.header-right button{min-width:78px;padding:10px 12px}.captured-row{font-size:11px}.captured-item .unit-art{width:20px;height:24px}.captured-row{min-height:28px}}
@media(max-width:700px){header{height:auto;min-height:104px;flex-wrap:wrap;gap:7px 12px;padding:11px 0 9px}.brand{order:1;font-size:21px}.header-right{order:2}.app-nav{order:3;width:100%;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.app-nav button{width:100%;min-width:0;min-height:40px;font-size:14px;padding:9px 6px}.header-right button{min-height:36px;min-width:83px;font-size:12px;padding:9px 12px}.intro{grid-template-columns:1fr auto;gap:10px;padding:15px 0}.intro h1{font-size:27px}.intro #play-guide{grid-column:1/-1;grid-row:2;font-size:12px;line-height:1.8}.intro #new{min-height:40px;min-width:108px;font-size:14px;padding:10px 12px}.game-aside{grid-template-columns:1fr}.game-aside .status-panel,.game-aside .history-panel{grid-column:1}.arena .player{height:44px}.player strong{font-size:13px}.player small{font-size:9px}.player-state.current{font-size:10px;padding:8px 9px}.last-action{font-size:11px;line-height:1.7;min-height:34px}.board-frame{padding:7px}.board-quick-actions{gap:7px}.board-quick-actions button{font-size:12px;min-height:43px;padding:10px 4px}.captured-row{font-size:10px}.captured-item .unit-art{width:17px;height:22px}.game-aside .panel{padding:20px!important}.game-aside .move-row{font-size:15px}.game-aside .save-actions button{font-size:14px}.settings-grid{grid-template-columns:1fr}.settings-grid .settings-card{padding:21px}.settings-card label:not(.toggle){font-size:15px}.settings-section .review-heading h2{font-size:25px}.review-section,.library-section,.settings-section{margin-top:17px;scroll-margin-top:124px;padding:21px 15px}.review-heading h2{font-size:26px}.review-heading>button{font-size:12px;padding:10px 13px}.review-layout{grid-template-columns:1fr;gap:18px}.review-detail{gap:20px}#review-list{max-height:210px;display:grid;grid-template-columns:1fr 1fr}.library-layout{grid-template-columns:1fr}.library-empty-detail{padding:25px 21px}.ux-disclosure>summary{font-size:13px}.ux-toast{font-size:13px;bottom:18px;padding:12px 16px}.unit-codex .unit-card span{font-size:13px}.unit-codex .unit-card .unit-art{width:30px;height:48px}.unit-codex .unit-card small{font-size:8px}body.focus-mode .game-layout{width:100%}body.focus-mode .intro{grid-template-columns:1fr auto;min-height:55px}footer{font-size:9px;gap:12px}.ux-dialog h2{font-size:27px}.ux-dialog-actions{gap:8px}.ux-dialog-actions button{font-size:13px;padding:12px 9px}}
@media(max-width:380px){.shell{padding-inline:13px}.board-quick-actions{gap:5px}.board-quick-actions button{font-size:11px}.player small{font-size:8px}.captured-item .unit-art{width:15px}.captured-row{gap:4px}.ux-dialog{padding:23px!important}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
#review-detail,#library-detail{scroll-margin-top:88px}
@media(max-width:700px){#review-detail,#library-detail{scroll-margin-top:128px}}
.startup-status{font-size:14px;line-height:1.8;color:#f3d6b2;padding:15px;border:1px solid #b1896366;border-radius:4px;background:#18131e}
#review-load-meter{display:block;width:100%;height:9px;margin:15px 0 21px;accent-color:#ecb1cf;border:0;border-radius:4px;background:#242030}
#review-load-meter::-webkit-progress-bar{background:#242030;border-radius:4px}#review-load-meter::-webkit-progress-value{background:linear-gradient(90deg,#b96995,#f3c3d7);border-radius:4px}#review-load-meter::-moz-progress-bar{background:#e9afce;border-radius:4px}
.arena{display:flex;flex-direction:column}.arena>.player.top{order:0}.arena>.battle-strip{order:1}.arena>.last-action{order:2}.arena>.board-frame{order:3}.arena>.player.bottom{order:4}.arena>.captured-row{order:5}.arena>.board-quick-actions{order:6}
html[data-board-flipped=true] .arena>.player.top{order:4}html[data-board-flipped=true] .arena>.player.bottom{order:0}
.settings-grid>.settings-card{grid-column:auto;grid-row:auto;min-width:0}
.settings-card select,.ux-dialog select,.coach-settings select,.review-topline select,.library-searchbar select{border:1px solid #9b8199!important;background:#131c2a!important;color:#f6e7f2!important;border-radius:4px}
.ux-dialog select{text-align:center;text-align-last:center}
.review-header-actions{display:flex;gap:10px;flex-wrap:wrap}.review-header-actions button{min-height:42px;padding:11px 15px;font-size:13px;background:linear-gradient(#1c2633ef,#1c2633ef),url('assets/ai-secondary.webp') center/145% 190%;border:1px solid #927b93;border-radius:4px;color:#f4e7ef;cursor:pointer}.review-header-actions #review-restart{border-color:#c68da9}.review-header-actions button:disabled{opacity:.4;cursor:default}
@media(max-width:700px) and (max-height:800px){.intro #play-guide{display:none}}
@media(max-width:380px){.app-nav button{font-size:13px;letter-spacing:.3px}}
.square.move-origin:not(.selected):not(.checked){box-shadow:inset 0 0 0 2px #eac58b99}
.square.move-destination:not(.selected):not(.checked){box-shadow:inset 0 0 0 3px #ffe0a8}
.square.move-origin:before,.square.move-destination:before,.square.checked:before{display:block;position:absolute;inset:auto;right:3px;top:3px;padding:2px 4px;border-radius:3px;font:600 clamp(9px,1vw,12px) 'Microsoft YaHei',sans-serif;line-height:1.3;z-index:4;pointer-events:none;text-shadow:none}
.square.move-origin:before{content:'从';background:#172433;color:#f7dcb1;border:1px solid #a38c69}
.square.move-destination:before{content:'到';background:#ffe0a8;color:#241c28}
.square.checked:before{content:'将军';background:#681c38;color:#fff1f5}
.lesson-card{padding:18px 20px;margin:18px 0 24px;border:1px solid #bc93a76b;border-left:3px solid #efb9ce;border-radius:6px;background:#141e2bf5}
.lesson-card h3{margin-top:0;color:#ffe1be}.lesson-card p,.lesson-card li{font-size:15px;line-height:1.95;color:#f1e3ed}.lesson-card ol{padding-left:25px}.lesson-card li{padding:4px 0 7px 5px}.lesson-card li::marker{color:#f4cba1;font-weight:700}
.lesson-card button{width:100%;min-height:46px;padding:12px;font-size:15px;border:1px solid #d2a2b7;border-radius:4px;color:#fff0f6;background:linear-gradient(#253043ef,#253043ef),url('assets/ai-secondary.webp') center/cover;cursor:pointer}
.settings-card #audio-volume{width:100%;min-height:36px;accent-color:#ecb4cf;cursor:pointer}.settings-card output{float:right;color:#ffe0b6}.lesson-card .review-caveat{font-size:12px;color:#cbbbc9}
@media(max-width:700px){.lesson-card{padding:15px}.lesson-card p,.lesson-card li{font-size:14px}.square.move-origin:before,.square.move-destination:before{right:1px;top:1px;padding:1px 3px}}
