@font-face{font-family:GameSerif;src:local("STSong"),local("SimSun");font-display:swap}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#080f1a;color:#f5eddf;font-family:"Microsoft YaHei","PingFang SC",sans-serif}button{font:inherit;cursor:pointer}button:focus-visible{outline:2px solid #f6d38e;outline-offset:3px}::selection{background:#d5a765;color:#101827}.game-shell{height:100dvh;min-height:670px;display:flex;flex-direction:column;overflow:hidden;background:#101827}.topbar{height:76px;flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 32px;background:linear-gradient(180deg,#1b2635,#121b29);border-bottom:1px solid #bd9a6045;z-index:3;box-shadow:0 7px 24px #0007}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:43px;height:43px;border:1px solid #d9ae6e;border-radius:50%;display:grid;place-items:center;color:#e9bd78;font-size:27px;background:#e6bb7a12;box-shadow:0 0 24px #e6bb7a24}.brand h1{font-family:GameSerif,serif;font-size:25px;letter-spacing:.14em;margin:0;line-height:1.12;font-weight:700}.brand span:last-child{font-size:9px;letter-spacing:.25em;color:#b6a996}.chapter{text-align:center;display:flex;align-items:center;gap:13px}.chapter span{font-size:11px;letter-spacing:.15em;color:#d3a56d}.chapter strong{font-family:GameSerif,serif;font-size:20px;letter-spacing:.14em}.chapter small{font-size:11px;color:#b4aa9c}.top-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px}.turn-badge{color:#ead9b8;border:1px solid #cba46c65;padding:7px 15px;border-radius:3px;background:#c8a56a12;font-size:12px;letter-spacing:.06em}.icon-button{width:34px;height:34px;border:1px solid #d0b17b56;background:#263246;color:#e5cc9e;border-radius:3px;font-size:18px}.icon-button:hover{background:#36455d}.battlefield{position:relative;min-height:0;flex:1;isolation:isolate;overflow:hidden;background:#162339}.scenery,.scenery-shade,#battleCanvas{position:absolute;inset:0;width:100%;height:100%}.scenery{background:url('twilight-valley.png') center 42%/cover no-repeat;filter:saturate(.86)}.scenery-shade{background:linear-gradient(180deg,#0d172688 0%,#0c182a44 35%,#08121dd0 100%),linear-gradient(90deg,#07111d9c,transparent 24%,transparent 76%,#07111d96)}#battleCanvas{touch-action:none;cursor:crosshair}.field-top,.field-bottom{position:absolute;left:22px;right:22px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.field-top{top:20px}.field-bottom{bottom:14px;justify-content:flex-end;gap:16px}.objective{display:flex;align-items:center;gap:11px;border:1px solid #bda57c76;background:#0d1926dc;padding:10px 13px;min-width:220px;box-shadow:0 8px 24px #0005}.objective-icon{font-size:29px;color:#e9bd78;line-height:1}.objective strong{font-size:12px;color:#f3d9a9;letter-spacing:.12em}.objective p{font-size:11px;color:#d6d4cf;margin:3px 0 0}.objective b{margin-left:auto;color:#f3d9a9;font-size:13px;white-space:nowrap}.hint{padding:10px 16px;border:1px solid #dbc59d54;background:#0c1928cc;color:#f5e9d2;font-size:12px;max-width:330px;text-align:right}.legend{font-size:10px;color:#e3e0da;background:#08121eb5;padding:5px 8px;display:flex;gap:6px;align-items:center}.legend i{display:inline-block;width:8px;height:8px;transform:rotate(45deg)}.move-dot{background:#65d6ec}.attack-dot{background:#ff7885}.forest-dot{background:#75bb88}.height-dot{background:#eac688}.battle-callout{position:absolute;left:50%;top:15%;transform:translate(-50%,-8px);text-align:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;text-shadow:0 3px 14px #000}.battle-callout.show{opacity:1;transform:translate(-50%,0)}.battle-callout span{display:block;color:#f3cc87;font-size:12px;letter-spacing:.3em}.battle-callout strong{display:block;color:white;font-family:GameSerif,serif;font-size:36px;letter-spacing:.13em}.command-deck{height:186px;flex:none;display:grid;grid-template-columns:minmax(420px,1.18fr) minmax(270px,.9fr) minmax(230px,.65fr);background:linear-gradient(180deg,#142131,#0d1724);border-top:1px solid #d2ae795e;box-shadow:0 -8px 30px #0008;z-index:3}.roster{display:flex;gap:8px;padding:19px 19px 20px 26px;min-width:0}.roster-card{position:relative;flex:1;min-width:0;text-align:left;background:#203045;border:1px solid #72849a66;padding:10px 8px 9px;overflow:hidden;color:#f3eadb;transition:background .15s,border-color .15s,transform .15s}.roster-card:hover{background:#2b3d51;transform:translateY(-2px)}.roster-card.selected{background:#364053;border-color:#f0c78b;box-shadow:inset 0 0 0 1px #f0c78b42,0 7px 18px #0005}.roster-card.acted{opacity:.58}.roster-card.dead{filter:grayscale(1);opacity:.45}.roster-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 10%,var(--accent),transparent 50%);opacity:.13;pointer-events:none}.roster-top{display:flex;align-items:flex-start;gap:8px}.portrait{width:42px;height:43px;flex:none;border:1px solid #d5be9877;background:#101c2b;border-radius:2px;position:relative;overflow:hidden}.portrait:before{content:"";position:absolute;left:12px;top:7px;width:18px;height:17px;border-radius:50% 50% 43% 43%;background:var(--face)}.portrait:after{content:"";position:absolute;left:7px;top:24px;width:29px;height:25px;border-radius:50% 50% 0 0;background:var(--accent);box-shadow:inset 0 5px #ffffff31}.portrait i{position:absolute;z-index:1;left:9px;top:4px;width:25px;height:10px;background:var(--hair);clip-path:polygon(0 70%,18% 0,44% 40%,73% 0,100% 70%,88% 100%,12% 100%)}.roster-name{display:block;font-family:GameSerif,serif;font-size:16px;letter-spacing:.04em;white-space:nowrap}.roster-role{display:block;font-size:10px;color:#d7c8af;margin-top:4px;white-space:nowrap}.bar{height:4px;background:#0b121d;margin-top:10px;overflow:hidden}.bar span{display:block;height:100%;background:#e0bd79;transition:width .3s}.roster-meta{display:flex;justify-content:space-between;font-size:10px;color:#d9d4c8;margin-top:6px}.unit-detail{border-left:1px solid #a1a69c36;border-right:1px solid #a1a69c36;padding:18px 20px;min-width:0}.empty-detail{height:100%;display:grid;place-items:center;color:#afa99d;font-family:GameSerif,serif;letter-spacing:.08em}.detail-head{display:flex;justify-content:space-between;gap:10px}.detail-head h2{font-family:GameSerif,serif;font-size:21px;letter-spacing:.08em;margin:0}.detail-head span{font-size:11px;color:#e3bd83;white-space:nowrap}.detail-sub{font-size:11px;color:#c7c1b6;margin:5px 0 11px}.stats{display:flex;gap:17px;font-size:11px;color:#d3cec5}.stats b{font-size:14px;color:#f3e8d1;margin-left:4px}.troop-row{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:11px;color:#dfd6c5}.troop-track{height:6px;background:#0a121c;flex:1;max-width:140px}.troop-track i{display:block;height:100%;background:linear-gradient(90deg,#68bbbe,#a8eee1);transition:width .3s}.trait{margin:8px 0 0;color:#c9b99c;font-size:10px;line-height:1.4}.command-actions{padding:19px 24px;display:flex;flex-direction:column;justify-content:space-between;gap:11px}.skill-button,.end-button{width:100%;border-radius:2px;display:flex;align-items:center;text-align:left}.skill-button{height:67px;padding:0 12px;gap:11px;background:#334259;border:1px solid #b9a78283;color:#f4e7ce}.skill-button:hover:not(:disabled){background:#45546b}.skill-button:disabled{opacity:.52;cursor:not-allowed}.skill-button>span:first-child{font-size:26px;color:#f4c979}.skill-button strong{display:block;font-size:12px}.skill-button small{display:block;color:#d2c7b6;font-size:10px;margin-top:3px}.skill-button em{margin-left:auto;font-size:10px;font-style:normal;border:1px solid #dcc18e77;padding:3px 5px;white-space:nowrap}.end-button{height:52px;justify-content:space-between;background:linear-gradient(100deg,#bc8d53,#e4b774);border:1px solid #f1d49c;color:#1b2734;padding:0 17px;font-weight:700;letter-spacing:.1em;box-shadow:0 5px 17px #0004}.end-button:hover:not(:disabled){filter:brightness(1.1)}.end-button:disabled{opacity:.6;cursor:wait}.end-arrow{font-size:21px}.modal-backdrop{position:fixed;inset:0;z-index:10;background:#07101bdc;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(8px)}.modal-backdrop.visible{display:flex}.intro-panel,.small-panel,.result-panel{position:relative;border:1px solid #e2bf8180;box-shadow:0 24px 90px #000b,inset 0 0 80px #e5af4711;background:linear-gradient(145deg,#1a293c,#111b2a);text-align:center;color:#f6ecd9}.intro-panel{width:min(470px,100%);padding:32px 44px 36px}.intro-panel:before,.result-panel:before{content:"";position:absolute;inset:8px;border:1px solid #e2bf8133;pointer-events:none}.intro-emblem,.result-emblem{width:66px;height:66px;border:1px solid #e8c483;margin:0 auto 17px;border-radius:50%;display:grid;place-items:center;color:#f0c77f;font-size:40px;box-shadow:0 0 30px #eac27430}.intro-chapter,#resultEyebrow{font-size:11px;color:#d2af7b;letter-spacing:.25em}.intro-panel h2,.small-panel h2,.result-panel h2{font:normal 34px GameSerif,serif;letter-spacing:.1em;margin:10px 0 13px}.intro-panel p,.small-panel p,.result-panel p{color:#ddd2c3;font-size:13px;line-height:1.9;margin:0 0 19px}.intro-rules{text-align:left;padding:13px 0 18px;border-top:1px solid #d7ba8640;border-bottom:1px solid #d7ba8640;margin-bottom:23px}.intro-rules div{display:flex;gap:13px;align-items:center;padding:5px 0;color:#e8decd;font-size:12px}.intro-rules b{font-size:10px;color:#e6bd7b}.primary-button{min-height:46px;background:linear-gradient(100deg,#bc8b50,#e3ba7c);color:#172336;border:1px solid #f2d397;padding:0 23px;font-weight:700;letter-spacing:.1em;box-shadow:0 8px 22px #0005}.primary-button:hover{filter:brightness(1.12)}.primary-button span{margin-left:25px}.small-panel{width:min(490px,100%);padding:32px;text-align:left}.small-panel h2{font-size:26px}.small-panel p{font-size:13px}.small-panel .primary-button{margin-top:10px}.close-button{position:absolute;right:14px;top:9px;border:0;background:transparent;color:#e9d3aa;font-size:27px}.result-panel{width:min(440px,100%);padding:40px 36px}.result-stats{display:flex;justify-content:center;gap:24px;margin:20px 0 25px;color:#dfbb7e;font-size:12px}.result-stats b{display:block;font-size:22px;color:white;margin-bottom:4px}
@media(max-width:980px){.chapter small{display:none}.command-deck{grid-template-columns:1.2fr 1fr;height:185px}.command-actions{grid-column:1/3;display:flex;flex-direction:row;padding:0 16px 13px}.skill-button,.end-button{height:44px}.roster{padding:12px}.unit-detail{padding:13px}.trait{display:none}.command-deck{height:220px}.battle-callout strong{font-size:28px}}
@media(max-width:680px){.game-shell{height:100dvh;min-height:620px}.topbar{height:58px;padding:0 12px;grid-template-columns:1fr auto}.brand-mark{width:32px;height:32px;font-size:20px}.brand h1{font-size:18px}.brand span:last-child,.chapter{display:none}.turn-badge{font-size:10px;padding:6px 8px}.icon-button{width:30px;height:30px}.top-actions{gap:5px}.battlefield{min-height:320px}.field-top{left:8px;right:8px;top:8px}.objective{min-width:0;padding:5px 7px;gap:6px}.objective-icon{font-size:20px}.objective strong{font-size:10px}.objective p{font-size:9px}.objective b{font-size:10px}.hint{position:absolute;top:48px;right:0;padding:5px 7px;max-width:170px;font-size:10px}.field-bottom{left:8px;right:8px;bottom:6px;justify-content:center;gap:3px}.legend{font-size:8px;padding:3px 4px}.legend:nth-child(n+3){display:none}.command-deck{height:240px;display:flex;flex-direction:column}.roster{height:82px;flex:none;gap:4px;padding:6px 8px}.roster-card{padding:5px}.portrait{width:27px;height:29px}.portrait:before{left:8px;top:4px;width:12px;height:12px}.portrait:after{left:4px;top:16px;width:19px}.portrait i{left:6px;top:2px;width:17px}.roster-top{gap:4px}.roster-name{font-size:12px}.roster-role{font-size:8px;margin-top:1px}.bar{margin-top:4px}.roster-meta{font-size:8px;margin-top:2px}.unit-detail{height:90px;flex:none;border-left:0;border-right:0;border-top:1px solid #ffffff1b;padding:7px 12px}.detail-head h2{font-size:17px}.detail-sub{margin:1px 0 5px;font-size:10px}.stats{gap:12px;font-size:10px}.stats b{font-size:11px}.troop-row{margin-top:5px}.command-actions{padding:0 8px 7px;flex:1;gap:6px}.skill-button,.end-button{height:47px}.skill-button{padding:0 5px;gap:5px}.skill-button>span:first-child{font-size:16px}.skill-button strong{font-size:10px}.skill-button small{font-size:8px}.skill-button em{display:none}.end-button{padding:0 9px;font-size:11px;max-width:120px}.intro-panel{padding:25px 25px 28px}.intro-panel h2{font-size:28px}}
/* Readable controls in a narrow panel. */
.brand-mark,.intro-emblem,.result-emblem{box-shadow:none}
.intro-panel,.result-panel{box-shadow:0 24px 90px #000b}
.bar span,.troop-track i{transition:none}
@media(max-width:680px){.turn-badge,.objective strong,.objective b,.hint{font-size:11px}.objective p,.roster-role,.roster-meta,.detail-sub,.stats,.troop-row,.skill-button small{font-size:10px}.skill-button strong{font-size:11px}.legend{font-size:9px}}