.xiangqi-board { position:relative; display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); grid-template-rows:repeat(10,minmax(0,1fr)); width:100%; max-width:570px; aspect-ratio:9/10; margin:auto; overflow:hidden; border:1px solid #c9a979; border-radius:12px; background:#e9cd9f; box-shadow:inset 0 2px 15px #8c684121,0 8px 20px #694f2b16; user-select:none; -webkit-user-select:none; touch-action:manipulation; overflow-anchor:none; }
.xiangqi-lines { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.xiangqi-lines path { fill:none; stroke:#8b6d49; stroke-width:1.8; vector-effect:non-scaling-stroke; }
.river-label { position:absolute; z-index:1; top:45%; left:8%; right:8%; height:10%; display:flex; align-items:center; justify-content:space-around; color:#8c714e; font-family:"Songti SC","STSong",serif; font-size:clamp(15px,3.7vw,25px); font-weight:700; letter-spacing:.22em; pointer-events:none; }
.xiangqi-cell { position:relative; z-index:2; display:grid; min-width:0; min-height:0; place-items:center; padding:0; border:0; border-radius:50%; background:transparent; touch-action:manipulation; }
.xiangqi-cell.moving { z-index:5; }
.xiangqi-cell:focus-visible { outline:2px solid #526447; outline-offset:-3px; }
.xiangqi-cell.legal::after { content:""; display:block; width:20%; aspect-ratio:1; border-radius:50%; background:#6d915cd6; box-shadow:0 0 0 4px #eff7df72; }
.xiangqi-cell.capture::after { content:""; position:absolute; width:78%; aspect-ratio:1; border:3px solid #82a56f; border-radius:50%; pointer-events:none; }
.xiangqi-cell.last-from::before { content:""; position:absolute; width:62%; aspect-ratio:1; border:2px dashed #a96b36; border-radius:50%; background:#fff3cd70; box-shadow:0 0 0 2px #fff8e7ad; pointer-events:none; }
.xiangqi-cell.last-to::before { content:""; position:absolute; width:90%; aspect-ratio:1; border:2px solid #bc7836; border-radius:50%; background:#fff0be8c; box-shadow:0 0 0 2px #fff8e7ad; pointer-events:none; }
.xiangqi-cell.selected::before { content:""; position:absolute; width:93%; aspect-ratio:1; border:3px solid #71915d; border-radius:50%; background:#ffffff44; pointer-events:none; }
.xiangqi-piece { position:relative; z-index:1; display:grid; width:79%; aspect-ratio:1; place-items:center; padding-bottom:1px; border:1px solid #ad8554; border-radius:50%; background:radial-gradient(circle at 35% 25%,#fffdf4,#f4e5ca 72%,#d9bc86); box-shadow:inset 0 0 0 2px #fff8e8,inset 0 0 0 4px #c19a68,0 2px 4px #6e512a61; font-family:"Kaiti SC","STKaiti","KaiTi","Songti SC",serif; font-size:clamp(22px,5vw,35px); font-weight:800; -webkit-text-stroke:.35px currentColor; line-height:1; pointer-events:none; }
.xiangqi-piece.red { color:#a83d31; }
.xiangqi-piece.black { color:#2c4035; }
.xiangqi-cell.last-to .xiangqi-piece { box-shadow:inset 0 0 0 2px #fff8e8,inset 0 0 0 4px #c19a68,0 0 0 3px #ce853e,0 0 0 5px #fff0c8,0 3px 7px #6e512a80; }
.xiangqi-players { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.xiangqi-player { display:flex; align-items:center; gap:9px; min-width:0; padding:11px 9px; border:1px solid #e6e8e1; border-radius:11px; background:#fafbf8; opacity:.6; }
.xiangqi-player.active { border-color:#a6b99c; background:#f0f5eb; opacity:1; }
.xiangqi-player strong,.xiangqi-player small { display:block; white-space:nowrap; }
.xiangqi-player strong { font-size:12px; }
.xiangqi-player small { margin-top:4px; color:#93a08a; font-size:10px; }
.xiangqi-mini-piece { display:grid; width:31px; height:31px; flex:none; place-items:center; padding-bottom:1px; border:1px solid #ad8554; border-radius:50%; background:#f3e4c7; font-family:"Kaiti SC","STKaiti","KaiTi","Songti SC",serif; font-size:21px; font-weight:800; -webkit-text-stroke:.3px currentColor; }
.xiangqi-mini-piece.red { color:#a83d31; }
.xiangqi-mini-piece.black { color:#2c4035; }
.xiangqi-actions { display:grid; grid-template-columns:1fr 1.2fr; gap:9px; }
.xiangqi-actions button { min-height:44px; padding:9px; border:1px solid #dfe5d8; border-radius:9px; background:#fff; color:#526447; font-size:12px; font-weight:700; }
.xiangqi-actions .primary-button { border-color:#526447; background:#526447; color:#fff; }
.xiangqi-actions .primary-button:hover { background:#3b4f34; }
.xiangqi-actions button:disabled { opacity:.5; cursor:default; }
.board-card.victory .xiangqi-board { box-shadow:inset 0 2px 15px #8c684121,0 0 0 4px #a4bd85,0 12px 28px #6b8a5666; }
.xiangqi-cell.study-from::after { content:""; position:absolute; width:88%; aspect-ratio:1; border:3px solid #446d50; border-radius:50%; box-shadow:0 0 0 4px #f4f8e3aa; pointer-events:none; }
.xiangqi-cell.study-to::after { content:""; position:absolute; width:48%; aspect-ratio:1; border:3px dashed #a83d31; border-radius:50%; background:#fff4cf82; pointer-events:none; }
.xiangqi-cell.study-to.capture::after { width:84%; background:transparent; }
.xiangqi-mode-tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.xiangqi-mode-tabs button,.study-panel button,.study-hint-actions button,.study-deviation-actions button { min-height:44px; border:1px solid #d6cbb6; border-radius:12px; background:#fffaf0; color:#53684e; font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.xiangqi-mode-tabs button.active { border-color:#8da482; background:#eaf0e4; box-shadow:inset 3px 0 #68855d; }
.study-panel label { display:block; margin:13px 0 6px; color:#627158; font-size:11px; font-weight:700; }
.study-panel select { width:100%; min-height:44px; padding:8px 12px; border:1px solid #d9d3c3; border-radius:11px; background:#fffdf6; color:#354535; font:inherit; font-size:12px; }
.study-panel input[type="search"] { box-sizing:border-box; width:100%; min-height:44px; padding:8px 12px; border:1px solid #d9d3c3; border-radius:11px; background:#fffdf6; color:#354535; font:inherit; font-size:12px; }
.study-panel #classic-results { display:block; margin-top:5px; color:#818a77; font-size:10px; }
.study-panel .primary-button { width:100%; margin-top:16px; }
.classic-intro { min-height:42px; margin:10px 0 0; color:#808774; font-size:11px; line-height:1.65; }
.study-session { margin-top:14px; padding-top:14px; border-top:1px solid #e5dfd0; }
.study-session p { margin:0 0 8px; color:#40573a; font-size:12px; font-weight:700; }
.study-session a { display:inline-block; margin-bottom:11px; color:#6a8058; font-size:11px; }
.study-session button { width:100%; }
.study-inline { box-sizing:border-box; height:190px; margin-top:14px; padding:14px 16px; overflow:auto; border:1px solid #d3dabc; border-radius:15px; background:#f4f6e9; box-shadow:0 6px 16px #42553112; }
.study-step-head { display:flex; justify-content:space-between; gap:12px; color:#818f72; font-size:10px; font-weight:700; letter-spacing:.08em; }
.study-inline strong { display:block; margin-top:9px; color:#334932; font-family:"Songti SC","STSong",serif; font-size:18px; line-height:1.35; }
.study-inline p { min-height:32px; margin:6px 0 8px; color:#64715d; font-size:11px; line-height:1.55; }
.study-hint-actions { display:flex; flex-wrap:wrap; gap:8px; }
.study-hint-actions button { min-height:33px; padding:5px 10px; background:#fffdf6; font-size:11px; }
.study-preview { max-height:62px; margin-top:9px; overflow:auto; color:#596b52; font-size:11px; line-height:1.6; }
.study-deviation[hidden],.study-inline[hidden],.study-panel[hidden],.study-session[hidden],.study-preview[hidden],.study-hint-actions button[hidden],#classic-book-field[hidden],#classic-search-field[hidden],#classic-lesson-field[hidden],#study-source[hidden] { display:none; }
.study-deviation { position:fixed; z-index:100; inset:0; display:grid; align-items:end; justify-items:center; }
.study-deviation-backdrop { position:absolute; inset:0; background:#1f2d1e85; }
.study-deviation-sheet { position:relative; box-sizing:border-box; width:min(100%,600px); max-height:min(78dvh,700px); padding:23px 22px max(22px,env(safe-area-inset-bottom)); overflow:auto; border:1px solid #d5c7a9; border-radius:23px 23px 0 0; background:#fffcf4; box-shadow:0 -12px 50px #1d2b1c44; }
.study-deviation-sheet h2 { margin:6px 0 7px; color:#344b32; font-family:"Songti SC","STSong",serif; font-size:23px; }
.study-deviation-sheet>p { margin:0 0 14px; color:#7c816e; font-size:12px; line-height:1.55; }
.study-compare { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.study-compare>div { padding:12px; border:1px solid #e1dccd; border-radius:13px; background:#fbf7eb; }
.study-compare small,.study-compare strong { display:block; }
.study-compare small { margin-bottom:5px; color:#8a8e7b; font-size:10px; }
.study-compare strong { color:#41563d; font-size:16px; }
.study-analysis { min-height:50px; margin:12px 0; padding:12px; border:1px solid #dfe7d2; border-radius:12px; background:#f3f6ee; color:#53634f; font-size:11px; line-height:1.65; white-space:pre-line; }
.study-analysis strong { color:#304931; }
.study-analysis p { margin:4px 0 0; }
.study-deviation-actions { display:grid; grid-template-columns:1fr; gap:8px; }
.study-deviation-actions button { padding:8px 5px; }
.study-deviation-actions .primary-button { border-color:#496442; background:#526c48; color:#fff; }
@media(max-width:640px) { .xiangqi-board { border-radius:9px; } .xiangqi-piece { font-size:clamp(21px,5.8vw,28px); box-shadow:inset 0 0 0 2px #fff8e8,inset 0 0 0 3px #c19a68,0 2px 3px #6e512a61; } .xiangqi-cell.capture::after { border-width:2px; } .panel h2 { margin-bottom:14px; } .game-status { height:72px; min-height:72px; } }
@media(max-width:640px) { .study-inline { height:190px; } .study-deviation-sheet { max-height:70dvh; padding-inline:17px; } .study-deviation-actions { grid-template-columns:1fr 1fr; } .study-deviation-actions .primary-button { grid-column:1/-1; } }