/* Approved desktop preview placement, original PNG unchanged. */
body {background-image:url("../images/lower_bg.jpg"),url("../images/protomu-header-clouds-blended.png");background-size:auto,2187px 1296px;}
#hand {display:none;}
#hand5 {background:none;width:800px;height:600px;margin-left:-200px;margin-top:-310px;overflow:visible;z-index:3;pointer-events:none;user-select:none;}
#hand5 img {display:block;width:800px;height:auto;max-width:none;} #hand5 .knight-body {clip-path:inset(0 0 48.33% 0);} #hand5 .knight-slash {position:absolute;top:0;left:0;clip-path:polygon(0 25%,20% 37%,33% 45%,40% 46%,43% 48%,46% 53%,50% 62%,57% 69%,65% 75%,76% 84%,82% 88%,80% 91%,0 36%);} #slider_bg {position:relative;z-index:4;}
/* Keep the original thin brown content frame above the decorative cutout. */
#main { position:relative; }
#main::before {
 content:''; position:absolute; left:0; top:-10px; width:1020px; height:10px;
 background:url('../images/bg.jpg') -583.5px -410px no-repeat;
 z-index:5; pointer-events:none;
}
#main::after {
 content:''; position:absolute; left:0; top:0; width:8px; height:400px;
 background:url('../images/bg.jpg') -583.5px -420px no-repeat;
 z-index:5; pointer-events:none;
}
/* Body stops above the frame; only the sword slash passes in front of it. */
#hand5 { z-index:6; }
#hand5 .knight-body { clip-path:inset(0 0 50% 0); }
#slider_bg { z-index:7; }

/* Shift artwork left, while keeping its left edge inside the viewport. */
#hand5 { margin-left:max(-235px,calc(530px - 50vw)); }

/* Edited legless PNG: complete artwork, without polygon sword masking. */
#hand5 {width:680px;height:510px;margin-top:-335px;}
#hand5 img {width:680px;}
#hand5 .knight-body {clip-path:none;}
#hand5 .knight-slash {display:none;}

/* Original waist preserved; lower legs removed from edited PNG. */
#hand5 {width:760px;height:570px;margin-top:-335px;}
#hand5 img {width:760px;}
#hand5 .knight-body {clip-path:inset(0 0 43% 0);}
#hand5 .knight-slash {display:block;clip-path:polygon(0 27%,33% 50%,48% 62%,58% 73%,76% 88%,76% 93%,0 37%);}