:root{color-scheme:dark;--void:#090e0c;--panel:#0e1512;--brass:#a57d25;--paper:#cec5a4;--muted:#8f9278;--human:#537d95;--orc:#8a4e3f;--plain:#a08852;--forest:#344c2e;--hill:#70634e;--road:#806a43;--water:#315f57;--ui-scale:1}
html,body{width:100%;height:100%;overflow:hidden}.shell{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--ui-scale));transform-origin:center center}.title-screen{overflow:hidden!important}
.shell{width:1180px!important;max-width:none}.shell header{height:82px;display:grid;grid-template-columns:270px 1fr 145px;gap:16px}.brand{min-width:0}.top-hud{display:grid;grid-template-columns:125px 255px minmax(190px,1fr);align-items:center;gap:8px}.top-hud #cpLabel,.top-hud #vpLabel{display:grid;place-items:center;min-height:52px;padding:6px 12px;border:1px solid #c69a3d;background:#171c14;color:#f3d77f;font-size:16px;font-weight:900;line-height:1.15;text-align:center;white-space:pre-line}.top-hud #armyLabel{color:#8f9278;font-size:12px;text-align:center}.turn{margin:0;text-align:right}.game-layout{grid-template-columns:270px 840px;gap:20px}.panel{width:270px}.panel .unit-card{min-height:470px}.rules-legend{line-height:2}.rules-legend b{display:inline-grid;place-items:center;width:27px;height:27px;border:1px solid #8d7949;border-radius:50%}#undoBtn{width:54px!important;min-width:54px!important;height:54px;padding:0;font-size:29px;line-height:1}footer>div{gap:6px}footer>div button:not(#undoBtn){min-width:155px}@media(max-width:1180px){body{min-width:1200px}.shell{width:1180px!important}.game-layout{grid-template-columns:270px 840px}.panel{width:270px}}
#undoBtn{min-width:155px;background:#3e4934}button:disabled{cursor:not-allowed;opacity:.42;background:#252b25;color:#777}footer>div{gap:6px}footer>div button{min-width:155px}
.title-screen{background:linear-gradient(180deg,#05080730 0,#070b095c 45%,#050806a8 100%),url("assets/stratagem-game-cover.png") center 44%/cover no-repeat!important}.title-card{width:min(650px,92vw)!important;padding:34px 44px 32px!important;background:linear-gradient(145deg,#101914ad,#080d0b94)!important}
.title-emblem{display:block;width:94px;height:94px;object-fit:contain;margin:0 auto 13px;filter:drop-shadow(0 5px 10px #000a)}
.title-screen{position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:auto;padding:28px;background:radial-gradient(circle at 50% 38%,#263126 0,#101813 38%,#050907 78%);opacity:1;visibility:visible;transition:opacity .55s ease,visibility .55s ease}.title-screen::before{content:"";position:absolute;inset:16px;border:1px solid #9f7929;box-shadow:inset 0 0 0 4px #080d0a,inset 0 0 0 5px #58461f;pointer-events:none}.title-screen.is-hidden{opacity:0;visibility:hidden;pointer-events:none}.title-card{position:relative;width:min(690px,92vw);padding:48px 44px 40px;text-align:center;border:1px solid #9f7929;background:linear-gradient(145deg,#101914ed,#080d0bed);box-shadow:0 26px 80px #000c,inset 0 0 50px #9b76200c}.banner-mark{width:56px;height:80px;margin:0 auto 22px;border:2px solid #bc9439;border-top-width:6px;background:linear-gradient(90deg,#536d46,#314532);clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%);position:relative}.banner-mark span{position:absolute;left:50%;top:20px;width:22px;height:22px;transform:translateX(-50%) rotate(45deg);border:2px solid #dfbd66;box-shadow:0 0 14px #c99a3544}.title-kicker{margin:0 0 8px;color:#8f9855;font-size:14px;font-weight:700;letter-spacing:.28em}.title-card h1{margin:0;color:#e1d4aa;font:700 clamp(34px,6vw,67px)/.94 Georgia,serif;letter-spacing:.045em;text-shadow:0 2px #241b0b,0 0 20px #c49a3933}.title-card h1 span{color:#cba64d;font-size:.72em;letter-spacing:.12em}.title-rule{width:min(350px,70%);height:1px;margin:28px auto 22px;background:linear-gradient(90deg,transparent,#ba8e32,transparent)}.title-copy{margin:0 0 30px;color:#a7aa91;font-size:15px;letter-spacing:.07em}.title-card #startBtn{min-width:min(320px,100%);border:1px solid #c59a3b;background:#536439;padding:15px 24px;color:#fff0bd;font-size:16px;letter-spacing:.08em;box-shadow:0 7px 22px #0008}.title-card #startBtn:hover,.title-card #startBtn:focus-visible{background:#687a49}.audio-note{margin:18px 0 0;color:#74796c;font-size:11px}#musicBtn{min-width:120px;background:#273529;color:#b9b69c;font-size:12px}#musicBtn[aria-pressed="false"]{background:#242724;color:#777b70}@media(max-width:1180px){footer>div{gap:4px}#musicBtn{min-width:100px}}@media(max-width:800px){.title-screen{padding:14px}.title-screen::before{inset:7px}.title-card{padding:34px 22px 28px}.banner-mark{width:44px;height:64px;margin-bottom:16px}#musicBtn{min-width:72px}}

*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#060a08;color:var(--paper);font:16px/1.45 "Courier New",monospace;display:grid;place-items:center;padding:8px}.shell{width:min(1270px,100%);background:var(--void);border:1px solid var(--brass)}header{height:68px;display:flex;align-items:center;justify-content:space-between;padding:8px 22px;background:#090e0c}h1{font-size:22px;letter-spacing:.04em;margin:0;color:#d3c59c;text-shadow:0 0 2px #c7a660}header p{margin:2px 0 0;color:#9aa04d;letter-spacing:.05em;font-size:14px}.turn{font-size:15px;font-weight:700;color:#797e6b;margin-right:34%}.game-layout{display:grid;grid-template-columns:290px 840px;gap:30px;padding:0 14px}.panel{height:560px;padding:18px;background:#0c1310;border:1px solid var(--brass)}h2,h3{color:#d2b56e;letter-spacing:.04em;margin-top:0}.meters{display:grid;grid-template-columns:.8fr 1.4fr;gap:8px;padding:8px 0 12px;border-bottom:1px solid var(--brass)}#cpLabel,#vpLabel{display:grid;place-items:center;min-height:66px;padding:8px;border:1px solid #c69a3d;background:#171c14;color:#f3d77f;font-size:19px;font-weight:900;line-height:1.25;text-align:center;white-space:pre-line;text-shadow:0 0 8px #b98a3144}#armyLabel{grid-column:1/-1;color:#797e6b;font-size:12px;letter-spacing:.03em;text-align:center}.unit-card{min-height:284px;padding:18px 0;color:#9d9988;white-space:pre-line;font-weight:400;font-size:14px;line-height:1.65}.legend{border-top:1px solid #66542b;padding-top:15px;color:#858575}.legend h3{font-size:14px;color:#9b8b61}.legend p{display:inline-block;margin:.25rem 10px .25rem 0;font-size:12px}.legend b{display:inline-grid;place-items:center;width:25px;height:25px;border:1px solid #8d7949;border-radius:50%;margin-right:4px}.board-wrap{width:840px;overflow:hidden;background:#111619}canvas{display:block;width:840px;height:560px;touch-action:none}footer{height:54px;margin:14px 26px 10px 304px;display:grid;grid-template-columns:1fr auto auto;align-items:center;border:1px solid var(--brass);background:#0c1210;color:#9b9787}footer>span{padding:0 20px;font-size:14px}#rowsLabel{color:#666b5d;font-size:12px}footer>div{height:100%;display:flex;gap:14px;background:#090e0c}button{min-width:205px;border:0;border-left:1px solid #8e712d;background:#4c5d35;color:#eadca8;padding:10px 18px;font:700 15px "Courier New",monospace;cursor:pointer}button:hover,button:focus-visible{background:#607044;outline:2px solid #e6c87d;outline-offset:-3px}dialog{max-width:650px;background:#101813;color:#cec7b3;border:2px solid var(--brass);padding:28px;font-family:"Courier New",monospace;box-shadow:0 20px 60px #000}dialog::backdrop{background:#000c}.close{float:right;font-size:22px;padding:2px 10px;min-width:0}@media(max-width:1180px){body{display:block}.shell{min-width:0}.game-layout{grid-template-columns:270px minmax(620px,840px);gap:12px}.panel{width:270px}.board-wrap,canvas{width:100%}footer{margin-left:296px}}@media(max-width:800px){body{padding:0}.game-layout{display:block;padding:0}.panel{width:100%;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px}.panel h2,.meters{grid-column:1/-1}.unit-card{min-height:100px}.legend{display:none}.board-wrap{width:100%;overflow:auto}canvas{width:840px;height:560px}footer{margin:8px;grid-template-columns:1fr auto}#rowsLabel{display:none}button{min-width:0;padding:8px;font-size:12px}}