@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@600;700;900&family=Noto+Sans+TC:wght@400;500;700&display=swap');

:root{--ink:#17130f;--paper:#d8c6a3;--paper2:#b99b70;--red:#a52b25;--red2:#e1503e;--black:#23292b;--gold:#d2a64b;--line:rgba(46,31,19,.48);--cell:clamp(48px,6vw,76px)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;color:#efe3ca;font-family:'Noto Sans TC',sans-serif;background:#12100e;background-image:radial-gradient(circle at 50% -10%,#3b3024 0,transparent 42%),linear-gradient(120deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:auto,8px 8px}
button{font:inherit}.game-shell{min-height:100vh;padding:18px 28px 30px}.topbar{max-width:1480px;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(210,166,75,.25);padding-bottom:14px}.brand{display:flex;gap:12px;align-items:center}.seal{display:grid;place-items:center;width:47px;height:47px;border:1px solid #c99543;color:#e2b65a;font:900 25px 'Noto Serif TC';transform:rotate(-3deg);box-shadow:inset 0 0 0 3px #17130f,inset 0 0 0 4px rgba(201,149,67,.5)}.brand p,.brand h1{margin:0}.brand p{font:600 11px 'Noto Serif TC';letter-spacing:.35em;color:#ae9370}.brand h1{font:900 23px 'Noto Serif TC';letter-spacing:.17em}.top-actions{display:flex;gap:10px}.text-btn{border:1px solid rgba(210,166,75,.34);background:rgba(0,0,0,.16);color:#d9c9aa;padding:8px 14px;cursor:pointer}.text-btn:hover{border-color:#d2a64b;color:#fff}
.battle-layout{display:grid;grid-template-columns:minmax(150px,210px) auto minmax(150px,210px);gap:24px;align-items:start;justify-content:center;margin:22px auto 0}.board-stage{width:calc(var(--cell)*9 + 48px)}.status-bar{height:65px;display:grid;grid-template-columns:1fr 1.4fr 1fr;align-items:center;margin-bottom:6px}.mode-pill{justify-self:start;color:#c7b48f;border-left:2px solid var(--gold);padding-left:9px;font-size:12px}.turn-copy{text-align:center}.turn-copy strong{display:block;font:700 18px 'Noto Serif TC';letter-spacing:.12em}.turn-copy small{color:#9c8c75}.turn-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px}.turn-dot.red{background:#e54b3c;box-shadow:0 0 12px #e54b3c}.turn-dot.black{background:#aab3b5;box-shadow:0 0 12px #b8c2c4}.skill-btn{justify-self:end;border:1px solid #bb8c3e;background:linear-gradient(#7f241f,#551715);color:#ffe6bd;padding:7px 12px;cursor:pointer;box-shadow:0 3px 16px rgba(0,0,0,.25)}.skill-btn span{display:block;color:#d6a750;font-size:9px;letter-spacing:.25em}.skill-btn:disabled{opacity:.3;cursor:not-allowed;filter:grayscale(1)}
.board-wrap{position:relative;padding:22px 24px 24px;background:#382c20;border:1px solid #816743;box-shadow:0 24px 55px rgba(0,0,0,.42),inset 0 0 0 4px #1d1812,inset 0 0 0 6px #8e7149}.board{position:relative;display:grid;grid-template-columns:repeat(9,var(--cell));grid-template-rows:repeat(9,var(--cell));background-color:var(--paper);background-image:radial-gradient(ellipse at 20% 25%,rgba(255,255,255,.28),transparent 32%),repeating-linear-gradient(17deg,rgba(81,50,26,.035) 0 1px,transparent 1px 5px);border:2px solid #4d321d}.cell{position:relative;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;place-items:center;cursor:pointer}.cell:nth-child(9n){border-right:0}.cell:nth-child(n+73){border-bottom:0}.cell::before{content:'';position:absolute;inset:4px;opacity:0;transition:.16s}.cell.move::before{opacity:1;background:rgba(65,128,109,.22);border:1px solid rgba(31,105,85,.7)}.cell.move::after{content:'';width:7px;height:7px;border-radius:50%;background:#28765e;box-shadow:0 0 0 4px rgba(40,118,94,.18)}.cell.attack::before{opacity:1;background:rgba(164,43,37,.22);border:2px solid rgba(164,43,37,.78);animation:pulse 1.2s infinite}.frontline{position:absolute;z-index:5;left:24px;right:24px;top:calc(22px + var(--cell)*4.5 - 13px);height:26px;pointer-events:none;display:flex;align-items:center;gap:8px;color:#51341f;font:900 clamp(10px,1vw,14px) 'Noto Serif TC';letter-spacing:.25em;text-shadow:0 1px rgba(255,255,255,.3)}.frontline i{height:2px;flex:1;background:linear-gradient(90deg,transparent,#7f271f,#7f271f,transparent)}.coordinate.cols{position:absolute;top:4px;left:24px;right:24px;display:grid;grid-template-columns:repeat(9,1fr);text-align:center;font:700 10px 'Noto Serif TC';color:#bfa478}
.unit{z-index:7;position:relative;width:88%;height:88%;border-radius:50%;transition:transform .18s,filter .18s;filter:drop-shadow(0 5px 3px rgba(34,22,13,.35));animation:arrive .25s ease-out}.unit:hover{transform:translateY(-2px) scale(1.03)}.unit.selected{transform:translateY(-4px) scale(1.08);filter:drop-shadow(0 0 8px #ffd36b)}.portrait{position:absolute;inset:0;border-radius:50%;overflow:hidden;background-size:400% 200%;background-repeat:no-repeat;border:3px solid #eee2c5;box-shadow:inset 0 0 0 2px #372619}.unit.red .portrait{border-color:#d55a42;background-color:#9d2d26}.unit.black .portrait{border-color:#475154;background-color:#23282a}.unit .fallback{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(22px,3vw,38px);text-shadow:0 2px 2px #000}.unit.has-art .fallback{display:none}.portrait.general{background-position:0% 0%}.portrait.archer{background-position:33.333% 0%}.portrait.infantry{background-position:66.666% 0%}.portrait.chariot{background-position:100% 0%}.unit.black .portrait.general{background-position:0% 100%}.unit.black .portrait.archer{background-position:33.333% 100%}.unit.black .portrait.infantry{background-position:66.666% 100%}.unit.black .portrait.chariot{background-position:100% 100%}.hp-wrap{position:absolute;left:4%;right:4%;bottom:-5px;height:8px;background:#241712;border:1px solid #ead8b6;border-radius:7px;overflow:hidden}.hp-loss{position:absolute;inset:0 auto 0 0;background:#f6c94b;transition:width .9s .18s ease-out}.hp{position:relative;height:100%;background:linear-gradient(90deg,#b52723,#ee5b42);transition:width .48s ease-out}.unit.black .hp{background:linear-gradient(90deg,#536165,#a7b1b0)}.unit.low-hp .hp{background:linear-gradient(90deg,#6e0909,#ff2d20);animation:hpWarning .75s infinite}.unit.low-hp .hp-text{color:#ffb5aa;border-color:#d64335}.hp-text{position:absolute;right:-6px;top:-8px;min-width:24px;padding:1px 3px;background:#231a14;color:#fff9e8;border:1px solid transparent;border-radius:6px;font-size:8px;text-align:center;transition:color .25s}.unit.hit{animation:hit .42s}.unit.attacking{animation:attackLunge .42s}.unit.dead{animation:die .55s forwards}.damage-float{position:absolute;z-index:18;left:50%;top:12%;color:#fff3d1;font:900 clamp(16px,2vw,25px) 'Noto Serif TC';text-shadow:0 2px 0 #8f160f,0 0 10px #ff3b24;pointer-events:none;animation:damageFloat .9s forwards}
.battle-scene{position:absolute;z-index:20;inset:22px 24px 24px;display:grid;grid-template-columns:1fr .7fr 1fr;place-items:center;visibility:hidden;opacity:0;overflow:hidden;background:radial-gradient(circle at center,rgba(123,32,24,.5),transparent 32%),linear-gradient(100deg,rgba(11,9,7,.93),rgba(53,33,20,.92),rgba(11,9,7,.93));border:1px solid rgba(238,187,91,.55);pointer-events:none;transition:opacity .18s}.battle-scene::before,.battle-scene::after{content:'';position:absolute;width:70%;height:2px;background:linear-gradient(90deg,transparent,#ffce62,transparent);transform:rotate(-25deg);opacity:0}.battle-scene.active{visibility:visible;opacity:1}.battle-scene.active::before{animation:slashFlash .48s .25s}.battle-scene.active::after{animation:slashFlash .48s .33s reverse}.battle-fighter{position:relative;width:min(18vw,150px);height:auto;aspect-ratio:1/1;border-radius:50%;opacity:0;transform:translateX(-45%);filter:drop-shadow(0 12px 12px #000)}.battle-fighter.defender{transform:translateX(45%)}.battle-scene.active .battle-fighter{animation:fighterIn .35s forwards}.battle-scene.active .battle-fighter.defender{animation:fighterInRight .35s forwards,defenderHit .36s .38s}.battle-fighter .portrait{background-image:url('./assets/warriors-atlas.png');border:0;box-shadow:none}.battle-fighter.red .portrait{background-color:#9d2d26}.battle-fighter.black .portrait{background-color:#23282a}.battle-fighter .fallback{display:none}.battle-fighter b{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);white-space:nowrap;color:#f1dfbe;font:700 13px 'Noto Serif TC';letter-spacing:.1em}.battle-impact{z-index:2;text-align:center;transform:scale(.5);opacity:0}.battle-scene.active .battle-impact{animation:impactIn .3s .3s forwards}.battle-impact span{display:grid;place-items:center;width:58px;height:58px;margin:auto;border:2px solid #e8b754;border-radius:50%;background:#791e18;color:#ffe4a3;font:900 27px 'Noto Serif TC';box-shadow:0 0 30px #dd3628}.battle-impact strong,.battle-impact small{display:block}.battle-impact strong{margin-top:10px;color:#ff604c;font:900 clamp(20px,3vw,38px) 'Noto Serif TC';text-shadow:0 3px #5b0c09}.battle-impact small{color:#bba47f;font-size:10px;letter-spacing:.2em}.battle-caption{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:#e8c57e;font:700 12px 'Noto Serif TC';letter-spacing:.18em}
.message{text-align:center;margin:13px auto 7px;min-height:22px;color:#d9c9aa;font:600 13px 'Noto Serif TC';letter-spacing:.06em}.legend{display:flex;justify-content:center;gap:18px;font-size:10px;color:#8e806c}.legend i{display:inline-block;width:9px;height:9px;margin-right:5px;vertical-align:-1px}.move-mark{background:#28765e}.attack-mark{background:#a42b25}.selected-mark{border:2px solid #d2a64b;border-radius:50%}
.army-panel{margin-top:72px;border-top:2px solid;padding-top:13px}.black-panel{border-color:#697477}.red-panel{border-color:#a83b31}.army-title{display:flex;gap:10px;align-items:center;margin-bottom:14px}.army-title>span{display:grid;place-items:center;width:40px;height:40px;border:1px solid currentColor;border-radius:50%;font:900 22px 'Noto Serif TC'}.black-panel .army-title{color:#acb5b5}.red-panel .army-title{color:#dc6654}.army-title small,.army-title strong{display:block}.army-title small{font-size:9px;letter-spacing:.2em;color:#837868}.army-title strong{font:700 18px 'Noto Serif TC';letter-spacing:.15em}.roster{display:grid;gap:7px}.roster-item{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;padding:7px 8px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);font-size:11px}.roster-item .mini{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#2b241d}.roster-item strong{display:block}.roster-item small{color:#897d6c}.roster-item em{font-style:normal;color:#d2a64b}.roster-item.lost{opacity:.28;text-decoration:line-through}
.version-credit{max-width:1480px;margin:22px auto 0;padding-top:13px;border-top:1px solid rgba(210,166,75,.18);color:#83745e;text-align:center;font:600 10px 'Noto Serif TC';letter-spacing:.14em}
.modal{position:fixed;z-index:30;inset:0;display:none;place-items:center;padding:20px;background:rgba(10,8,6,.78);backdrop-filter:blur(8px)}.modal.open{display:grid}.modal-card{position:relative;width:min(680px,94vw);padding:42px;background:#211b15;border:1px solid #8b6b3c;box-shadow:0 30px 80px #000;text-align:center}.modal-card::before{content:'';position:absolute;inset:8px;border:1px solid rgba(210,166,75,.2);pointer-events:none}.eyebrow{color:#b68b47;font-size:10px;letter-spacing:.35em}.modal-card h2{margin:8px 0 12px;font:900 36px 'Noto Serif TC';letter-spacing:.14em}.modal-card>p{color:#ac9c84}.mode-options{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:30px 0 20px}.mode-options button{position:relative;padding:25px 14px;border:1px solid #66553e;background:#17130f;color:#eee2ca;cursor:pointer}.mode-options button:hover{border-color:#d2a64b;transform:translateY(-2px)}.mode-options b,.mode-options span{display:block}.mode-options b{font:700 18px 'Noto Serif TC'}.mode-options span{margin-top:5px;color:#998a76;font-size:12px}.mode-options em{position:absolute;right:8px;top:8px;background:#982c26;color:#ffe9ca;padding:2px 6px;font-size:9px;font-style:normal}.modal-card>small{color:#756b5e}.close-btn{position:absolute;z-index:2;right:16px;top:12px;border:0;background:none;color:#b6a88f;font-size:28px;cursor:pointer}.rules-card{text-align:left}.rules-card h2{text-align:center}.rules-card>.eyebrow{display:block;text-align:center}.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.rules-grid article{padding:14px;border-left:2px solid #a5362f;background:#17130f}.rules-grid b,.rules-grid span{display:block}.rules-grid b{font:700 16px 'Noto Serif TC';color:#ead8b7}.rules-grid span{color:#c89b4d;font-size:10px;margin:3px 0}.rules-grid p{font-size:12px;color:#958875;margin:7px 0 0}.rules-note{padding:12px;background:#33291e;border:1px solid #5b4831;font-size:12px}.end-card{width:min(480px,92vw)}.winner-seal{display:grid;place-items:center;margin:0 auto 12px;width:65px;height:65px;border:2px solid #ba4035;border-radius:50%;font:900 33px 'Noto Serif TC';color:#e15a4b}.primary-btn{border:1px solid #d2a64b;background:#8e2924;color:#fff0d1;padding:11px 28px;cursor:pointer;font-weight:700}
@keyframes pulse{50%{opacity:.48}}@keyframes arrive{from{opacity:0;transform:scale(.65)}}@keyframes hit{20%,60%{transform:translateX(-6px);filter:brightness(2.4) sepia(1) saturate(4)}40%,80%{transform:translateX(5px)}}@keyframes attackLunge{45%{transform:translateY(-4px) scale(1.18);filter:drop-shadow(0 0 12px #ffce69)}}@keyframes die{to{transform:scale(.4) rotate(18deg);opacity:0}}@keyframes hpWarning{50%{filter:brightness(1.8)}}@keyframes damageFloat{0%{opacity:0;transform:translate(-50%,12px) scale(.65)}25%{opacity:1;transform:translate(-50%,-3px) scale(1.2)}100%{opacity:0;transform:translate(-50%,-34px) scale(.9)}}@keyframes fighterIn{to{opacity:1;transform:translateX(0)}}@keyframes fighterInRight{to{opacity:1;transform:translateX(0)}}@keyframes defenderHit{50%{transform:translateX(10px);filter:brightness(2) sepia(1) drop-shadow(0 12px 12px #000)}}@keyframes impactIn{to{opacity:1;transform:scale(1)}}@keyframes slashFlash{50%{opacity:1;box-shadow:0 0 18px #fff}}
@media(max-width:1100px){.battle-layout{grid-template-columns:auto}.army-panel{display:none}.board-stage{max-width:100%}}
@media(max-width:700px){:root{--cell:calc((100vw - 42px)/9)}.game-shell{padding:10px 8px}.topbar{padding:4px 6px 10px}.brand p{display:none}.brand h1{font-size:17px}.seal{width:37px;height:37px}.text-btn{padding:7px 9px}.battle-layout{margin-top:5px}.board-stage{width:100%}.status-bar{grid-template-columns:1fr 1.2fr 1fr}.skill-btn{padding:5px 7px;font-size:10px}.board-wrap{padding:18px 12px 16px}.coordinate.cols{left:12px;right:12px;top:2px}.frontline{left:12px;right:12px;top:calc(18px + var(--cell)*4.5 - 10px);height:20px}.hp-text{display:none}.hp-wrap{height:6px;bottom:-2px}.portrait{border-width:2px}.battle-scene{inset:18px 12px 16px}.battle-fighter{width:25vw}.battle-fighter b{font-size:10px;bottom:-22px}.battle-impact span{width:42px;height:42px;font-size:20px}.battle-caption{bottom:10px;font-size:9px}.mode-card{padding:34px 22px}.mode-options{grid-template-columns:1fr}.rules-card{padding:34px 22px}.rules-grid{grid-template-columns:1fr}.modal-card h2{font-size:29px}}