/* 棋台与棋子保留为可交互的 CSS 3D 元素；俯视切换不改变棋盘坐标。 */
body.cinematic { --paper: #192123; --ink: #eee3ce; --muted: #94a49f; --jade: #dfbd7e; --line: #3b4846; background: radial-gradient(ellipse at 48% 0%, #263d3c 0%, #101d20 52%, #0b1418 100%) !important; color: var(--ink) !important; padding: 24px 30px 50px; }
body.cinematic::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: linear-gradient(170deg, transparent 45%, #c4a05b05 46%, transparent 47%), repeating-linear-gradient(100deg, #ffffff01 0 1px, transparent 1px 8px); }
.game-container { max-width: 1440px; position: relative; }
.game-header { text-align: left; border-bottom: 1px solid #b8975935; padding: 8px 0 24px; margin-bottom: 24px; }
.game-header h1 { font-size: clamp(27px, 3vw, 39px); color: #f2dfb5; letter-spacing: .12em; }
.brand-mark { color: #c7a66a; font-size: 10px; letter-spacing: .25em; margin-bottom: 9px; }
.subtitle { color: #839f99; letter-spacing: .14em; }
.focus-control { color: #b7c8bc; top: 32px; }
.main-game { grid-template-columns: 200px minmax(360px, 1fr) 300px; gap: 24px; align-items: start; }
.main-game:has(> .campaign-panel.hidden) { grid-template-columns: 220px minmax(0, 1fr); }
.info-panel, .analysis-panel { background: linear-gradient(150deg, #1c2b2b, #142023); border-color: #3d504b; padding: 18px; border-radius: 12px; }
.info-panel h3 { font-size: 13px; letter-spacing: .08em; color: #d1b17a; }
.player-info p { font-size: 12px; color: #b9c8bf; }
.battle-status p { color: #a7bbb2; font-size: 12px; }
.turn-red { color: #ed9b76; } .turn-black { color: #bfd5cb; }
.btn-primary { background: linear-gradient(135deg, #d9ba80, #ac884e); color: #182321; box-shadow: 0 3px 0 #6b542f; }
.btn-primary:hover { background: #e7c98c; color: #182321; }
.btn-secondary { background: #293936; color: #d9d8c5; border: 1px solid #45534a; }
.btn-secondary:hover { background: #354a43; }
.difficulty-control label, .difficulty-control span { color: #afc2b6 !important; }
.difficulty-control select { background: #142421; color: #d5ddce; border-color: #46594e; }
.advanced-controls summary { color: #c2ae83; font-size: 11px; }
.log-content { background: #0d1b1c; color: #8fa99c; max-height: 120px; }
.board-container { position: relative; align-self: start; }
.board-toolbar { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 6px 18px 12px; }
.board-label { color: #decaa1; font-family: 'KaiTi', serif; font-size: 20px; letter-spacing: .2em; }
.board-toolbar small { display: block; color: #748d85; font-size: 11px; margin-top: 6px; }
.view-buttons { display: flex; gap: 3px; padding: 4px; background: #0d191d; border: 1px solid #3e514a; border-radius: 8px; }
.view-buttons button { border: none; background: transparent; color: #899e96; padding: 7px 13px; border-radius: 5px; cursor: pointer; font-size: 11px; }
.view-buttons button.active { background: #46564a; color: #f2dfb5; }
.board-stage { width: 100%; padding: 26px 26px 42px; position: relative; perspective: 1400px; display: flex; justify-content: center; background: radial-gradient(ellipse at 50% 60%, #91724230, transparent 68%); }
.board-stage::before { content: ''; position: absolute; inset: 12% -5% 0; background: radial-gradient(ellipse at center, #c7a0650e, transparent 75%); border-radius: 50%; pointer-events: none; }
.chess-board { position: relative; width: min(100%, 580px); border: 14px solid #826143; border-top-color: #b08b59; border-left-color: #a78150; border-right-color: #684d35; border-bottom-color: #4b3323; border-radius: 8px; background-color: #dcb47c; transform-style: preserve-3d; box-shadow: 0 1px 0 #614529, 0 4px 0 #543820, 0 8px 0 #4f341e, 0 12px 0 #3d291c, 0 16px 0 #2e211a, 0 35px 35px #0008, inset 0 0 45px #6b4a2522; transition: transform .45s ease; }
.view-3d .chess-board { transform: rotateX(20deg) rotateZ(-1.5deg); }
.view-flat .chess-board { transform: rotateX(0) rotateZ(0); }
.chess-board::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(4deg, #693a1c05 0px, #693a1c05 1px, transparent 1px, transparent 6px), linear-gradient(130deg, #fff4bd30, transparent 45%, #44271812); }
.chess-cell { transform-style: preserve-3d; transform: translateZ(2px); border-radius: 2px; }
.chess-piece { position: relative; width: 79%; height: 79%; border-width: 2px; transform: translateZ(15px); transform-style: preserve-3d; font-size: clamp(22px, 2.5vw, 32px); font-weight: 800; box-shadow: 0 1px 0 #ab8550, 0 3px 0 #8c663a, 0 5px 0 #73502f, 0 7px 0 #5c3e26, 3px 10px 8px #39261270, inset 0 2px 2px #fff7d9c0, inset 0 -2px 4px #83531e40; }
.chess-piece::before { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 5px double currentColor; opacity: .35; pointer-events: none; }
.chess-piece.red { color: #a62e22; background: radial-gradient(circle at 32% 22%, #ffefc3, #ebc78e 60%, #c99556); border-color: #a45136; text-shadow: 0 1px 0 #ffe6ab; }
.chess-piece.black { color: #243e35; background: radial-gradient(circle at 32% 22%, #f5e6b9, #d7bf8b 65%, #a8915d); border-color: #456348; text-shadow: 0 1px 0 #f8e8b9; }
.chess-cell.selected { background: #ffcd6740; box-shadow: inset 0 0 0 2px #f2ce76; }
.chess-cell.selected .chess-piece { transform: translateZ(23px) translateY(-5px); box-shadow: 0 2px 0 #87603e, 0 7px 0 #5d3e2a, 0 18px 12px #0006, 0 0 18px #e9c87980; }
.chess-cell.story-target { background: radial-gradient(circle, #fbce6760, #ffc65708 68%); }
.chess-cell.story-target::before { content: ''; position: absolute; width: 83%; height: 83%; border: 1px dashed #a96c28; border-radius: 50%; pointer-events: none; }
.mission-piece { filter: drop-shadow(0 0 5px #ffe09988); }
.game-message { background: #1b2b29; color: #c4d2b9; border-color: #40574b; margin-top: 9px; font-size: 12px; }
.campaign-panel { width: 100%; background: linear-gradient(155deg, #273b34, #182625); border: 1px solid #5c6550; border-radius: 12px; padding: 20px; margin: 0; box-shadow: 0 12px 30px #0002; }
.campaign-panel h2 { color: #ecd3a0; font-size: 25px; }
.chapter-label { color: #b99b65; }
.campaign-panel #campaign-intro { color: #9db1a3; font-size: 12px; line-height: 1.9; margin-bottom: 14px; }
.campaign-panel-heading { position: relative; display: block; }
.campaign-panel-heading .chapter-directory { position: absolute; top: 0; right: 0; }
.campaign-panel h2 { margin-top: 12px; }
.chapter-directory { color: #c7d2b8; border-color: #5a6852; font-size: 10px; }
.route-badge { display: inline-block; color: #e5c78c; border: 1px solid #826d474d; background: #7e66341c; padding: 6px 9px; border-radius: 4px; font-size: 11px; }
.campaign-stages { display: flex; list-style: none; gap: 5px; margin: 18px 0; }
.campaign-stages li { flex: 1; text-align: center; padding: 9px 4px; font-size: 11px; border-bottom: 2px solid #43564c; color: #718d7c; }
.campaign-stages .current { color: #f0d697; border-color: #d6b268; background: #bd9e5615; }
.campaign-stages .done { color: #a9c8a4; border-color: #83a47a; }
.chapter-objective { background: #111f1a80; color: #e5dcbd; border-left-color: #d3ad65; margin: 0 0 20px; line-height: 1.7; }
.story-dialogue-heading { color: #dac495; font-size: 12px; margin-bottom: 12px; display: flex; justify-content: space-between; }
.story-dialogue-heading span { color: #738c7c; font-size: 10px; }
.campaign-dialogue { max-height: 290px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #526850 transparent; }
.dialogue-entry { padding: 12px; margin-bottom: 9px; border: 1px solid #40564a; border-left: 2px solid #9f9464; border-radius: 0 8px 8px 0; background: #10221c50; }
.dialogue-entry strong { color: #d1b982; font-size: 11px; }
.dialogue-entry p { color: #bbcbbb; font-size: 12px; line-height: 1.9; margin-top: 5px; }
.campaign-hint { color: #eac987; font-size: 12px !important; }
.campaign-panel small { color: #6d8978; font-size: 9px; line-height: 1.6; }
.modal { background: #071217c9; backdrop-filter: blur(12px); }
.modal-content { background: linear-gradient(145deg, #263b36, #142226); border: 1px solid #7b735344; box-shadow: 0 25px 100px #0009, inset 0 1px 0 #bfaa7333; }
.modal-content h2 { color: #f0d9aa; }
.mode-card, .campaign-card, .character-card, .endgame-card { background: #1e332d; border-color: #465e4d; color: #bbcaba; }
.mode-card:hover, .campaign-card:hover:not(:disabled) { background: #2b4538; border-color: #baa66b; }
.mode-card h3, .chapter-title, .character-card h3, .endgame-card h4 { color: #e8d3a8; }
.story-mode-card { background: linear-gradient(135deg, #3f5138, #21372c); border-color: #baa66b; }
.mode-card .mode-desc { color: #d1b982; }
.close-btn { color: #dccda7; }
.briefing-content { max-width: 740px; }
#briefing-intro { color: #b7c7b8; font-size: 15px; line-height: 2; margin: 20px 0; }
.briefing-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 24px 0; }
.route-choice { text-align: left; display: flex; flex-direction: column; gap: 12px; cursor: pointer; padding: 23px; border: 1px solid #7b7858; border-radius: 10px; color: #e4cb94; background: #314b3755; }
.route-choice:hover { background: #4c633655; border-color: #e0c284; }
.route-choice strong { font-family: 'KaiTi', serif; font-size: 22px; }
.route-choice span { color: #b1c3ad; font-size: 12px; line-height: 1.8; }
.campaign-ending { white-space: pre-line; color: #c5d4bc; }
body[data-scene=river] .board-stage { background: repeating-linear-gradient(174deg, transparent 0 39px, #7ea99c09 40px 41px, transparent 42px 78px), radial-gradient(ellipse at bottom, #447d7430, transparent 70%); }
body[data-scene=plain] .board-stage { background: radial-gradient(ellipse at bottom, #a88a3b30, transparent 70%); }
body[data-scene=fortress] .board-stage { background: radial-gradient(ellipse at bottom, #8f604c30, transparent 70%); }
body[data-scene=night] .board-stage { background: radial-gradient(ellipse at top, #7383b329, transparent 70%); }
@media (max-width: 1150px) {
 .main-game { grid-template-columns: 180px minmax(0, 1fr); gap: 20px; }
 .campaign-panel { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; }
 .campaign-panel-heading, #campaign-intro, .route-badge, .campaign-stages, .chapter-objective, #campaign-hint, #campaign-source { grid-column: 1; }
 .story-dialogue-heading { grid-column: 2; grid-row: 1; }
 .campaign-dialogue { grid-column: 2; grid-row: 2 / span 6; max-height: 280px; }
}
@media (max-width: 760px) {
 body.cinematic { padding: 16px 12px 30px; }
 .game-header { padding-top: 27px; text-align: center; margin-bottom: 16px; }
 .focus-control { top: 0; right: 0; }
 .board-stage { padding: 10px 14px 26px; }
 .view-3d .chess-board { transform: rotateX(13deg) rotateZ(-1deg); }
 .chess-board { border-width: 9px; }
 .chess-piece { font-size: clamp(19px, 5.7vw, 29px); }
 .board-toolbar { padding: 0 14px 8px; }
 .board-container { order: 0; }
 .campaign-panel { order: -1; display: block; padding: 15px; }
 .info-panel { order: 1; }
 .campaign-panel #campaign-intro { display: none; }
 .campaign-dialogue { max-height: 135px; }
 .campaign-stages { margin: 12px 0; }
 .chapter-objective { margin-bottom: 12px; }
 .campaign-panel h2 { font-size: 24px; }
 .modal-content { padding: 23px 18px; }
 .briefing-routes { grid-template-columns: 1fr; }
 .mission-piece { filter: none; }
}