:root{color-scheme:dark;font:14px/1.5 system-ui,sans-serif;color:#e7e9da;background:#101714}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 30px;background:#1a2820;border-bottom:1px solid #425242}h1{font:32px Georgia,serif;margin:3px 0}.eyebrow{font-size:10px;letter-spacing:2px;color:#bda772}nav{display:flex;gap:24px}a{color:#d9bc7c}button,select,input,.file{font:inherit;color:inherit;background:#26362a;border:1px solid #465744;border-radius:5px;padding:7px 10px}button,.file{cursor:pointer}button:hover,.file:hover{background:#3b4c38}button:disabled{opacity:.4;cursor:default}.active{border-color:#c0a462;background:#45513a}label{display:block}.bar{display:flex;gap:12px;align-items:center;padding:12px 30px;border-bottom:1px solid #344536}#status{flex:1;color:#b5bfae;font-size:12px}main{display:grid;grid-template-columns:260px minmax(0,1fr)}aside{padding:22px;border-right:1px solid #344536;overflow:auto;height:calc(100vh - 194px);min-height:520px}aside>label{margin-top:12px}aside>select,aside>input{width:100%;margin-top:6px}aside .file{text-align:center;margin-top:10px}h2{font:22px Georgia,serif;margin:22px 0 8px}p{color:#acb9a7;font-size:13px}#description{min-height:42px}#minimap{width:216px;max-width:100%;height:auto;cursor:crosshair;image-rendering:pixelated;border:1px solid #6b7556}.hint{color:#96a88e;font-size:11px}.layers{border-top:1px solid #344536;padding:14px 0}.layers label{padding:5px 0}.layers input{accent-color:#d4bc78}details{margin-top:20px;color:#abbba5;font-size:12px}summary{cursor:pointer}.map-area{padding:16px 20px;min-width:0}.tools{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}#zoomLabel{min-width:46px;text-align:center}#viewport{height:calc(100vh - 295px);min-height:400px;background:#090e0c;border:1px solid #495a43;overflow:hidden;position:relative;border-radius:6px}#mapCanvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none;outline:0}#mapCanvas:focus-visible{outline:2px solid #d3b66c;outline-offset:-3px}.readout{display:flex;gap:18px;flex-wrap:wrap;margin:12px 0;color:#c9d4c0;font-size:12px}#cellInfo{color:#96a88e}#mapStats{margin:8px 0;font-size:11px}pre{white-space:pre-wrap}.raster-area{padding:20px;min-width:0}.rasterStage{overflow:auto;min-height:420px;border:1px solid #44563f;padding:20px;background:#1c2820}.rasterStage canvas{image-rendering:pixelated}#rasterFrame{width:72px}#rasterList{margin-top:14px}#rasterList button{display:block;text-align:left;width:100%;border:0;background:none;padding:6px}#rasterList button.active{background:#3b4d35}#tileStrip{display:flex;gap:6px;overflow:auto;margin-top:16px}#tileStrip button{flex-shrink:0}footer{font-size:11px;color:#788f74;padding:14px 30px;border-top:1px solid #344536}@media(max-width:760px){header{padding:16px;align-items:flex-start}h1{font-size:26px}nav{flex-direction:column;gap:6px;font-size:12px}.bar{padding:10px;flex-wrap:wrap}#status{flex-basis:100%;order:5}main{display:block}aside{height:auto;min-height:0;border-right:0;padding:16px}#minimap{float:right;width:120px;margin-top:14px}.layers{margin-top:14px}details{clear:both}.map-area{padding:12px}#viewport{height:60vh;min-height:350px}.readout{display:block}.readout span{display:block}#rasterList{max-height:140px;overflow:auto}}

.setup{border:1px solid #506041;padding:12px;margin-top:15px;border-radius:6px}.setup label{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.setup input{width:125px}.setup button{width:100%;margin:4px 0}#setupNote{font-size:11px}.playerGroup{padding:9px 0;border-top:1px solid #344536}.playerGroup strong{font-size:12px}.playerGroup button{display:block;text-align:left;width:100%;font-size:11px;margin-top:5px}#selectionCard{padding:13px;background:#263628;border:1px solid #718052;border-radius:6px;margin-top:12px}#selectionCard p{margin:4px 0}aside{min-width:280px}main{grid-template-columns:280px minmax(0,1fr)}@media(max-width:760px){main{display:block}}

#selectionCard{position:absolute;bottom:12px;left:12px;right:12px;max-width:650px;background:#1b2d22f0;pointer-events:none}#selectionCard p{font-size:12px}

#economyPanel{display:flex;gap:8px 16px;flex-wrap:wrap;padding:10px 12px;margin-bottom:12px;border:1px solid #53694b;border-radius:6px;background:#1c2c20;font-size:12px}#economyPanel strong{color:#e3cb91}#economyPanel div{white-space:nowrap}

dialog{background:#1b2d22;color:#e7e9da;border:1px solid #9e8b5e;border-radius:10px;width:min(720px,94vw);max-height:90vh;overflow:auto}dialog::backdrop{background:#000a}#closeTown{float:right}#townRecruit>div{border-top:1px solid #465744;padding:8px 0}#townRecruit input{width:90px;margin-right:10px}

#townBuild>div,#townTransfer>div{border-top:1px solid #465744;padding:7px 0}#townBuild p,#townTransfer p{margin:5px 0}#townTransfer input{width:90px;margin-right:10px}#townDialog details{margin:12px 0}#townDialog summary{font-size:15px;color:#dfcf9b}

#closeTown{position:sticky;top:0;z-index:2}

/* v20 tactical battle sandbox */
.tactics-board{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:3px;margin:10px 0;padding:5px;background:#18251c;border:1px solid #64765d;border-radius:5px}
.tactic-cell{min-width:0;aspect-ratio:1/1;padding:2px;white-space:pre-line;overflow:hidden;font-size:clamp(8px,1.3vw,11px);line-height:1.15;background:#b9c49a;color:#172116;border:1px solid #748463;border-radius:2px}
.tactic-cell.occupied{font-weight:700;border:2px solid #26301e}
.tactic-cell.left{background:#c7d9ee;color:#172d4b}
.tactic-cell.right{background:#e7c6a5;color:#512d1a}
.tactics-actions{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
#tacticsLog{max-height:190px;overflow:auto;white-space:pre-wrap;background:#101710;color:#d9e5ce;padding:8px;border-radius:4px;font-size:12px}

/* v21: tactical terrain */
.tactic-cell.terrain{background:#475044;color:#d8d6ba;border-color:#69725e;cursor:not-allowed}
.tactic-cell:focus-visible{outline:2px solid #f0d68b;outline-offset:1px}
#tacticsSandbox .file{display:inline-block;margin:4px 3px 4px 0}

/* v23: original Heroes I monster sprites and battlefield presentation */
#tacticsSandbox{border:1px solid #8b744a;background:linear-gradient(180deg,#ede2bd,#d8c69a);padding:10px;border-radius:6px;color:#2a261d}
#tacticsSandbox>summary{font-weight:800;color:#382d1a}
.tactics-board{grid-template-columns:repeat(9,minmax(0,1fr));gap:3px;padding:8px;background:linear-gradient(145deg,#2c4434,#17281e 55%,#3c4b2d);border:3px ridge #a68b53;box-shadow:inset 0 0 0 2px #18241b,0 4px 12px #171c1680}
.tactic-cell{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;min-height:48px;padding:2px;border:1px solid #9a9c68;border-radius:2px;background:repeating-linear-gradient(135deg,#7d9160 0 8px,#879a68 8px 16px);box-shadow:inset 0 0 0 1px #b7bc82;color:#fff;transition:filter .12s,transform .12s;}
.tactic-cell:not(:disabled):hover{filter:brightness(1.14);outline:2px solid #f6d77d;outline-offset:-2px;z-index:2}
.tactic-cell.occupied{background:linear-gradient(145deg,#9aa977,#6d8055);border:1px solid #e4d7a2;overflow:visible}
.tactic-cell.left{background:linear-gradient(145deg,#708fa6,#3e5e79);border-color:#b6d8ef}
.tactic-cell.right{background:linear-gradient(145deg,#a77a59,#6e4432);border-color:#edc49c}
.creature-sprite{display:block;max-width:94%;max-height:86%;width:auto;height:auto;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(1px 2px 1px #182018a8);pointer-events:none;z-index:1}
.stack-count{position:absolute;bottom:1px;right:2px;z-index:3;min-width:16px;padding:1px 3px;border:1px solid #e7d9a8;border-radius:3px;background:#191c17eF;color:#fff7d5;font-size:clamp(9px,1.1vw,12px);font-weight:800;text-shadow:1px 1px #000;line-height:1.15}
.side-mark{position:absolute;top:1px;left:2px;z-index:3;font-size:10px;font-weight:900;color:#fff;text-shadow:1px 1px 2px #000}
.terrain-mark{font-size:clamp(20px,3vw,34px);color:#c5c4ae;text-shadow:2px 3px 2px #151b12}
.attack-flash{animation:battle-shake .28s ease-in-out}
@keyframes battle-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}50%{transform:translateX(3px)}75%{transform:translateX(-2px)}}
@media(max-width:700px){.tactic-cell{min-height:30px}.tactics-board{gap:2px;padding:4px}.stack-count{font-size:9px;min-width:12px;padding:0 2px}}

/* v24 fullscreen battlefield presentation */
#tacticsFullscreen{margin:8px 0;padding:10px 14px;background:#263c2b;color:#f4e8bd;border:1px solid #b59b60;border-radius:5px;font-weight:700;cursor:pointer}
#tacticsSandbox.tactics-fullscreen{position:fixed!important;inset:0!important;z-index:99999!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:#000!important;box-shadow:none!important}
#tacticsSandbox.tactics-fullscreen .creature-sprite{max-width:100%;max-height:100%;image-rendering:pixelated}
#tacticsSandbox.tactics-fullscreen .stack-count{font-size:11px;padding:1px 3px}
body.battle-fullscreen-open{overflow:hidden}

/* v27: clearer active stack feedback and browser-native fullscreen fallback */
.tactic-cell.active-stack{outline:3px solid #ffe27a;outline-offset:-4px;box-shadow:inset 0 0 0 3px #fff2a5,0 0 12px #f6d77d99;z-index:3}
.tactic-cell.active-stack:after{content:"ХОД";position:absolute;top:2px;left:2px;padding:1px 4px;background:#25321c;color:#fff0a4;border:1px solid #e4c96d;border-radius:3px;font-size:clamp(7px,.7vw,10px);font-weight:900;letter-spacing:.5px}
#tacticsSandbox:fullscreen{overflow:auto;background:radial-gradient(ellipse at 50% 45%,#6b8a48 0%,#3f6137 48%,#1a3025 100%);padding:clamp(12px,2vw,28px);border:0}
#tacticsSandbox:fullscreen .tactics-board{width:min(94vw,1300px);margin:18px auto}

/* v32: tactical guidance */
.tactics-status{margin:8px 0;padding:9px 12px;border:1px solid #778b65;border-radius:4px;background:#203326;color:#f4e9c5;font-size:13px;font-weight:700}
.tactic-cell.reachable{box-shadow:inset 0 0 0 3px #d9ef80,0 0 8px #d9ef8055;background-image:linear-gradient(#d9ef8030,#d9ef8030),repeating-linear-gradient(135deg,#7d9160 0 8px,#879a68 8px 16px)}
.tactic-cell.target-available{outline:3px solid #ffb56b;outline-offset:-4px;z-index:2}

/* v34: richer battlefield tiles, faction ground variation, and clearer targeting */
#tacticsSandbox:not(.tactics-fullscreen) .tactics-board{background:linear-gradient(135deg,#293a27,#162319 55%,#35462a);padding:10px;gap:4px;border:5px ridge #b29a61;box-shadow:inset 0 0 0 2px #182418,0 8px 24px #0008}
#tacticsSandbox .tactic-cell{isolation:isolate;border-radius:3px;box-shadow:inset 0 0 0 1px #d7d7a044, inset 0 -5px 8px #20331c30;}
#tacticsSandbox .tactic-cell:nth-child(9n + 2),#tacticsSandbox .tactic-cell:nth-child(9n + 6),#tacticsSandbox .tactic-cell:nth-child(9n + 8){background-image:radial-gradient(ellipse at 24% 22%,#dce2a326 0 2px,transparent 3px),radial-gradient(ellipse at 72% 68%,#233e242c 0 3px,transparent 4px),linear-gradient(145deg,#879c64,#708653)}
#tacticsSandbox .tactic-cell:nth-child(9n + 3),#tacticsSandbox .tactic-cell:nth-child(9n + 5),#tacticsSandbox .tactic-cell:nth-child(9n + 9){background-image:radial-gradient(ellipse at 70% 25%,#e0dda126 0 2px,transparent 3px),radial-gradient(ellipse at 28% 78%,#263c222b 0 3px,transparent 4px),linear-gradient(145deg,#81965e,#6a8050)}
#tacticsSandbox .tactic-cell.left{background-image:linear-gradient(145deg,#789bb6,#3e5e79);box-shadow:inset 0 0 0 2px #b8d9ec55,0 2px 5px #0004}
#tacticsSandbox .tactic-cell.right{background-image:linear-gradient(145deg,#b48763,#6e4432);box-shadow:inset 0 0 0 2px #f0c49b55,0 2px 5px #0004}
#tacticsSandbox .tactic-cell.terrain{background-image:radial-gradient(ellipse at 35% 30%,#b9bea24c,transparent 55%),linear-gradient(145deg,#727969,#414b3d);box-shadow:inset 0 0 0 2px #b0b49a55, inset 0 -8px 10px #151d14aa}
#tacticsSandbox .tactic-cell.occupied .creature-sprite{filter:drop-shadow(1px 2px 1px #111a) drop-shadow(0 0 2px #fff3)}
#tacticsSandbox .tactic-cell.reachable{outline:2px dashed #efffa3;outline-offset:-5px;filter:brightness(1.13)}
#tacticsSandbox .tactic-cell.target-available{outline:3px solid #ffb36c;outline-offset:-4px;box-shadow:inset 0 0 0 3px #7d2c1a66,0 0 12px #ff8b4d66}
#tacticsSandbox .tactic-cell.active-stack{outline:3px solid #ffe27a;outline-offset:-4px;box-shadow:inset 0 0 0 3px #fff2a5,0 0 16px #f6d77dcc}
#tacticsSandbox .tactics-actions button{border:1px solid #9c8754;background:linear-gradient(#394c34,#233526);color:#f3e7c5;font-weight:700;padding:9px 13px}
#tacticsSandbox .tactics-actions button:hover:not(:disabled){background:linear-gradient(#526c43,#314a32);border-color:#e0c777}
#tacticsSandbox #tacticsAttack{background:linear-gradient(#9d4e31,#71331f);border-color:#e4a16d}
#tacticsSandbox #tacticsAI{background:linear-gradient(#536b88,#304761);border-color:#a9c4e0}
#tacticsSandbox .tactics-status{background:linear-gradient(100deg,#243a29,#17281d);border-color:#a38c54;box-shadow:inset 0 0 0 1px #fff1}
#tacticsSandbox #tacticsLog{border:1px solid #6d7956;box-shadow:inset 0 0 0 1px #ffffff08}
#tacticsSandbox.tactics-fullscreen .tactic-cell{background-image:radial-gradient(ellipse at 24% 22%,#dce2a326 0 2px,transparent 3px),radial-gradient(ellipse at 72% 68%,#233e242c 0 3px,transparent 4px),linear-gradient(145deg,#8ca768,#67844c)}
#tacticsSandbox.tactics-fullscreen .tactic-cell.left{background-image:linear-gradient(145deg,#789bb6,#3e5e79)}
#tacticsSandbox.tactics-fullscreen .tactic-cell.right{background-image:linear-gradient(145deg,#b48763,#6e4432)}
#tacticsSandbox.tactics-fullscreen .tactic-cell.terrain{background-image:radial-gradient(ellipse at 35% 30%,#b9bea24c,transparent 55%),linear-gradient(145deg,#727969,#414b3d)}
@media(prefers-reduced-motion:reduce){#tacticsSandbox .tactic-cell{transition:none}.attack-flash{animation:none}}


/* v35: battlefield action animation layer */
#tacticsSandbox .tactic-cell.effect-move{animation:cell-march .34s cubic-bezier(.2,.8,.3,1) both;z-index:6}
#tacticsSandbox .tactic-cell.effect-attack .creature-sprite{transform-origin:center;animation:creature-lunge .32s ease-out both}
#tacticsSandbox .tactic-cell.effect-hit{animation:stack-hit .42s ease-out both;z-index:5}
#tacticsSandbox .tactic-cell.effect-hit:before{content:"";position:absolute;inset:8%;border:3px solid #ffe48a;border-radius:50%;box-shadow:0 0 12px #ff7b37, inset 0 0 12px #ffb23d;pointer-events:none;animation:impact-ring .42s ease-out both;z-index:4}
#tacticsSandbox .tactic-cell.effect-attack:after{content:"";position:absolute;inset:15%;background:linear-gradient(110deg,transparent 35%,#fff4b7 48%,#ff8a4a 53%,transparent 66%);transform:translateX(-120%) rotate(-15deg);pointer-events:none;animation:slash-swipe .32s ease-out both;z-index:4}
#tacticsSandbox .tactic-cell.effect-shoot:after{content:"➤";position:absolute;left:48%;top:28%;font:900 20px/1 Arial,sans-serif;color:#ffe79a;text-shadow:0 0 4px #ff6d23,0 1px 2px #17130b;pointer-events:none;z-index:5;animation:projectile-release .34s ease-out both}
@keyframes projectile-release{0%{opacity:0;transform:translate(0,0) scale(.45)}20%{opacity:1}100%{opacity:0;transform:translate(22px,-8px) scale(1.05)}}
@keyframes cell-march{0%{transform:translate(var(--move-x,0),var(--move-y,0)) scale(.92);filter:brightness(1.4);box-shadow:0 0 16px #e8f4a1;z-index:6}70%{transform:translate(0,0) scale(1.08)}100%{transform:translate(0,0) scale(1);filter:brightness(1)}}
@keyframes creature-lunge{0%{transform:translateX(0) scale(1)}38%{transform:translateX(12%) scale(1.16) rotate(-4deg)}100%{transform:translateX(0) scale(1) rotate(0)}}
@keyframes stack-hit{0%,100%{filter:brightness(1)}18%,52%{filter:brightness(2.1) saturate(.3)}35%{transform:translateX(-3px)}68%{transform:translateX(3px)}}
@keyframes impact-ring{0%{transform:scale(.3);opacity:1}100%{transform:scale(1.35);opacity:0}}
@keyframes slash-swipe{0%{transform:translateX(-120%) rotate(-15deg);opacity:0}25%{opacity:1}100%{transform:translateX(120%) rotate(-15deg);opacity:0}}
@media(prefers-reduced-motion:reduce){#tacticsSandbox .tactic-cell.effect-move,#tacticsSandbox .tactic-cell.effect-attack .creature-sprite,#tacticsSandbox .tactic-cell.effect-shoot:after,#tacticsSandbox .tactic-cell.effect-hit,#tacticsSandbox .tactic-cell.effect-hit:before,#tacticsSandbox .tactic-cell.effect-attack:after{animation:none!important}}


/* v36: continuous painted battlefield surface, terrain texture and unit staging */
#tacticsSandbox .tactics-board{
  position:relative; isolation:isolate; grid-template-columns:repeat(9,minmax(0,1fr));
  gap:2px; padding:clamp(8px,1.2vw,18px); border:7px ridge #8d7545; border-radius:3px;
  background-color:#536a3c;
  background-image:
    radial-gradient(ellipse at 14% 22%,#a5b76a55 0 1px,transparent 3px),
    radial-gradient(ellipse at 74% 66%,#263d2350 0 2px,transparent 5px),
    radial-gradient(ellipse at 42% 82%,#c0b77b40 0 1px,transparent 4px),
    repeating-linear-gradient(7deg,#72884b 0 13px,#687f43 14px 25px,#788c4d 26px 37px),
    linear-gradient(145deg,#83975a,#3e5a32);
  background-size:37px 31px,53px 47px,61px 43px,100% 100%,100% 100%;
  box-shadow:inset 0 0 0 3px #283b24,inset 0 0 30px #17261899,0 10px 30px #0008;
}
#tacticsSandbox .tactic-cell{
  min-height:clamp(54px,6.1vw,94px); border:1px solid #9eae6b66; border-radius:0;
  background-color:#71894b;
  background-image:radial-gradient(ellipse at 23% 28%,#c0c87938 0 1px,transparent 3px),radial-gradient(ellipse at 72% 72%,#243d2140 0 2px,transparent 4px),linear-gradient(135deg,#83985a88,#4c6b3a88);
  box-shadow:inset 0 0 0 1px #b8c77a25; color:#fff4cb;
}
#tacticsSandbox .tactic-cell:not(.occupied):not(.terrain){border-color:#b0c47a28}
#tacticsSandbox .tactic-cell.occupied{border:2px solid #e2cc83;background-image:linear-gradient(145deg,#8da365dd,#5a7545dd),radial-gradient(ellipse at center,#d5d69a55,transparent 65%);box-shadow:inset 0 0 0 2px #263b25aa,0 2px 7px #10180d88}
#tacticsSandbox .tactic-cell.left{background-image:linear-gradient(145deg,#6d9db7dd,#3c607bdd),radial-gradient(ellipse at center,#d8e8df44,transparent 70%);border-color:#c1e1df}
#tacticsSandbox .tactic-cell.right{background-image:linear-gradient(145deg,#b98560dd,#70462fdd),radial-gradient(ellipse at center,#f0d6a044,transparent 70%);border-color:#f0d0a0}
#tacticsSandbox .tactic-cell.terrain{background-color:#444b3a;background-image:radial-gradient(ellipse at 45% 40%,#7b8069 0 7%,#525a46 42%,#303c2e 75%);border:1px solid #87916a;box-shadow:inset 0 0 10px #182317aa}
#tacticsSandbox .creature-sprite{max-width:100%;max-height:100%;width:auto;height:auto;transform:scale(1.08);image-rendering:pixelated;filter:drop-shadow(2px 3px 1px #10170dcc)}
#tacticsSandbox .stack-count{background:#171b13f2;border:1px solid #f0d99a;border-radius:2px}
#tacticsSandbox.tactics-fullscreen .tactics-board{
 width:min(96vw,1500px); min-height:60vh; gap:clamp(2px,.25vw,5px); padding:clamp(10px,1.4vw,22px);
 background-color:#536a3c;
 background-image:radial-gradient(ellipse at 14% 22%,#a5b76a55 0 1px,transparent 3px),radial-gradient(ellipse at 74% 66%,#263d2350 0 2px,transparent 5px),repeating-linear-gradient(7deg,#72884b 0 13px,#687f43 14px 25px,#788c4d 26px 37px),linear-gradient(145deg,#83975a,#3e5a32);
 background-size:37px 31px,53px 47px,100% 100%,100% 100%;
}
#tacticsSandbox.tactics-fullscreen .tactic-cell{min-height:clamp(68px,8vw,124px);background-color:#71894b;background-image:radial-gradient(ellipse at 23% 28%,#c0c87938 0 1px,transparent 3px),radial-gradient(ellipse at 72% 72%,#243d2140 0 2px,transparent 4px),linear-gradient(135deg,#83985a88,#4c6b3a88);border-color:#b0c47a28;border-radius:0}
#tacticsSandbox.tactics-fullscreen .tactic-cell.terrain{background-image:radial-gradient(ellipse at 45% 40%,#7b8069 0 7%,#525a46 42%,#303c2e 75%);border-color:#87916a}
@media(max-width:700px){#tacticsSandbox .tactic-cell{min-height:32px}#tacticsSandbox .tactics-board{gap:1px;padding:4px;border-width:3px}}


/* v37: improve the battlefield as a single staged scene, while retaining the current square-grid rules. */
#tacticsSandbox .tactics-board{
  width:min(100%,1480px); margin:18px auto; aspect-ratio: 9 / 5.7;
  align-content:stretch; grid-auto-rows:minmax(0,1fr);
  padding:clamp(12px,1.8vw,26px); gap:clamp(3px,.32vw,6px);
  border:10px ridge #9b8150;
  background-color:#566b3c;
  background-image:
    radial-gradient(ellipse at 12% 17%,#d8d9a22a 0 2px,transparent 5px),
    radial-gradient(ellipse at 76% 61%,#20391f4d 0 3px,transparent 8px),
    radial-gradient(ellipse at 43% 83%,#c4c58a26 0 2px,transparent 6px),
    repeating-linear-gradient(12deg,#708649 0 22px,#78904d 23px 41px,#657c40 42px 59px),
    linear-gradient(145deg,#87995b,#3b572f);
  box-shadow:inset 0 0 0 4px #273d24,inset 0 0 42px #142313bb,0 14px 38px #0009;
}
#tacticsSandbox .tactic-cell{
  min-width:0; min-height:0; position:relative; overflow:hidden;
  background-color:#71894b;
  background-image:
    radial-gradient(ellipse at 24% 28%,#c7d38a45 0 2px,transparent 5px),
    radial-gradient(ellipse at 73% 69%,#253b2044 0 3px,transparent 7px),
    linear-gradient(145deg,#8fa767c9,#4b6838d9);
  border:1px solid #c3cb8b55;
  box-shadow:inset 0 0 0 1px #e1e7a51a;
}
#tacticsSandbox .tactic-cell.reachable{outline:2px dashed #fff0a5;outline-offset:-5px;filter:brightness(1.15)}
#tacticsSandbox .tactic-cell.target-available{outline:2px solid #f7b45b;outline-offset:-4px}
#tacticsSandbox .creature-sprite{max-width:86%;max-height:84%;object-fit:contain;z-index:1}
#tacticsSandbox .side-mark{top:4px;left:5px;right:auto;bottom:auto;font-size:10px}
#tacticsSandbox .stack-count{right:4px;bottom:4px;z-index:2;font-size:14px;padding:2px 5px}
#tacticsSandbox .tactics-fullscreen .tactics-board{aspect-ratio:9 / 5.7;min-height:0;max-height:calc(100vh - 180px)}
@media(max-width:700px){#tacticsSandbox .tactics-board{aspect-ratio:9 / 7;padding:5px;border-width:4px;gap:1px}}


/* v38: battle scene framing and command/status hierarchy. */
#tacticsSandbox{position:relative}
#tacticsSandbox .tactics-status{
  display:flex;align-items:center;gap:12px;min-height:42px;
  padding:10px 14px;border:1px solid #a68b50;
  background:linear-gradient(90deg,#243a28,#35472d 52%,#263528);
  color:#f2e6bd;font-weight:600;letter-spacing:.15px;
}
#tacticsSandbox .tactics-board{
  position:relative; margin:14px auto 18px;
  border:12px ridge #a58b54;
  outline:1px solid #1b281a;
  background-image:
    radial-gradient(ellipse at 10% 12%,#e4e6ad2b 0 2px,transparent 7px),
    radial-gradient(ellipse at 80% 28%,#2c452432 0 4px,transparent 10px),
    radial-gradient(ellipse at 34% 74%,#d0cb8522 0 2px,transparent 8px),
    radial-gradient(ellipse at 62% 92%,#1d351e55 0 5px,transparent 12px),
    repeating-linear-gradient(18deg,#748a49 0 18px,#6b8143 19px 35px,#7b914e 36px 52px),
    linear-gradient(145deg,#83995a,#3c572f);
  box-shadow:inset 0 0 0 4px #2b4027,inset 0 0 38px #172717cc,0 16px 42px #0009;
}
#tacticsSandbox .tactic-cell{transition:filter .12s,outline-color .12s,background-color .12s}
#tacticsSandbox .tactic-cell:not(:disabled):hover{filter:brightness(1.16)}
#tacticsSandbox .tactic-cell.occupied{z-index:1}
#tacticsSandbox .tactic-cell.left{box-shadow:inset 0 0 0 2px #c2e2e044,0 2px 8px #13231a99}
#tacticsSandbox .tactic-cell.right{box-shadow:inset 0 0 0 2px #f5d7a044,0 2px 8px #24170f99}
#tacticsSandbox .tactics-actions{display:flex;flex-wrap:wrap;gap:8px;padding:12px;border:1px solid #5c6b48;background:linear-gradient(#293a29,#1b2a20)}
#tacticsSandbox .tactics-log,#tacticsSandbox #tacticsLog{background:#121d16;border:1px solid #526044;padding:10px;color:#c9d3ad}
#tacticsSandbox .tactics-notice,#tacticsSandbox #tacticsNotice{padding:8px 11px;border-left:3px solid #d0b46b;background:#263629;color:#f0dfad}
#tacticsSandbox .tactic-cell .creature-sprite{filter:drop-shadow(1px 3px 1px #10170d) drop-shadow(0 0 2px #0b140b)}
#tacticsSandbox .tactic-cell .stack-count{box-shadow:0 1px 3px #000b}
#tacticsSandbox .tactic-cell .side-mark{padding:0 3px;background:#151b12cc;border:1px solid #b9a36b;color:#fff0bf}
@media(max-width:700px){
 #tacticsSandbox .tactics-board{border-width:4px}
 #tacticsSandbox .tactics-status{font-size:12px;padding:7px}
}

/* v39: odd-r offset hex battlefield; native Heroes I terrain image is used when decoded. */
#tacticsBoard{background-image:var(--original-battle-background,radial-gradient(ellipse at center,#49633a,#18271c));background-size:cover;background-position:center;padding:24px 20px;display:grid;grid-template-columns:repeat(9,minmax(48px,1fr));gap:3px;align-content:center;overflow:auto;isolation:isolate}
#tacticsBoard .tactic-cell{position:relative;aspect-ratio:1/1.12;min-width:0;padding:0;border:0;background:linear-gradient(145deg,#66854d,#344f31);clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);border-radius:0;display:flex;align-items:center;justify-content:center;overflow:visible}
#tacticsBoard .tactic-cell:nth-child(18n + 10),#tacticsBoard .tactic-cell:nth-child(18n + 12),#tacticsBoard .tactic-cell:nth-child(18n + 14),#tacticsBoard .tactic-cell:nth-child(18n + 16),#tacticsBoard .tactic-cell:nth-child(18n + 18){transform:translateY(22%)}
#tacticsBoard .tactic-cell.reachable{background:linear-gradient(145deg,#c4c778,#829c48);box-shadow:inset 0 0 0 2px #e9e0a2}
#tacticsBoard .tactic-cell.left{background:linear-gradient(145deg,#5478a5,#263f65)}
#tacticsBoard .tactic-cell.right{background:linear-gradient(145deg,#a95b49,#632e2b)}
#tacticsBoard .tactic-cell.terrain{background:linear-gradient(145deg,#8b8978,#49483e)}
#tacticsBoard .creature-sprite{width:88%;height:78%;object-fit:contain;image-rendering:pixelated;z-index:1}
#tacticsBoard .stack-count{position:absolute;bottom:12%;right:14%;z-index:3;background:#10140de8;color:#fff0b7;border:1px solid #bda772;border-radius:9px;padding:0 4px;font-weight:800;font-size:11px}
#tacticsBoard .side-mark{position:absolute;top:12%;left:18%;z-index:3;font-size:10px;font-weight:900;text-shadow:0 1px 3px #000}
@media(max-width:800px){#tacticsBoard{grid-template-columns:repeat(9,minmax(36px,1fr));padding:12px 8px;gap:1px}}

/* v39: staggered odd-r hex field with original indexed BKG background. */
#tacticsBoard{background-image:var(--original-battle-background,radial-gradient(ellipse at center,#49633a,#18271c));background-size:cover;background-position:center;padding:24px 20px;display:grid;grid-template-columns:repeat(9,minmax(48px,1fr));gap:3px;align-content:center;overflow:auto;isolation:isolate}
#tacticsBoard .tactic-cell{position:relative;aspect-ratio:1/1.12;min-width:0;padding:0;border:0;background:linear-gradient(145deg,#66854d,#344f31);clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);border-radius:0;display:flex;align-items:center;justify-content:center;overflow:visible}
#tacticsBoard .tactic-cell:nth-child(18n + 10),#tacticsBoard .tactic-cell:nth-child(18n + 12),#tacticsBoard .tactic-cell:nth-child(18n + 14),#tacticsBoard .tactic-cell:nth-child(18n + 16),#tacticsBoard .tactic-cell:nth-child(18n + 18){transform:translateY(22%)}
#tacticsBoard .tactic-cell.reachable{background:linear-gradient(145deg,#c4c778,#829c48)}
#tacticsBoard .tactic-cell.left{background:linear-gradient(145deg,#5478a5,#263f65)}#tacticsBoard .tactic-cell.right{background:linear-gradient(145deg,#a95b49,#632e2b)}#tacticsBoard .tactic-cell.terrain{background:linear-gradient(145deg,#8b8978,#49483e)}
#tacticsBoard .creature-sprite{width:88%;height:78%;object-fit:contain;image-rendering:pixelated;z-index:1}
#tacticsBoard .stack-count{position:absolute;bottom:12%;right:14%;z-index:3;background:#10140de8;color:#fff0b7;border:1px solid #bda772;border-radius:9px;padding:0 4px;font-weight:800;font-size:11px}
@media(max-width:800px){#tacticsBoard{grid-template-columns:repeat(9,minmax(36px,1fr));padding:12px 8px;gap:1px}}

/* v39 hotfix: remove the synthetic striped ground and correct odd-r staggering. */
#tacticsSandbox #tacticsBoard{
  background-color:#506b3a;
  background-image:linear-gradient(#101b1680,#101b1640),var(--original-battle-background,radial-gradient(ellipse at 50% 35%,#82965b 0%,#536f3b 60%,#344b2c 100%));
  background-repeat:no-repeat;background-position:center;background-size:cover;
  grid-auto-rows:auto;row-gap:0.02rem;column-gap:0;
  padding:clamp(14px,2vw,28px) clamp(24px,3vw,44px);
}
#tacticsSandbox #tacticsBoard .tactic-cell{transform:none;aspect-ratio:1/.94;clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);background-color:#71884b;background-image:linear-gradient(145deg,#8ba364dd,#536f3bdd);border:0;outline-offset:-5px;}
#tacticsSandbox #tacticsBoard .tactic-cell:nth-child(18n + 10),
#tacticsSandbox #tacticsBoard .tactic-cell:nth-child(18n + 11),
#tacticsSandbox #tacticsBoard .tactic-cell:nth-child(18n + 12),
#tacticsSandbox #tacticsBoard .tactic-cell:nth-child(18n + 13),
#tacticsSandbox #tacticsBoard .tactic-cell:nth-child(18n + 14),
#tacticsSandbox #tacticsBoard .tactic-cell:nth-child(18n + 15),
#tacticsSandbox #tacticsBoard .tactic-cell:nth-child(18n + 16),
#tacticsSandbox #tacticsBoard .tactic-cell:nth-child(18n + 17),
#tacticsSandbox #tacticsBoard .tactic-cell:nth-child(18n + 18){transform:translate(50%,-24%);}
#tacticsSandbox #tacticsBoard .tactic-cell.left{background-image:linear-gradient(145deg,#789bb6,#3e5e79);}
#tacticsSandbox #tacticsBoard .tactic-cell.right{background-image:linear-gradient(145deg,#b48763,#6e4432);}
#tacticsSandbox #tacticsBoard .tactic-cell.terrain{background-image:radial-gradient(ellipse at 35% 30%,#b9bea24c,transparent 55%),linear-gradient(145deg,#727969,#414b3d);}
#tacticsSandbox #tacticsBoard .tactic-cell.reachable{background-image:linear-gradient(#d9ef8045,#d9ef8045),linear-gradient(145deg,#c4c778,#829c48);}
@media(max-width:800px){#tacticsSandbox #tacticsBoard{padding:12px 18px;grid-template-columns:repeat(9,minmax(32px,1fr))}}

/* v39.1: show an actual empty hex battlefield before a battle is created. */
#tacticsSandbox #tacticsBoard .preview-hex{pointer-events:none;background-color:#71884b;background-image:radial-gradient(ellipse at 24% 22%,#dce2a326 0 2px,transparent 3px),radial-gradient(ellipse at 72% 68%,#233e242c 0 3px,transparent 4px),linear-gradient(145deg,#83985a,#536f3b);outline:1px solid #a0b77855;outline-offset:-5px;}
#tacticsSandbox #tacticsBoard .preview-hex:nth-child(18n + 10),#tacticsSandbox #tacticsBoard .preview-hex:nth-child(18n + 11),#tacticsSandbox #tacticsBoard .preview-hex:nth-child(18n + 12),#tacticsSandbox #tacticsBoard .preview-hex:nth-child(18n + 13),#tacticsSandbox #tacticsBoard .preview-hex:nth-child(18n + 14),#tacticsSandbox #tacticsBoard .preview-hex:nth-child(18n + 15),#tacticsSandbox #tacticsBoard .preview-hex:nth-child(18n + 16),#tacticsSandbox #tacticsBoard .preview-hex:nth-child(18n + 17),#tacticsSandbox #tacticsBoard .preview-hex:nth-child(18n + 18){transform:translate(50%,-24%);}


/* v39.2 verified visibility fix: keep every cell inside the board grid.
   Previous nth-child transforms pushed half the board outside its grid tracks. */
#tacticsSandbox #tacticsBoard{
  display:grid !important; grid-template-columns:repeat(9,minmax(0,1fr)) !important;
  grid-auto-rows:auto !important; gap:5px !important;
  min-height:380px; height:auto; overflow:visible;
  padding:22px !important; align-content:start;
  background-color:#344b2c !important;
  background-image:linear-gradient(#101b1640,#101b1640),var(--original-battle-background,radial-gradient(ellipse at 50% 35%,#82965b 0%,#536f3b 60%,#344b2c 100%)) !important;
}
#tacticsSandbox #tacticsBoard .tactic-cell,
#tacticsSandbox #tacticsBoard .preview-hex{
  display:flex !important; position:relative; visibility:visible !important; opacity:1 !important;
  width:100%; min-width:0; min-height:44px; aspect-ratio:1/.92 !important;
  transform:none !important; clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%) !important;
  outline:1px solid #c4d18a !important; outline-offset:-3px;
  border:0 !important; background-color:#71884b !important;
  background-image:linear-gradient(145deg,#91a765,#536f3b) !important;
  box-shadow:inset 0 0 0 2px #d0d99a55 !important;
}
#tacticsSandbox #tacticsBoard .tactic-cell:nth-child(odd),
#tacticsSandbox #tacticsBoard .preview-hex:nth-child(odd){background-image:linear-gradient(145deg,#83985a,#4e6a38) !important}
#tacticsSandbox #tacticsBoard .tactic-cell.left{background-image:linear-gradient(145deg,#789bb6,#3e5e79) !important}
#tacticsSandbox #tacticsBoard .tactic-cell.right{background-image:linear-gradient(145deg,#b48763,#6e4432) !important}
#tacticsSandbox #tacticsBoard .tactic-cell.terrain{background-image:linear-gradient(145deg,#727969,#414b3d) !important}
#tacticsSandbox #tacticsBoard .tactic-cell.reachable{background-image:linear-gradient(#d9ef8066,#d9ef8066),linear-gradient(145deg,#c4c778,#829c48) !important}
@media(max-width:800px){#tacticsSandbox #tacticsBoard{grid-template-columns:repeat(9,minmax(0,1fr)) !important;padding:10px !important;gap:2px !important}#tacticsSandbox #tacticsBoard .tactic-cell,#tacticsSandbox #tacticsBoard .preview-hex{min-height:28px}}


/* v39.3: fullscreen battle is a viewport overlay; the page itself must not scroll. */
#tacticsSandbox.tactics-fullscreen{
  position:fixed !important; inset:0 !important; width:100vw !important; height:100vh !important;
  max-width:none !important; margin:0 !important; padding:10px 18px 14px !important;
  box-sizing:border-box !important; z-index:2147483000 !important; overflow-y:auto !important;
  background:linear-gradient(145deg,#203a29,#15271c 60%,#2b412a) !important;
  border:0 !important; border-radius:0 !important;
}
#tacticsSandbox.tactics-fullscreen #tacticsFullscreen{position:sticky !important; top:0 !important; z-index:5 !important; display:block; margin:0 auto 8px !important}
#tacticsSandbox.tactics-fullscreen > summary{margin:0 0 5px !important}
#tacticsSandbox.tactics-fullscreen > p{margin:5px 0 8px !important}
#tacticsSandbox.tactics-fullscreen .tactics-board{
  width:min(96vw,1450px) !important; height: min(64vh, 650px) !important; min-height:300px !important;
  max-height:calc(100vh - 270px) !important; aspect-ratio:auto !important;
  margin:8px auto 10px !important; padding:16px !important; gap:5px !important;
  grid-template-columns:repeat(9,minmax(0,1fr)) !important;
  grid-template-rows:repeat(7,minmax(0,1fr)) !important; align-content:stretch !important;
}
#tacticsSandbox.tactics-fullscreen .tactic-cell{min-height:0 !important; height:100% !important}
#tacticsSandbox.tactics-fullscreen .tactics-actions{display:flex; flex-wrap:wrap; gap:6px; justify-content:center}
#tacticsSandbox.tactics-fullscreen .tactics-actions button{padding:7px 12px}
#tacticsSandbox.tactics-fullscreen #tacticsLog{max-height:90px !important; overflow:auto}
@media(max-height:760px){
 #tacticsSandbox.tactics-fullscreen{padding:5px 12px 8px !important}
 #tacticsSandbox.tactics-fullscreen .tactics-board{height:min(57vh,470px) !important; min-height:250px !important; max-height:calc(100vh - 240px) !important; padding:8px !important; gap:3px !important}
 #tacticsSandbox.tactics-fullscreen > p.hint{font-size:11px}
}

/* v39.5: BKG is a 640x102 scenery strip, not a full-screen image.
   Keep its aspect ratio and place it along the bottom of the battle canvas. */
#tacticsSandbox #tacticsBoard{
  background-size:100% 100%, 100% auto !important;
  background-position:center center, center bottom !important;
  background-repeat:no-repeat, no-repeat !important;
  background-color:#344b2c !important;
}
#tacticsSandbox #tacticsBoard .tactic-cell,
#tacticsSandbox #tacticsBoard .preview-hex{
  background-color:rgba(93,119,65,.72) !important;
  background-image:linear-gradient(145deg,rgba(153,177,108,.76),rgba(65,91,49,.78)) !important;
  outline:1px solid rgba(220,226,160,.68) !important;
  box-shadow:inset 0 0 0 1px rgba(218,229,165,.18) !important;
}
#tacticsSandbox #tacticsBoard .tactic-cell:nth-child(odd),
#tacticsSandbox #tacticsBoard .preview-hex:nth-child(odd){
  background-image:linear-gradient(145deg,rgba(139,163,91,.76),rgba(55,81,44,.79)) !important;
}
#tacticsSandbox #tacticsBoard .tactic-cell.left{background-image:linear-gradient(145deg,rgba(120,155,182,.82),rgba(62,94,121,.86)) !important}
#tacticsSandbox #tacticsBoard .tactic-cell.right{background-image:linear-gradient(145deg,rgba(180,135,99,.82),rgba(110,68,50,.86)) !important}
#tacticsSandbox #tacticsBoard .tactic-cell.terrain{background-image:linear-gradient(145deg,rgba(114,121,105,.88),rgba(65,75,61,.9)) !important}
#tacticsSandbox #tacticsBoard .tactic-cell.reachable{background-image:linear-gradient(rgba(217,239,128,.38),rgba(217,239,128,.38)),linear-gradient(145deg,rgba(196,199,120,.8),rgba(130,156,72,.82)) !important}


/* v39.6: use the actual Heroes I battle panorama (mountains, sky and treeline).
   The BKG is a 640x102 panorama band; the ground below it is a separate battlefield surface. */
#tacticsSandbox #tacticsBoard{
  background-color:#77674a !important;
  background-image:linear-gradient(to bottom,rgba(24,39,28,.02) 0%,rgba(24,39,28,.02) 37%,rgba(92,75,47,.10) 38%,rgba(83,72,49,.05) 100%),var(--original-battle-background,linear-gradient(#6ca1df 0 24%,#607d42 25%,#88774e 45%,#756443 100%)) !important;
  background-repeat:no-repeat,no-repeat !important;
  background-position:center top,center top !important;
  background-size:100% 100%,100% auto !important;
}
/* The classic battle screen does not show a permanent wall of oversized hexes.
   Keep cells clickable; reveal only the movement/selection overlays. */
#tacticsSandbox #tacticsBoard .tactic-cell,
#tacticsSandbox #tacticsBoard .preview-hex{
  background:transparent !important;
  outline:0 !important;
  box-shadow:none !important;
  border:0 !important;
}
#tacticsSandbox #tacticsBoard .preview-hex{pointer-events:none !important}
#tacticsSandbox #tacticsBoard .tactic-cell.left,
#tacticsSandbox #tacticsBoard .tactic-cell.right{background:transparent !important}
#tacticsSandbox #tacticsBoard .tactic-cell.terrain{background:rgba(50,45,31,.12) !important}
#tacticsSandbox #tacticsBoard .tactic-cell.reachable{
  background:rgba(222,239,111,.48) !important;
  outline:1px solid rgba(255,245,167,.9) !important;
  outline-offset:-2px !important;
  box-shadow:inset 0 0 0 2px rgba(255,245,167,.20) !important;
}
#tacticsSandbox #tacticsBoard .tactic-cell.selected,
#tacticsSandbox #tacticsBoard .tactic-cell.active{
  outline:2px solid #ffe38a !important;outline-offset:-3px !important;
}

/* v39.7: tactical hexes are an invisible logical grid, never painted onto the scenery. */
#tacticsSandbox #tacticsBoard .tactic-cell,
#tacticsSandbox #tacticsBoard .tactic-cell:nth-child(n),
#tacticsSandbox #tacticsBoard .tactic-cell.left,
#tacticsSandbox #tacticsBoard .tactic-cell.right,
#tacticsSandbox #tacticsBoard .tactic-cell.terrain,
#tacticsSandbox #tacticsBoard .tactic-cell.reachable,
#tacticsSandbox #tacticsBoard .tactic-cell.active,
#tacticsSandbox #tacticsBoard .tactic-cell.active-stack,
#tacticsSandbox #tacticsBoard .tactic-cell.target-available,
#tacticsSandbox #tacticsBoard .preview-hex {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  outline: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}
/* Movement and attack still use the same cells, but the coordinate grid stays hidden. */
#tacticsSandbox #tacticsBoard .tactic-cell.reachable:hover,
#tacticsSandbox #tacticsBoard .tactic-cell.target-available:hover,
#tacticsSandbox #tacticsBoard .tactic-cell:hover {
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
#tacticsSandbox #tacticsBoard .terrain-mark,
#tacticsSandbox #tacticsBoard .side-mark { display:none !important; }
#tacticsSandbox #tacticsBoard .creature-sprite { z-index:2 !important; }
#tacticsSandbox #tacticsBoard .stack-count { z-index:3 !important; }
/* Avoid any background tint on the logical board itself; only the original landscape and ground remain. */
#tacticsSandbox #tacticsBoard {
  background-color: #77674a !important;
  background-image: var(--original-battle-background, linear-gradient(#6ca1df 0 26%, #6d9145 27% 40%, #77674a 41% 100%)) !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: 100% auto !important;
}

/* v39.8: original Heroes I battle scene. The logical hex grid remains invisible. */
#tacticsSandbox #tacticsBoard{
  width:min(96vw,calc((100vh - 300px) * 1.6)) !important;
  height:auto !important;
  aspect-ratio:8 / 5 !important;
  min-height:0 !important;
  max-height:calc(100vh - 300px) !important;
  box-sizing:border-box !important;
  padding:0 !important;
  gap:0 !important;
  grid-template-columns:repeat(9,minmax(0,1fr)) !important;
  grid-template-rows:repeat(7,minmax(0,1fr)) !important;
  align-content:stretch !important;
  overflow:visible !important;
  background-color:#426b32 !important;
  background-image:var(--original-battle-background,linear-gradient(#527edc 0 24%,#3e7b30 25% 34%,#7b6749 35% 100%)) !important;
  background-position:center center !important;
  background-size:100% 100% !important;
  background-repeat:no-repeat !important;
}
#tacticsSandbox #tacticsBoard .tactic-cell,
#tacticsSandbox #tacticsBoard .tactic-cell:nth-child(n){
  position:relative !important;
  min-width:0 !important;
  min-height:0 !important;
  width:100% !important;
  height:100% !important;
  padding:0 !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
  transform:none !important;
  clip-path:none !important;
  border:0 !important;
  border-radius:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  background-image:none !important;
  cursor:var(--cell-cursor, default) !important;
}
#tacticsSandbox #tacticsBoard .tactic-cell:hover,
#tacticsSandbox #tacticsBoard .tactic-cell.reachable,
#tacticsSandbox #tacticsBoard .tactic-cell.target-available,
#tacticsSandbox #tacticsBoard .tactic-cell.terrain,
#tacticsSandbox #tacticsBoard .tactic-cell.active-stack{background:transparent !important;outline:0 !important;box-shadow:none !important}
#tacticsSandbox #tacticsBoard .creature-sprite{
  width:auto !important;
  height:clamp(72px,16vh,145px) !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  image-rendering:pixelated !important;
  transform:none !important;
  filter:drop-shadow(1px 2px 1px #15170fbb) !important;
  z-index:2 !important;
  pointer-events:none !important;
}
#tacticsSandbox #tacticsBoard .stack-count{
  right:-3px !important;bottom:8% !important;
  font-size:clamp(10px,1vw,15px) !important;
  padding:1px 4px !important;
  z-index:4 !important;
  pointer-events:none !important;
}
#tacticsSandbox #tacticsBoard .terrain-prop{
  position:absolute !important;
  left:50% !important;
  bottom:10% !important;
  transform:translateX(-50%) !important;
  height:clamp(28px,6vh,46px) !important;
  width:auto !important;
  max-width:85% !important;
  object-fit:contain !important;
  image-rendering:pixelated !important;
  filter:drop-shadow(1px 2px 2px rgba(15,20,10,0.75)) !important;
  pointer-events:none !important;
  z-index:2 !important;
}
#tacticsSandbox #tacticsBoard .side-mark,
#tacticsSandbox #tacticsBoard .terrain-mark{display:none !important}
#tacticsSandbox.tactics-fullscreen #tacticsBoard{margin:8px auto 10px !important}
@media(max-height:700px){
 #tacticsSandbox #tacticsBoard{width:min(94vw,calc((100vh - 260px) * 1.6)) !important;max-height:calc(100vh - 260px) !important}
 #tacticsSandbox #tacticsBoard .creature-sprite{height:clamp(62px,14vh,105px) !important}
}
@media(max-width:700px){
 #tacticsSandbox #tacticsBoard{width:96vw !important;max-height:none !important}
 #tacticsSandbox #tacticsBoard .creature-sprite{height:clamp(54px,14vh,100px) !important}
}

/* v39.9: classic HoMM I proportions — 7x5 hex logic, 640x400 scene, native sprite ratio. */
#tacticsSandbox #tacticsBoard{
  width:min(96vw,calc((100vh - 300px) * 1.6)) !important;
  aspect-ratio:8 / 5 !important;
  height:auto !important;
  max-height:calc(100vh - 300px) !important;
  grid-template-columns:repeat(7,minmax(0,1fr)) !important;
  grid-template-rows:repeat(5,minmax(0,1fr)) !important;
  gap:0 !important;
  padding:16% 3% 5% 3% !important;
  box-sizing:border-box !important;
  background-size:100% 100% !important;
  background-position:center top !important;
  overflow:hidden !important;
  position:relative !important;
  cursor:var(--cell-cursor, default);
}
#tacticsSandbox #tacticsBoard .tactic-cell{
  position:relative !important;
  min-width:0 !important;min-height:0 !important;
  display:block !important;
  overflow:visible !important;
  box-sizing:border-box !important;
  cursor:var(--cell-cursor, default) !important;
}
#tacticsSandbox #tacticsBoard .tactic-cell.odd-row{
  transform:translateX(24%) !important;
}
#tacticsSandbox #tacticsBoard .creature-sprite{
  position:absolute !important;
  left:50% !important;bottom:0 !important;
  width:auto !important;height:var(--creature-height,100px) !important;
  max-width:none !important;max-height:none !important;
  object-fit:contain !important;
  image-rendering:pixelated !important;
  transform:translateX(-50%) !important;
  transform-origin:50% 100% !important;
  pointer-events:none !important;
}
#tacticsSandbox #tacticsBoard .stack-count{
  position:absolute !important;left:calc(50% + 10px) !important;right:auto !important;
  bottom:2% !important;z-index:4 !important;
  pointer-events:none !important;
}
#tacticsSandbox #tacticsBoard .tactic-cell.reachable,
#tacticsSandbox #tacticsBoard .tactic-cell.target-available,
#tacticsSandbox #tacticsBoard .tactic-cell:hover,
#tacticsSandbox #tacticsBoard .tactic-cell.terrain,
#tacticsSandbox #tacticsBoard .tactic-cell.active-stack{
  background:transparent !important;outline:0 !important;box-shadow:none !important;
}
#tacticsSandbox #tacticsBoard .tactic-cell.reachable:hover{
  background:rgba(180,240,120,0.18) !important;border-radius:4px !important;
}
#tacticsSandbox #tacticsBoard .tactic-cell.target-available:hover{
  background:rgba(255,100,80,0.22) !important;border-radius:4px !important;
}

#tacticsSandbox #tacticsBoard .creature-sprite.is-animated{width:auto !important;height:var(--creature-height,100px) !important;transform:translateX(-50%) !important}
#tacticsSandbox #tacticsBoard .creature-sprite.is-animated.faces-left{transform:translateX(-50%) scaleX(-1) !important}
#tacticsSandbox #tacticsBoard .creature-sprite.is-walking{
  position:absolute !important;
  left:var(--walker-x, 0px) !important;
  bottom:var(--walker-bottom, 0px) !important;
  top:auto !important;
  right:auto !important;
  width:auto !important;
  height:var(--creature-height, var(--walker-height, 100px)) !important;
  max-width:none !important;
  max-height:none !important;
  transform:var(--walker-transform, translateX(-50%)) !important;
  transform-origin:50% 100% !important;
  z-index:30 !important;
  pointer-events:none !important;
  visibility:visible !important;
  display:block !important;
}
#tacticsSandbox #tacticsBoard .creature-sprite.faces-left{transform:translateX(-50%) scaleX(-1) !important}
#tacticsSandbox #tacticsBoard .creature-sprite.faces-right{transform:translateX(-50%) !important}

#tacticsSandbox #tacticsBoard .creature-sprite.is-hit{
  animation: creature-hit-recoil 0.35s ease-in-out !important;
}
@keyframes creature-hit-recoil{
  0%{filter:drop-shadow(0 0 10px #ff2222) brightness(1.4) saturate(1.6);transform:translateX(-50%) scale(1.05);}
  25%{filter:drop-shadow(0 0 14px #ff0000) brightness(1.6) saturate(2);transform:translateX(-55%) scale(0.96);}
  60%{filter:drop-shadow(0 0 8px #ff4444) brightness(1.2);transform:translateX(-47%) scale(1.02);}
  100%{filter:drop-shadow(1px 2px 1px #182018a8);transform:translateX(-50%) scale(1);}
}
#tacticsSandbox #tacticsBoard .creature-sprite.faces-left.is-hit{
  animation: creature-hit-recoil-left 0.35s ease-in-out !important;
}
@keyframes creature-hit-recoil-left{
  0%{filter:drop-shadow(0 0 10px #ff2222) brightness(1.4) saturate(1.6);transform:translateX(-50%) scaleX(-1) scale(1.05);}
  25%{filter:drop-shadow(0 0 14px #ff0000) brightness(1.6) saturate(2);transform:translateX(-45%) scaleX(-1) scale(0.96);}
  60%{filter:drop-shadow(0 0 8px #ff4444) brightness(1.2);transform:translateX(-53%) scaleX(-1) scale(1.02);}
  100%{filter:drop-shadow(1px 2px 1px #182018a8);transform:translateX(-50%) scaleX(-1) scale(1);}
}

#tacticsSandbox #tacticsBoard .tactic-cell.effect-hit{
  animation: cell-hit-flash 0.38s ease-in-out !important;
}
@keyframes cell-hit-flash{
  0%{box-shadow:inset 0 0 0 3px #ff3333, 0 0 18px #ff2222aa !important;}
  40%{box-shadow:inset 0 0 0 4px #ff5555, 0 0 26px #ff0000cc !important;}
  100%{box-shadow:none !important;}
}

#tacticsSandbox #tacticsBoard .creature-sprite.is-dying{
  transition: opacity 0.4s ease-out !important;
}
#tacticsSandbox #tacticsBoard .creature-sprite.is-dying.fade-out{
  opacity: 0 !important;
}

/* Authentic HoMM 1 Fantasy Modal and Squad Window styles */
.fantasy-modal {
  background: radial-gradient(ellipse at 50% 20%, #29382b 0%, #152219 70%, #0d1610 100%);
  color: #f7edcf;
  border: 4px ridge #c2a760;
  border-radius: 8px;
  box-shadow: 0 16px 45px rgba(0,0,0,0.85), inset 0 0 0 1px #4b5f42, inset 0 0 24px rgba(0,0,0,0.6);
  padding: 24px 28px;
  max-width: 640px;
  width: 92vw;
  box-sizing: border-box;
}
.fantasy-modal::backdrop {
  background: rgba(8, 12, 10, 0.75);
  backdrop-filter: blur(4px);
}
.fantasy-modal h2 {
  font: 26px Georgia, 'Times New Roman', serif;
  color: #fce8a9;
  text-shadow: 1px 2px 3px #000;
  margin: 0 0 14px 0;
  border-bottom: 2px solid #5a4b2b;
  padding-bottom: 8px;
  text-align: center;
}
.event-body {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 16px 0 22px 0;
}
.event-icon-stage {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  background: #111a14;
  border: 2px solid #a38c54;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 0 10px #000;
  font-size: 32px;
}
.event-icon-stage img, .event-icon-stage canvas {
  image-rendering: pixelated;
  transform: none;
}
.event-desc {
  font-size: 15px;
  line-height: 1.5;
  color: #e5edd8;
  margin: 0;
}
.event-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 18px;
}
.btn-fantasy {
  font: 700 14px system-ui, sans-serif;
  padding: 10px 18px;
  border-radius: 5px;
  border: 1px solid #c2a760;
  background: linear-gradient(180deg, #445938 0%, #253620 100%);
  color: #fff4d1;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 3px 6px rgba(0,0,0,0.4);
  transition: filter 0.15s, transform 0.1s;
}
.btn-fantasy:hover {
  filter: brightness(1.2);
  transform: translateY(-1px);
}
.btn-fantasy.accent {
  background: linear-gradient(180deg, #997831 0%, #634b1c 100%);
  border-color: #ffd678;
}
.btn-fantasy.danger {
  background: linear-gradient(180deg, #96382b 0%, #591b15 100%);
  border-color: #f78d7e;
}

/* Squad modal layout */
.squad-modal {
  max-width: 760px;
}
.squad-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 10px;
}
.squad-hero-title {
  font: 24px Georgia, serif;
  color: #fae298;
  margin: 0;
}
.squad-hero-sub {
  font-size: 13px;
  color: #b5c7a9;
  margin: 2px 0 0 0;
}
.squad-stats-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 16px 0;
  padding: 8px 12px;
  background: rgba(15, 23, 17, 0.7);
  border: 1px solid #576747;
  border-radius: 6px;
}
.squad-stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 3px 8px;
  background: #1e2c21;
  border: 1px solid #4a5c3e;
  border-radius: 4px;
}
.squad-stat-item strong {
  color: #ffdf79;
}
.squad-section-title {
  font: 16px Georgia, serif;
  color: #e5cb87;
  margin: 14px 0 8px 0;
  border-bottom: 1px solid #45573d;
  padding-bottom: 4px;
}
.squad-army-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.squad-unit-card {
  background: linear-gradient(180deg, #263625 0%, #152216 100%);
  border: 2px solid #827146;
  border-radius: 6px;
  padding: 8px 4px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-height: 120px;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.5);
}
.squad-unit-card.empty {
  opacity: 0.45;
  border-style: dashed;
  justify-content: center;
  color: #8c9c82;
  font-size: 12px;
}
.squad-unit-sprite {
  height: 54px;
  width: auto;
  image-rendering: pixelated;
  margin-bottom: 4px;
}
.squad-unit-name {
  font-weight: 700;
  font-size: 12px;
  color: #f7edcf;
  line-height: 1.2;
}
.squad-unit-count {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #111a12ee;
  border: 1px solid #c2a760;
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 11px;
  font-weight: 800;
  color: #ffe699;
}
.squad-artifacts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
  max-height: 160px;
  overflow-y: auto;
}
.squad-artifact-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: #1c2a1e;
  border: 1px solid #6c5f3b;
  border-radius: 5px;
}
.squad-artifact-icon {
  font-size: 20px;
}
.squad-artifact-title {
  font-size: 12px;
  font-weight: 700;
  color: #ffdf85;
}
.squad-artifact-effect {
  font-size: 11px;
  color: #a4be9e;
}


/* v45: real world-battle mode hides test controls and keeps only battle UI. */
#tacticsSandbox.world-battle-mode.tactics-fullscreen{padding:0!important}
#tacticsSandbox.world-battle-mode.tactics-fullscreen>summary,
#tacticsSandbox.world-battle-mode.tactics-fullscreen>label,
#tacticsSandbox.world-battle-mode.tactics-fullscreen>p,
#tacticsSandbox.world-battle-mode.tactics-fullscreen #tacticsWorldContext,
#tacticsSandbox.world-battle-mode.tactics-fullscreen .file,
#tacticsSandbox.world-battle-mode.tactics-fullscreen #tacticsReset,
#tacticsSandbox.world-battle-mode.tactics-fullscreen #tacticsSave{display:none!important}