/* Transparent overhead photographic miniature atlas, 4 columns × 3 rows. */
.troop-art{
    display:block;background-image:url('assets/troop-atlas.png');
    background-size:400% 300%;background-repeat:no-repeat;
    width:100%;height:100%;pointer-events:none;
    filter:drop-shadow(0 1px 1px #000b);position:relative;z-index:1;
}
.art-spear{background-position:0 0}.art-bow{background-position:33.333333% 0}
.art-sword{background-position:66.666667% 0}.art-horse{background-position:100% 0}
.art-knight{background-position:0 50%}.art-crossbow{background-position:33.333333% 50%}
.art-longbow{background-position:66.666667% 50%}.art-bill{background-position:100% 50%}
.art-pike{background-position:0 100%}.art-commander{background-position:33.333333% 100%}
.art-armour{background-position:66.666667% 100%}.art-axe{background-position:100% 100%}
.board .cell.side1 .troop-art{transform:rotate(180deg)}
.board .cell.spent .troop-art{opacity:.65}
.company-badge,.men-badge,.leader-badge{
    position:absolute;bottom:0;z-index:4;font:700 8px/1.2 system-ui;
    padding:0 2px;border-radius:2px;color:#fff;background:#123d56e6;
    text-shadow:0 1px 1px #000;pointer-events:none;
}
.company-badge{left:0}.men-badge{right:0;background:#101b17d9}
.side1 .company-badge{background:#722c22e6}
.leader-badge{right:0;color:#ffe49b;background:#604814e6;font-size:10px}
.board .cell.unit .men-badge{opacity:0;transform:translateY(3px);transition:opacity .14s ease,transform .14s ease}
.board .cell.unit:hover .men-badge,.board .cell.unit:focus-visible .men-badge{opacity:1;transform:translateY(0)}
.unit-portrait{display:block;width:88px;height:88px;float:left;margin:0 12px 6px 0;background-color:#34443a;border:1px solid #67795e;border-radius:4px}
#unit-details{display:flow-root;min-height:20px}

.board .cell.facing-n .troop-art{transform:rotate(0deg)}
.board .cell.facing-ne .troop-art{transform:rotate(45deg)}
.board .cell.facing-e .troop-art{transform:rotate(90deg)}
.board .cell.facing-se .troop-art{transform:rotate(135deg)}
.board .cell.facing-s .troop-art{transform:rotate(180deg)}
.board .cell.facing-sw .troop-art{transform:rotate(225deg)}
.board .cell.facing-w .troop-art{transform:rotate(270deg)}
.board .cell.facing-nw .troop-art{transform:rotate(315deg)}
.board .cell.unit.axis-r::before,.board .cell.unit.axis-l::before{
    content:"";position:absolute;left:50%;top:50%;width:142%;height:68%;z-index:0;pointer-events:none;
    background:linear-gradient(90deg,#214d60dd,#3f8eabdd 50%,#214d60dd);border:1px solid #9ed8e8aa;
    box-shadow:0 1px 3px #0009;transform:translate(-50%,-50%) rotate(45deg);
}
.board .cell.unit.side1.axis-r::before,.board .cell.unit.side1.axis-l::before{background:linear-gradient(90deg,#5b271fdd,#ac5644dd 50%,#5b271fdd);border-color:#e9aa95aa}
.board .cell.unit.axis-l::before{transform:translate(-50%,-50%) rotate(-45deg)}
.board .cell.unit.axis-r .troop-art,.board .cell.unit.axis-l .troop-art{z-index:2;filter:drop-shadow(0 1px 2px #000)}
.board .cell.formation-block.side0{background:#315f72}.board .cell.formation-block.side1{background:#7d4036}
.facing-edge{position:absolute;z-index:6;pointer-events:none;background:#62d66b;box-shadow:0 0 3px #071408,0 0 4px currentColor}
.facing-edge.health-4{background:#45d46a;color:#45d46a}.facing-edge.health-3{background:#b9d84b;color:#b9d84b}.facing-edge.health-2{background:#ef9a35;color:#ef9a35}.facing-edge.health-1{background:#e3483f;color:#e3483f}
.facing-n .facing-edge{left:0;right:0;top:0;height:3px}.facing-e .facing-edge{top:0;right:0;bottom:0;width:3px}.facing-s .facing-edge{left:0;right:0;bottom:0;height:3px}.facing-w .facing-edge{top:0;left:0;bottom:0;width:3px}
.facing-ne .facing-edge,.facing-se .facing-edge,.facing-sw .facing-edge,.facing-nw .facing-edge{width:70.71%;height:3px}
.facing-ne .facing-edge{left:39.65%;top:calc(25% - 1.5px);transform:rotate(45deg)}.facing-se .facing-edge{left:39.65%;bottom:calc(25% - 1.5px);transform:rotate(-45deg)}.facing-sw .facing-edge{right:39.65%;bottom:calc(25% - 1.5px);transform:rotate(45deg)}.facing-nw .facing-edge{right:39.65%;top:calc(25% - 1.5px);transform:rotate(-45deg)}
.fatigue-badge{position:absolute;top:0;right:1px;z-index:5;padding:1px 3px;border-radius:2px;background:#6d3d18;color:#ffe1a8;font:800 8px/1.2 system-ui;pointer-events:none}
.flying-arrow{position:fixed;z-index:9999;width:24px;height:2px;pointer-events:none;transform-origin:center left;background:linear-gradient(90deg,#7b4d24 0 78%,#d6c5a1 79%);box-shadow:0 1px 2px #000}
.flying-arrow::after{content:"";position:absolute;right:-5px;top:-3px;border-left:7px solid #c9c3ad;border-top:4px solid transparent;border-bottom:4px solid transparent}
.flying-arrow::before{content:"";position:absolute;left:-5px;top:-3px;border-right:6px solid #b88b52;border-top:4px solid transparent;border-bottom:4px solid transparent}
@media(prefers-reduced-motion:reduce){.flying-arrow{display:none}}

.casualty-mark{position:absolute;inset:5%;z-index:0;pointer-events:none;opacity:.9;filter:drop-shadow(0 1px 1px #000b);background:radial-gradient(ellipse at 48% 58%,rgba(91,7,6,.88) 0 15%,rgba(64,5,4,.72) 27%,transparent 55%),radial-gradient(circle at 18% 33%,rgba(105,10,8,.78) 0 3%,transparent 5%),radial-gradient(circle at 82% 24%,rgba(76,5,5,.7) 0 2.5%,transparent 5%),radial-gradient(circle at 72% 82%,rgba(110,12,8,.74) 0 3%,transparent 6%);mix-blend-mode:multiply}
.casualty-mark::before{content:"";position:absolute;left:8%;top:42%;width:76%;height:20%;border-radius:45% 35% 48% 38%;background:#274858;transform:rotate(-24deg);box-shadow:8px -5px 0 -3px #381c17,12px 7px 0 -4px #20231c}
.casualty-mark.side1::before{background:#6b3028}.casualty-mark::after{content:"";position:absolute;left:3%;top:49%;width:90%;height:2px;background:#5b3d24;transform:rotate(31deg);box-shadow:0 1px 1px #000}
.casualty-mark .blood-splatter{position:absolute;inset:-8%;z-index:3;display:block;transform:rotate(-9deg);background:radial-gradient(circle at 38% 47%,#a70d09 0 5%,#6f0505 6% 10%,transparent 11%),radial-gradient(ellipse at 55% 57%,rgba(145,8,6,.96) 0 10%,rgba(77,3,3,.92) 14%,transparent 28%),radial-gradient(circle at 24% 25%,#bd1710 0 2.5%,transparent 3.8%),radial-gradient(circle at 73% 28%,#990a07 0 3%,transparent 4.2%),radial-gradient(circle at 84% 69%,#b30e09 0 2.5%,transparent 4%),radial-gradient(ellipse at 18% 73%,#790604 0 2%,transparent 4%),radial-gradient(ellipse at 62% 84%,#8c0705 0 3%,transparent 5%);filter:drop-shadow(0 1px 0 rgba(28,0,0,.7));mix-blend-mode:multiply}
.casualty-mark.heavy .blood-splatter{inset:-14%;transform:rotate(14deg) scale(1.12);background:radial-gradient(circle at 36% 48%,#b20d09 0 7%,#650302 8% 15%,transparent 17%),radial-gradient(ellipse at 56% 58%,rgba(153,7,5,.98) 0 14%,rgba(68,2,2,.94) 20%,transparent 35%),radial-gradient(circle at 17% 21%,#c21b12 0 3%,transparent 4.5%),radial-gradient(circle at 76% 23%,#a50906 0 4%,transparent 5.5%),radial-gradient(circle at 89% 66%,#b90f09 0 3.5%,transparent 5%),radial-gradient(circle at 13% 79%,#870604 0 3%,transparent 5%),radial-gradient(circle at 66% 88%,#9e0805 0 4%,transparent 6%)}
.casualty-mark.heavy{opacity:1;background:radial-gradient(ellipse at 47% 57%,rgba(103,7,5,.95) 0 25%,rgba(61,3,3,.82) 40%,transparent 68%),radial-gradient(circle at 13% 27%,rgba(116,9,7,.86) 0 4%,transparent 7%),radial-gradient(circle at 87% 20%,rgba(92,5,5,.82) 0 4%,transparent 7%),radial-gradient(circle at 76% 87%,rgba(119,10,7,.82) 0 5%,transparent 8%)}.casualty-mark.heavy::before{box-shadow:8px -5px 0 -2px #381c17,12px 7px 0 -3px #20231c,-6px 7px 0 -3px #4a211b}

/* Separate photographic figures from detailed terrain without coloured outlines. */
.board .cell.unit .troop-art,.board .cell .art-commander{
    width:108%;height:108%;margin:-4%;
    filter:contrast(1.24) saturate(1.16) brightness(1.12)
        drop-shadow(0 2px 1px #000)
        drop-shadow(0 0 3px #000e)
        drop-shadow(1px 1px 1px #000c);
}
.board .cell.unit.spent .troop-art{opacity:.78;filter:contrast(1.16) saturate(.92) brightness(.94) drop-shadow(0 2px 2px #000) drop-shadow(0 0 3px #000d)}