/* Visual combat stays independent of the page layout and game rules. */
.fighter{position:absolute;transform:translate(-50%,-50%);width:43px;height:48px;padding:0;background:none;border:0;border-radius:0;transition:none;cursor:pointer;will-change:left,top;touch-action:manipulation}
.fighter-name{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);font:12px/1.2 'Geist Mono',monospace;color:#fffde9;white-space:nowrap;text-shadow:1px 1px #080f10;background:#0e191bc9;padding:2px 4px;border:1px solid transparent;border-radius:3px;max-width:115px;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.fighter-body{position:absolute;inset:0;transform:scaleX(var(--facing,1));pointer-events:none}.fighter-sprite{position:absolute;inset:0;background-image:url('fighters.png');background-size:200% 200%;background-position:var(--sprite-x) var(--sprite-y);image-rendering:pixelated;pointer-events:none;filter:drop-shadow(0 2px 0 #07110e88)}
.fighter.walking .fighter-sprite{animation:walk-step .2s steps(2,end) infinite}.fighter.attacking .fighter-sprite{animation:target-strike .32s steps(3,end) 1}.fighter.hit .fighter-sprite{animation:target-hit .3s steps(2,end) 1}.fighter.windup .fighter-sprite{transform:translateX(-5px) rotate(-12deg)}.fighter.spawn .fighter-sprite{animation:spawn .6s steps(5,end)}
.fighter.engaged .fighter-name{border-color:#9ea782;background:#1c2a24ed}.fighter.targeted .fighter-name{border-color:#cb947f;color:#ffe8c8}.fighter.mine .fighter-name{background:#c5e6a1;color:#233226;text-shadow:none;font-weight:600;border-color:#e0ffc1}.fighter.mine:after{content:'';position:absolute;bottom:1px;left:6px;right:6px;height:7px;border:1px solid #c4eca0;border-radius:50%;z-index:-1}
.fighter.followed{z-index:120!important}.fighter.followed .fighter-name{background:#ffe098;color:#30271b;border-color:#fff3c8;text-shadow:none}.fighter.opponent{z-index:119!important}.fighter.opponent .fighter-name{background:#784c41;color:#fff4e4;border-color:#e3ac8e;text-shadow:none}.fighter.dead{opacity:.2;z-index:1!important}.fighter.dead .fighter-body{transform:rotate(90deg) scale(.75)}.fighter.dead .fighter-sprite{animation:none;transform:none;filter:grayscale(1)}.fighter.dead .fighter-name{opacity:0}.fighter.finishing{opacity:1}.fighter:focus-visible{outline:2px solid #ffe5a0;outline-offset:5px;border-radius:6px}.fighter.winner{z-index:130!important}.fighter.winner .fighter-name{background:#ffda6f;color:#3b2e14;border-color:#fff1b8;text-shadow:none;font-weight:650}.fighter.winner .fighter-body{filter:drop-shadow(0 0 5px #f7d57e)}.fighter.winner .fighter-sprite{animation:win-hop .7s steps(2,end) infinite}
.fighters.dense .fighter{width:33px;height:38px}.fighters.dense .fighter-name{bottom:33px}.hit-number{position:absolute;top:-12px;left:50%;color:#ffd5ab;font-family:var(--pixel);font-size:20px;font-weight:500;text-shadow:1px 1px #422013;z-index:6;animation:damage .7s ease-out forwards;pointer-events:none;white-space:nowrap}.hit-number.block{color:#c9e6de}.hit-number.ko{font-size:23px;color:#ffbea7}
.fighter.archer .fighter-sprite{background-image:url('ranged.png');background-size:200% 200%;background-position:0 0}.fighter.wizard.casting .fighter-sprite{animation:cast-spell .4s steps(3,end) 1}.fighter.archer.shooting .fighter-sprite{animation:release-arrow .4s steps(3,end) 1}.fighter.wizard.windup .fighter-sprite{filter:drop-shadow(0 0 4px #e9a051);transform:translateY(-2px)}.fighter.archer.windup .fighter-sprite{transform:translateX(-3px) rotate(-4deg)}
.projectile{position:absolute;pointer-events:none;z-index:160;background-image:url('ranged.png');background-repeat:no-repeat;background-size:200% 200%;image-rendering:pixelated;transform-origin:center;will-change:left,top;overflow:hidden}.projectile-fireball{width:40px;height:34px;background-position:100% 0;filter:drop-shadow(0 0 3px #e78639)}.projectile-arrow{width:58px;height:42px;background-position:0 100%}.projectile-impact{position:absolute;pointer-events:none;z-index:161;width:48px;height:48px;background:url('ranged.png') 100% 100%/200% 200% no-repeat;image-rendering:pixelated;transform:translate(-50%,-50%);animation:projectile-burst .3s steps(3,end) forwards}.projectile-impact.fireball{width:34px;height:34px}.projectile-impact.arrow{width:32px;height:32px}
@keyframes walk-step{50%{transform:translateY(-3px) rotate(3deg)}}@keyframes target-strike{0%{transform:translateX(-6px) rotate(-18deg)}45%{transform:translateX(10px) rotate(20deg)}100%{transform:translateX(0) rotate(0)}}@keyframes target-hit{0%,60%{filter:brightness(2);transform:translateX(-4px)}30%,100%{filter:none;transform:translateX(3px)}}@keyframes spawn{from{opacity:0;transform:scale(.2) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes damage{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,-22px)}}@keyframes win-hop{0%,100%{transform:translateY(0) scale(1.2)}50%{transform:translateY(-6px) scale(1.2)}}
@keyframes cast-spell{0%{transform:translateX(-3px) rotate(-5deg)}40%{transform:translateY(-3px);filter:brightness(1.6)}70%{transform:translateX(4px)}100%{transform:none}}@keyframes release-arrow{0%{transform:translateX(-4px) rotate(-4deg)}45%{transform:translateX(-5px)}65%{transform:translateX(4px) rotate(3deg)}100%{transform:none}}@keyframes projectile-burst{0%{transform:translate(-50%,-50%) scale(.5);opacity:1}45%{transform:translate(-50%,-50%) scale(1.15);opacity:1}100%{transform:translate(-50%,-50%) scale(.8);opacity:0}}
@media(max-width:650px){.fighter{width:34px;height:40px}.fighter-name{bottom:34px;max-width:83px}.fighters.dense .fighter{width:27px;height:33px}.fighters.dense .fighter-name{bottom:28px}.projectile-fireball{width:32px;height:28px}.projectile-arrow{width:47px;height:34px}.projectile-impact.fireball{width:30px;height:30px}.projectile-impact.arrow{width:28px;height:28px}.hit-number{font-size:17px}}
.can-revive .fighter.dead:hover,.can-revive .fighter.dead:focus-visible{opacity:.8;z-index:400!important}.can-revive .fighter.dead:hover .fighter-name,.can-revive .fighter.dead:focus-visible .fighter-name{opacity:1}