/* A quieter battlefield and larger, more legible typography. Original AI art is preserved. */
:root{--ink:#fff2ed;--muted:#d9bdce}
body{font-family:'Microsoft YaHei','DengXian',sans-serif;font-size:15px;line-height:1.6;color:var(--ink)}
.shell{max-width:1460px;background:linear-gradient(90deg,#08080cbb,#0a0910d9 48%,#08080cbb)}
.game-layout{grid-template-columns:minmax(350px,1fr) 390px;gap:34px}
/* The background alone is desaturated; live units and move markers stay bright. */
#board{position:relative;isolation:isolate;background:#151b23}
#board:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(#15233426,#15233426),url('assets/ai-board.webp') center/102.6% 102.6% no-repeat;filter:grayscale(.98) brightness(.69) contrast(.9)}
.square,.square.dark{background:transparent}
.unit-art.ivory{filter:sepia(.38) saturate(.85) brightness(1.24) drop-shadow(0 2px 1px #02050a) drop-shadow(0 0 1px #fff1c8)}
.unit-art.obsidian{filter:sepia(1) saturate(3) hue-rotate(155deg) brightness(1.08) drop-shadow(0 2px 1px #02050a) drop-shadow(0 0 1px #a1e4ff)}
.unit-badge{font-family:'Microsoft YaHei',sans-serif!important;font-size:11px;line-height:16px;min-width:17px;left:3px;bottom:3px;font-weight:700;border:1px solid #ffedba;background:#f7e2b6;color:#291d17;box-shadow:0 1px 3px #0009}
.unit-badge.obsidian{border-color:#afebff;background:#163e5b;color:#d6f6ff}
.square.selected,.square.dark.selected{background:#ffc76b24;box-shadow:inset 0 0 0 3px #ffe3a0,0 0 15px #ffb95e33}.square.last,.square.dark.last{background:#f9d69a12;box-shadow:inset 0 0 0 2px #e9c68d66}.square.checked{background:#ff285749;box-shadow:inset 0 0 0 3px #ff8c9b}.square.possible:after{background:#ffe2a1;box-shadow:0 0 0 4px #100a16aa,0 0 12px #ffdfa866}.square.capture:after{border-color:#ffb6c9;background:transparent;box-shadow:inset 0 0 15px #ff3b7540;transform:none}.square .coord,.square.dark .coord,.square .coord.file{font-size:10px;opacity:1;color:#f4eee4;text-shadow:0 1px 3px #000,1px 0 2px #000}
/* KaiTi lends the Chinese headings an inscription-like character; controls use a clear sans serif. */
h1,.status-panel h2,dialog h2{font-family:'KaiTi','STKaiti','SimSun',serif;font-weight:700}
h1{font-size:46px;line-height:1.3;letter-spacing:3px;color:#fff1dc;margin:17px 0 16px;text-shadow:0 2px 0 #251426,0 0 30px #fcb3c31a}h1 span{color:#ffb3cd;text-shadow:0 2px 0 #551b39,0 0 30px #ff51962b}
.intro{padding:38px 0}.eyebrow{font-family:'Bahnschrift','Consolas',monospace;font-size:12px;letter-spacing:2px;color:#f0c8dc}.intro p{font-size:15px;line-height:1.9;letter-spacing:1px;color:#e6d4df;max-width:72%}.edition-mark>span{font-family:'KaiTi',serif;font-size:39px}.edition-mark b{font-size:13px;letter-spacing:4px}.edition-mark small{font-size:10px;letter-spacing:1px}.edition-mark{top:40px}
.brand{font:700 25px 'Bahnschrift','Consolas',monospace;letter-spacing:2px}.brand-icon{font-size:27px}.header-right{font:11px 'Bahnschrift','Consolas',monospace;letter-spacing:1px}.header-right button{font-size:13px;min-width:100px;padding:14px 20px}
.panel,.controls,.history-panel,.status-panel{padding:35px 36px 36px}.panel-label{font-family:'Bahnschrift','Microsoft YaHei',sans-serif;font-size:12px;letter-spacing:.8px;line-height:1.7;color:#edc7df}.status-panel h2{font-size:34px;line-height:1.35;color:#ffe4ef;letter-spacing:2px;margin:20px 0 12px}.status-panel p{font-size:15px;line-height:1.85;color:#e5cbdb;min-height:28px}.turn-track{margin-top:23px;gap:6px}.turn-track span{font:13px 'Microsoft YaHei',sans-serif;padding:15px 0;color:#c7a9bc}.turn-track .active{color:#fff1ed;filter:brightness(1.5)}
.controls label:not(.toggle){font-size:14px;letter-spacing:1px;margin:20px 0 10px;color:#f1d9e7}.controls select{font-size:15px;line-height:1.5;min-height:52px;padding:15px 20px;font-family:'Microsoft YaHei',sans-serif;color:#fff0fa}.controls button,.controls button.primary{font-family:'Microsoft YaHei',sans-serif;font-size:16px;line-height:1.5;letter-spacing:1px;font-weight:600;padding:18px 13px;min-height:57px}.controls button.primary{font-size:17px;letter-spacing:2px;padding:21px 15px;margin-top:24px}.button-row button{font-size:15px;min-height:52px;padding:16px 12px}.toggle{font-size:14px;line-height:1.6;color:#ecd6e3;gap:9px;padding-top:20px;margin-top:22px}.toggle span{font-size:10px;letter-spacing:.5px;color:#ccb1c2}.toggle input{width:29px;height:18px;flex-shrink:0}.toggle input:before{top:4px}.toggle input:checked:before{left:18px}
.player{height:78px;gap:15px}.player strong{font-size:16px;letter-spacing:.5px}.player small{font:11px 'Bahnschrift','Microsoft YaHei',sans-serif;color:#ead0df;letter-spacing:1px;margin-top:5px}.player-state{font-size:14px;color:#dcc5d5}.player-state.current{font-size:13px;padding:14px 19px}.avatar{width:47px;height:50px;font:700 23px 'Georgia',serif}.avatar.light{color:#ffe4ad!important}.avatar.dark{color:#bdeaff!important}
.battle-strip{font:11px 'Bahnschrift','Microsoft YaHei',sans-serif;letter-spacing:1px;padding:14px 18px;color:#edcddd}.battle-strip span:last-child{color:#ffe0ee}.history-panel #history{max-height:185px;padding-top:10px}.move-row{font-size:15px;line-height:1.5;padding:10px 6px;grid-template-columns:33px 1fr 1fr;color:#e9d7e2}.move-row span:first-child{color:#ccb1c3}.move-row:last-child{color:#ffd5e8}.empty{font-size:15px;color:#d7b9cf;padding:20px 0;line-height:1.9}.empty small{font-size:11px;letter-spacing:1px;margin-top:8px}.tip p{font-size:13px;line-height:1.95;color:#e4d0dd}.tip>span{font-size:18px}
.unit-codex{padding:35px 39px}.unit-card .unit-art{width:52px;height:72px}.unit-card span{font-family:'KaiTi','SimSun',serif;font-size:17px;line-height:1.4;font-weight:600;color:#ffe5d7}.unit-card small{font:10px 'Bahnschrift','Consolas',monospace;letter-spacing:1px;color:#d9b7ce;margin-top:7px}.unit-card{gap:8px;padding:10px 6px}#unit-list{gap:9px}.unit-codex>.panel-label{padding-bottom:16px}footer{font:11px 'Bahnschrift','Microsoft YaHei',sans-serif;letter-spacing:1px;line-height:1.8;color:#dcc0d0;padding:25px 0 30px}dialog h2{font-size:32px}dialog p{font-size:15px;line-height:1.8;color:#e4c9da}
button:focus-visible,select:focus-visible{outline:3px solid #ffe6ac;outline-offset:4px}
@media(min-width:1500px){.shell{max-width:1490px;padding-inline:55px}.game-layout{gap:38px}}
@media(max-width:1150px){.shell{padding-inline:27px}.game-layout{grid-template-columns:minmax(330px,1fr) 350px;gap:25px}.panel,.controls{padding-inline:31px}.controls button.primary{font-size:16px}.intro p{max-width:70%}.header-right{font-size:10px}.unit-card{gap:3px}.unit-card .unit-art{width:43px;height:64px}.unit-card span{font-size:15px}.toggle span{display:none}}
@media(max-width:900px){.game-layout{grid-template-columns:1fr}.arena{max-width:730px}aside{grid-template-columns:1fr 1fr;gap:18px}.panel{margin:0}.controls{grid-column:2;grid-row:1/3}.history-panel{grid-column:1}.tip{grid-column:1/3}.unit-card span{font-size:17px}#unit-list{grid-template-columns:repeat(3,1fr)}.intro p{font-size:14px}.edition-mark>span{font-size:31px}.edition-mark small{font-size:9px}.edition-mark b{font-size:11px}.square .coord,.square.dark .coord{font-size:11px}.unit-badge{font-size:12px;line-height:17px;min-width:18px}}
@media(max-width:650px){.shell{padding-inline:17px}header{height:82px}.header-right{font-size:0}.header-right button{font-size:12px;min-width:88px;padding:13px 17px}.header-right>.led{display:none}.brand{font-size:21px;letter-spacing:1px}.brand-icon{font-size:23px}.intro{padding:30px 0}.eyebrow{font-size:11px;letter-spacing:1px}h1{font-size:36px;letter-spacing:1px}.intro p{max-width:100%;font-size:14px;letter-spacing:0}.edition-mark{display:none}aside{display:block}.panel,.controls,.history-panel,.status-panel{margin-bottom:18px;padding:36px 35px}.panel-label{font-size:12px}.controls select{font-size:16px}.toggle span{display:block;font-size:10px}.player strong{font-size:14px}.player small{font-size:10px;letter-spacing:.3px}.player{gap:10px;height:71px}.player-state{font-size:12px}.player-state.current{font-size:12px;padding:12px 14px}.avatar{width:39px;height:44px;font-size:21px}.battle-strip{font-size:10px;letter-spacing:.4px;padding:12px 14px}.unit-codex{padding:31px 24px}.unit-card{gap:3px;padding:8px 1px}.unit-card .unit-art{width:34px;height:53px}.unit-card span{font-size:14px}.unit-card small{font-size:9px;letter-spacing:.4px}#unit-list{gap:6px}.square .coord,.square.dark .coord,.square .coord.file{font-size:9px}.unit-badge{font-size:9px;line-height:13px;min-width:13px;left:2px;bottom:2px}footer{font-size:10px;gap:16px;letter-spacing:.4px}.tip p{font-size:13px}}
@media(max-width:380px){.brand{font-size:18px}h1{font-size:31px}.player small{font-size:9px}.player-state.current{padding:10px}.unit-card span{font-size:12px}.unit-card .unit-art{width:28px}.toggle span{display:none}.battle-strip{font-size:9px}}

/* The sidebar uses the quiet center of the AI materials, with ornate edges cropped out. */
aside .panel{background:linear-gradient(#101019eb,#101019eb),url('assets/ai-panel.webp') center/165% 165% no-repeat!important;border:1px solid #74576b66;border-radius:4px;padding:26px;box-shadow:inset 0 1px 0 #f5d3e80b,0 8px 22px #0004;isolation:isolate}
aside .panel:before,aside .panel:after{display:none}
aside .panel-label{color:#d9c0d0;font-size:13px;letter-spacing:.4px;padding-bottom:14px;border-bottom:1px solid #9b798c2d}
aside .status-panel h2{margin-top:19px;font-size:33px;color:#ffe5ef}
aside .status-panel p{color:#e2ccd8;font-size:15px;line-height:1.8}
aside .turn-track{gap:8px;margin-top:21px}
aside .turn-track span{background:#191b25!important;border:1px solid #5e53624d!important;border-radius:3px;box-shadow:none;color:#c8bbc8;font-size:13px;padding:12px 0;filter:none}
aside .turn-track .active{background:#3e2536!important;border-color:#b7809b!important;color:#ffe5ee;filter:none;box-shadow:inset 3px 0 0 #e8a3c2}
aside .controls label:not(.toggle){margin-top:23px;margin-bottom:10px;color:#f1e3eb;font-size:15px;letter-spacing:0}
aside .controls select{appearance:auto;color-scheme:dark;background:linear-gradient(#10151fd9,#10151fd9),url('assets/ai-secondary.webp') center/155% 185% no-repeat!important;border:1px solid #8c7589!important;border-radius:4px;padding:13px 14px;min-height:53px;box-shadow:inset 0 2px 4px #0004;color:#fff0f9;font-size:15px;text-shadow:none}
aside .controls select:disabled{border-color:#635563!important;opacity:.55}
aside .controls button{background:linear-gradient(#24303dc7,#182332d9),url('assets/ai-secondary.webp') center/145% 190% no-repeat!important;border:1px solid #7b8294!important;border-radius:4px;box-shadow:inset 0 1px 0 #ffffff0d,0 3px 0 #070a10;min-height:54px;padding:14px 12px;color:#f8eff7;font-size:16px;font-weight:600;letter-spacing:.5px;text-shadow:0 1px 2px #0006}
aside .controls button.primary{background:linear-gradient(#6d234d4d,#6d234d4d),url('assets/ai-button.webp') center/142% 190% no-repeat!important;border:1px solid #e9a0be!important;color:#fff5fb;font-size:17px;font-weight:700;letter-spacing:1px;margin-top:29px;min-height:59px;padding:17px 12px;box-shadow:inset 0 1px 0 #ffdce71f,0 3px 0 #381326,0 5px 12px #0004}
aside .controls button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.12);border-color:#e3d1df!important;box-shadow:inset 0 1px 0 #ffffff1c,0 3px 0 #070a10}
aside .controls button.primary:hover{border-color:#ffe1ee!important;filter:brightness(1.16);box-shadow:0 3px 0 #381326,0 5px 15px #ed69991c}
aside .controls button:active:not(:disabled){transform:translateY(2px);filter:brightness(.95);box-shadow:inset 0 2px 4px #0005}
aside .controls button:disabled{opacity:1;color:#978e9a;border-color:#514a58!important;filter:grayscale(.8);box-shadow:none;background:linear-gradient(#151720ed,#151720ed),url('assets/ai-secondary.webp') center/145% 190% no-repeat!important}
aside .button-row{gap:13px;margin-top:17px}
aside .toggle{margin-top:26px;padding-top:20px;gap:10px;border-color:#9b798c2d;color:#e4d8e1;font-size:14px;cursor:pointer}
aside .toggle span{display:none}
aside .toggle input{background:#151c29;border-color:#8a7790;box-shadow:inset 0 1px 3px #0005;border-radius:3px;width:30px;height:18px}
aside .toggle input:before{background:#85738a;top:4px;height:8px;width:7px}
aside .toggle input:checked{background:#5f2947;border-color:#df98b6}
aside .toggle input:checked:before{background:#ffe3ee;left:18px;box-shadow:none}
aside .history-panel #history{border:0;padding-top:10px}
aside .history-panel .empty{color:#c8b9c5;font-size:15px}
aside .history-panel .empty small{color:#a799a8}
aside .tip{padding:3px 7px}
aside .tip p{font-size:13px;color:#d9c8d5}
@media(max-width:1150px){aside .panel{padding:24px}}
@media(max-width:650px){aside .panel{padding:26px;margin-bottom:18px}aside .controls select{font-size:16px}aside .controls button.primary{font-size:17px}}

/* Text has an explicit, centered safe area independent of ornamental image bounds. */
aside .panel-label{justify-content:center;align-items:center;flex-wrap:wrap;gap:8px 12px;text-align:center;min-height:36px;line-height:1.5}
aside .panel-label span:last-child:not(.led){margin-left:0;font-size:11px;color:#baa5b7;white-space:nowrap}
aside .status-panel h2,aside .status-panel p{text-align:center}
aside .controls label:not(.toggle){text-align:center;line-height:1.6}
aside .controls button,aside .controls button.primary{display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.4;padding:17px 24px;white-space:normal;overflow-wrap:break-word;background:linear-gradient(#202b3af5,#182332f5),url('assets/ai-secondary.webp') center/145% 190% no-repeat!important}
aside .controls button.primary{background:linear-gradient(#9f3b68f2,#7e2a54f2),url('assets/ai-button.webp') center/142% 190% no-repeat!important;padding:19px 26px;color:#fff4fa}
aside .controls select{text-align:center;text-align-last:center;line-height:1.5;padding:14px 33px;background:linear-gradient(#111822fa,#111822fa),url('assets/ai-secondary.webp') center/155% 185% no-repeat!important}
aside .controls select option{text-align:center}
aside .button-row{align-items:stretch}
aside .button-row button{flex:1 1 0;min-width:0;padding-inline:12px}
aside .turn-track span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:46px;padding:12px 8px;line-height:1.4}
aside .toggle{justify-content:center;text-align:center;align-items:center}
aside .history-panel .move-row span{text-align:center}
aside .history-panel .move-row{grid-template-columns:30px minmax(0,1fr) minmax(0,1fr)}
.last-action{font-size:14px;line-height:1.8;min-height:48px;padding:11px 15px;margin:0 0 5px;background:#10151eea;color:#ffe4bd;border:1px solid #9f7b5e55;letter-spacing:.3px;text-align:center;box-shadow:inset 3px 0 0 #d9b17c}
aside .animation-toggle{margin-top:17px;padding-top:17px}
aside .animation-setting-note{font-size:12px;line-height:1.8;text-align:center;color:#c7b6c5;margin:10px 0 0}
@media(max-width:650px){.last-action{font-size:12px;min-height:44px;padding:10px}.animation-setting-note{font-size:12px}}