:root{--red:#ff5d91;--blue:#50c3ff}
.siege-board{position:relative;height:480px;min-height:480px;overflow:hidden;background:#0c162c;border-color:#a1b8df;box-shadow:0 0 0 5px #d8eeff11,0 22px 64px #0009,inset 0 0 35px #0008}
.siege-board canvas{display:block;width:100%;height:100%}
.castle-health{position:absolute;z-index:2;top:18px;width:min(31%,180px);display:grid;grid-template-columns:1fr auto;align-items:center;gap:5px;padding:8px 10px;border:1px solid #ffffff57;border-radius:10px;background:#081328c7;color:#f5faff;font-size:.62rem;font-weight:900;letter-spacing:.04em;box-shadow:0 8px 25px #0007}
.castle-health>div{grid-column:1/-1;grid-row:2;height:8px;border-radius:999px;background:#101725;overflow:hidden;border:1px solid #ffffff3e}
.castle-health i{display:block;height:100%;width:100%;transition:width .45s ease;background:linear-gradient(90deg,#c92761,#ff8ab1)}
.castle-health b{font-size:.68rem}.red-health{left:15px;border-color:#ff82ad88}.blue-health{right:15px;text-align:right;border-color:#65c9ff88}.blue-health i{background:linear-gradient(90deg,#43a7e9,#83e5ff)}
.siege-callout{position:absolute;z-index:4;top:20%;left:50%;transform:translate(-50%,-5px) scale(.82);opacity:0;white-space:nowrap;padding:9px 13px;border:2px solid #fff9;border-radius:12px;background:#17213ce8;color:#fff;font-size:1rem;font-weight:1000;letter-spacing:.03em;box-shadow:0 10px 25px #000a;pointer-events:none}.siege-callout.red{border-color:#ff7baa}.siege-callout.blue{border-color:#67d3ff}.siege-callout.show{animation:siegePop .95s ease-out forwards}
@keyframes siegePop{0%{opacity:0;transform:translate(-50%,10px) scale(.7)}20%,65%{opacity:1;transform:translate(-50%,-12px) scale(1)}100%{opacity:0;transform:translate(-50%,-30px) scale(.9)}}
.siege-board.victory-red{box-shadow:0 0 45px #ff589488,inset 0 0 50px #ff589444}.siege-board.victory-blue{box-shadow:0 0 45px #46bfff88,inset 0 0 50px #46bfff44}
.team.red{background:linear-gradient(135deg,#a62e5c,#752b58)}.team.blue{background:linear-gradient(135deg,#143d73,#1776ad)}
@media(max-width:900px){.siege-board{height:420px;min-height:420px}}
@media(max-width:580px){.siege-board{height:320px;min-height:320px}.castle-health{top:9px;width:38%;padding:5px 6px;font-size:.45rem}.castle-health b{font-size:.5rem}.red-health{left:7px}.blue-health{right:7px}.siege-callout{font-size:.7rem}}
@media(max-aspect-ratio:4/5){.siege-board{height:min(80vw,60svh);min-height:0;aspect-ratio:1/1}}