/* Replaceable 2D appearance layer. Combat logic lives in core.js. */
.arena{isolation:isolate;min-height:310px;background:radial-gradient(ellipse at 50% 90%,#9c6fd34a,transparent 62%),linear-gradient(#161b34,#29364c)}
.arena[data-stage="1"]{background:radial-gradient(ellipse at 50% 90%,#91b87555,transparent 62%),linear-gradient(#142b2d,#365248)}
.arena[data-stage="2"]{background:radial-gradient(ellipse at 50% 90%,#e09e6d55,transparent 62%),linear-gradient(#35253c,#5e4051)}
.arena:after{height:80px;background:linear-gradient(165deg,transparent 10%,#283749 12%,#152b33 85%);z-index:-1}
.arena[data-stage="1"]:after{background:linear-gradient(165deg,transparent 10%,#526c4a 12%,#203d38 85%)}
.arena[data-stage="2"]:after{background:linear-gradient(165deg,transparent 10%,#79565d 12%,#342a3d 85%)}
.scenery{position:absolute;inset:0;z-index:-1;opacity:.6;pointer-events:none}
.scenery i{position:absolute;bottom:50px;width:15%;height:190px;background:repeating-linear-gradient(0deg,#8a82a13b 0 6px,transparent 6px 34px),linear-gradient(90deg,#242438,#4b4963,#242438);border-top:10px solid #8a82a14d;border-bottom:12px solid #8a82a14d}
.scenery i:nth-child(1){left:3%;height:220px}.scenery i:nth-child(2){left:28%;height:170px}.scenery i:nth-child(3){right:28%;height:170px}.scenery i:nth-child(4){right:3%;height:220px}
[data-stage="1"] .scenery i{width:8%;border:0;border-radius:60% 0 0 0;background:linear-gradient(90deg,#142c2a,#44694b);transform:rotate(10deg);box-shadow:20px -40px 0 6px #52734d44,-15px -60px 0 5px #52734d44}
[data-stage="2"] .scenery i{height:120px;transform:rotate(-8deg);background:linear-gradient(110deg,#ad878852,#5e485c);border:1px solid #cba4a644;box-shadow:12px -12px #cba4a611}
.actor{position:relative;width:140px;height:164px;margin:20px auto 0;transform-origin:50% 85%}
.shadow{position:absolute;bottom:3px;left:10px;right:10px;height:18px;border-radius:50%;background:#08172077;filter:blur(3px)}
.actor .creature{position:absolute;bottom:15px;left:12px;margin:0;animation:breathe 2.8s ease-in-out infinite}
.enemy .creature{left:26px;animation-delay:-1.4s}
.keeper:before{height:100px;width:80px;left:17px;background:linear-gradient(100deg,#95d9ce,#3f8f9c 55%,#285367);filter:drop-shadow(0 3px 1px #102531)}
.keeper:after{top:3px;left:29px;border-width:12px;border-color:#284e60;box-shadow:0 -13px 0 -3px #477c85}
.staff{position:absolute;right:0;bottom:-2px;width:7px;height:108px;background:linear-gradient(90deg,#d8be7e,#846b49);transform:rotate(-9deg);z-index:2}
.staff:after{content:'';position:absolute;left:-8px;top:-13px;width:23px;height:27px;background:#b9f4e4;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);filter:drop-shadow(0 0 10px #a6ffdb)}
.cape{position:absolute;left:8px;bottom:-4px;width:70px;height:76px;background:linear-gradient(90deg,#244357,#4d6d77);clip-path:polygon(55% 0,100% 100%,0 90%);z-index:-1}
.ink{height:95px;background:radial-gradient(circle at 35% 20%,#cfb0e1,#8967ad 65%);box-shadow:inset -12px -8px #674c87}
.ink:after{content:'•  •';top:23px;text-shadow:0 2px #d9c4f2}
.ink:before{background:#9270ac;box-shadow:0 4px 0 #684e88}
.crown{position:absolute;width:70px;height:33px;top:-24px;left:8px;background:#b89ad0;clip-path:polygon(0 0,30% 45%,50% 0,70% 45%,100% 0,85% 100%,15% 100%)}
.rune{position:absolute;left:32px;bottom:5px;width:21px;height:21px;border:2px solid #d8c1f2;transform:rotate(45deg);z-index:2}
.thorn{background:radial-gradient(circle at 35% 20%,#c1d998,#78975e 65%);box-shadow:inset -12px -8px #496e51;border-radius:35% 45% 20% 30%}
.thorn:before{background:#72915f;box-shadow:0 4px #496e51}.thorn .crown{background:#b7c58a;height:55px;top:-40px}.thorn .rune{border-color:#e1e6a2}
.eraser{background:linear-gradient(125deg,#f6cfaa,#c08a87);box-shadow:inset -12px -8px #8d6076;border-radius:12px 35px 10px 30px}
.eraser:before{background:#b8868d;box-shadow:0 4px #805b70}.eraser .crown{background:#edcb92;transform:rotate(12deg)}.eraser .rune{border-color:#ffdfa5;border-radius:50%}
.bolt{position:absolute;z-index:5;top:62%;width:32px;height:32px;border-radius:50%;background:#f8f2bf;box-shadow:0 0 12px 5px #e2c472,0 0 40px 12px #f3ba4266;pointer-events:none}
.bolt:before{content:'';position:absolute;width:80px;height:10px;right:14px;top:11px;border-radius:50%;background:linear-gradient(90deg,transparent,#eedb94)}
.bolt.dark{background:#f5c1cf;box-shadow:0 0 12px 5px #bb719d,0 0 40px 12px #e377a866}.bolt.dark:before{right:auto;left:14px;background:linear-gradient(90deg,#e3a3c7,transparent)}
.damage{position:absolute;z-index:8;top:0;left:20px;right:20px;font:bold 34px Arial;color:#ffe5aa;text-shadow:0 2px 5px #101624;pointer-events:none}
.ward:after{content:'';position:absolute;inset:-8px;border:3px solid #a5f0d0;border-radius:50%;box-shadow:0 0 22px #94efc6}
[aria-busy="true"] .tile{opacity:.55}[aria-busy="true"] button{cursor:wait}.fighter h2{text-shadow:0 2px 4px #10212c}
@keyframes breathe{0%,100%{translate:0 0}50%{translate:0 -5px}}
@media(max-width:600px){.arena{min-height:290px}.actor{width:115px;height:160px}.actor .creature{left:0}.enemy .creature{left:13px}.scenery i{width:18%}.scenery i:nth-child(2),.scenery i:nth-child(3){display:none}}
@media(prefers-reduced-motion:reduce){.actor .creature{animation:none}.bolt{box-shadow:none}.damage{font-size:26px}}