*{box-sizing:border-box}body{margin:0;font-family:Avenir Next,Segoe UI,system-ui,sans-serif;background:radial-gradient(ellipse at top,#2c2420,#17120f 70%);color:#e8dcc8;min-height:100vh}button{font:inherit;cursor:pointer}.launch{max-width:560px;margin:0 auto;padding:48px 24px 64px;display:flex;flex-direction:column;gap:20px}.title{margin:0;text-align:center;font-size:56px;color:#d9b98c;letter-spacing:2px}.title span{display:block;font-size:22px;letter-spacing:8px;color:#b08d57;text-transform:uppercase}.tagline{text-align:center;margin:-8px 0 8px;color:#8f7a5f}.resume-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border:2px solid #3f9d3f;border-radius:10px;background:#1d3d1d;color:#d7f0d7}.resume-banner strong{color:#e3b04b;letter-spacing:2px}.resume-actions{display:flex;gap:8px}.resume-yes{border:none;border-radius:8px;padding:6px 18px;background:#3f9d3f;color:#fff;font-weight:700}.resume-no{border:1px solid #a33;border-radius:8px;padding:6px 12px;background:transparent;color:#d98a8a}.field{display:flex;flex-direction:column;gap:8px;font-size:14px;color:#b08d57;text-transform:uppercase;letter-spacing:1px}input{font:inherit;padding:12px 14px;border-radius:10px;border:1px solid #4d3f2e;background:#241d16;color:#e8dcc8;outline:none}input:focus{border-color:#b08d57}.avatar-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.avatar-pick{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;background:#241d16;border:2px solid #4d3f2e;border-radius:12px;color:#b08d57;font-size:12px}.avatar-pick.selected{border-color:#e3b04b;background:#2f2619;color:#e8dcc8}.primary{padding:14px;border:none;border-radius:10px;background:linear-gradient(#c33,#8e1f1f);color:#fff;font-size:18px;font-weight:600;letter-spacing:1px}.primary:disabled{opacity:.4;cursor:default}.divider{text-align:center;color:#6f5c43;font-size:13px;text-transform:uppercase;letter-spacing:2px}.join-row{display:flex;gap:10px}.join-row input{flex:1;text-transform:uppercase;letter-spacing:4px;font-size:18px}.join-row button{padding:0 28px;border-radius:10px;border:1px solid #b08d57;background:#2f2619;color:#e8dcc8;font-size:16px}.join-row button:disabled{opacity:.4;cursor:default}.error{background:#5a1c1c;border:1px solid #a33;color:#ffd9d9;padding:10px 14px;border-radius:8px;text-align:center}.error.floating{position:fixed;bottom:24px;left:50%;transform:translate(-50%);z-index:20}.game{margin:0 auto;padding:8px 12px;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column}.layout{--side: clamp(260px, 24vw, 340px);display:flex;justify-content:center;align-items:stretch;gap:14px;flex:1;min-height:0}.side{display:flex;flex-direction:column;gap:10px;width:var(--side);flex:none;min-height:0}.side .grave{width:auto;flex:1;min-height:0;overflow-y:auto}.layout>.board{align-self:center}.side-info{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:10px 14px;border:2px solid #4d3f2e;border-radius:10px;background:linear-gradient(180deg,#2a221a,#241d16 55%,#1e1811);box-shadow:0 4px 10px #00000059,inset 0 1px #ffffff17}.player-card,.grave,.turn-banner,.dialog{background:linear-gradient(180deg,#2a221a,#241d16 55%,#1e1811);box-shadow:0 4px 10px #00000059,inset 0 1px #ffffff17}.player-card{display:flex;align-items:center;gap:14px;padding:8px 16px;border:2px solid #4d3f2e;border-radius:16px}.turn-chip{margin-left:auto;padding:7px 14px;border-radius:999px;font-size:15px;font-weight:700;white-space:nowrap}.turn-chip.yours{background:linear-gradient(#2c5a2c,#1d3d1d);border:1px solid #3f9d3f;color:#eaffea;letter-spacing:1px;animation:yourturn 1.6s ease-in-out infinite}.turn-chip.thinking{border:1px solid #4d3f2e;background:#241d16;color:#b08d57;animation:thinkpulse 1.6s ease-in-out infinite}@keyframes thinkpulse{0%,to{opacity:1}50%{opacity:.45}}.player-card.active{border-color:#e3b04b;box-shadow:0 0 12px #e3b04b44}.player-card.offline{opacity:.55}.player-card.empty{color:#8f7a5f;font-size:14px;justify-content:center}.pname{font-weight:600;font-size:22px}.pname em{color:#8f7a5f;font-style:normal;font-size:14px}.pmeta{font-size:16px;color:#8f7a5f}.color-chip{font-weight:700;letter-spacing:1px}.color-chip.red{color:#e05a4e}.color-chip.black{color:#cfcfcf}.center-info{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}.code{color:#8f7a5f;font-size:14px}.code strong{color:#e3b04b;letter-spacing:3px;font-size:18px}.turn-banner{text-align:center;font-size:18px;font-weight:800;letter-spacing:2px;padding:6px;border-radius:12px;margin-bottom:6px;border:2px solid #4d3f2e;color:#b08d57;background:#241d16}.turn-banner.yours{color:#eaffea;border-color:#3f9d3f;background:linear-gradient(#2c5a2c,#1d3d1d);animation:yourturn 1.6s ease-in-out infinite}.turn-banner.theirs{color:#8f7a5f;font-weight:600;letter-spacing:1px}.turn-banner.waiting{color:#e3b04b;border-color:#b08d57}@keyframes yourturn{0%,to{box-shadow:0 0 6px #3f9d3f66}50%{box-shadow:0 0 22px #3f9d3fcc}}.last-move-bar{display:flex;flex-direction:column;align-items:stretch;gap:6px;color:#cbb894;font-size:14px}.last-move-bar button{border:1px solid #b08d57;background:#2f2619;color:#e3b04b;border-radius:8px;padding:4px 14px;font-size:13px}.cell.last-move{outline:2px dashed #e3b04b99;outline-offset:-2px}.cell.last-flash{animation:lastflash .7s ease-in-out 3}.ghost{position:fixed;display:flex;align-items:center;justify-content:center;pointer-events:none}.ghost.mover{z-index:6;transition:left 1.6s ease-in-out .3s,top 1.6s ease-in-out .3s}.ghost.mover .puck{box-shadow:0 8px 18px #000a}.ghost.victim{z-index:5;transition:transform 1.3s ease-in-out}.grave-item{display:flex;align-items:center;gap:3px;flex:none}.grave-item.arriving{visibility:hidden}.dead-count{color:#b08d57;font-size:15px;font-weight:700}.cell.replay-hide .puck{opacity:0}.cell.flip .puck{animation:flipreveal 1s ease}@keyframes flipreveal{0%{transform:rotateY(90deg)}to{transform:rotateY(0)}}@keyframes lastflash{0%,to{background:#cbaa73;outline-color:#e3b04b99}50%{background:#f2d089;outline-color:#e3b04b;box-shadow:0 0 18px #e3b04bcc}}.copy-link{border:1px solid #b08d57;background:transparent;color:#e3b04b;border-radius:8px;padding:3px 14px;font-size:13px}.copy-link:hover{background:#e3b04b22}.turn-banner .copy-link{margin-left:10px;vertical-align:2px}.resign{border:1px solid #a33;background:transparent;color:#d98a8a;border-radius:8px;padding:3px 14px;font-size:13px}.board{--cell: clamp(44px, min( calc((100vh - 76px)/8) , calc((100vw - 2 * var(--side, 300px) - 70px) / 4)), 130px);--cell: clamp(44px, min( calc((100svh - 76px)/8) , calc((100vw - 2 * var(--side, 300px) - 70px) / 4)), 130px);display:grid;position:relative;grid-template-columns:repeat(4,var(--cell));grid-template-rows:repeat(8,var(--cell));gap:4px;padding:10px;background:#5c4327;border:4px solid #3d2c18;border-radius:10px;box-shadow:inset 0 0 30px #0006}.cell{background:linear-gradient(145deg,#d4b37e,#bd9a62);border-radius:6px;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:inset 0 1px 1px #fff5,inset 0 -2px 3px #00000040,0 2px 3px #00000038;cursor:pointer}.cell.selected{outline:3px solid #e3b04b;outline-offset:-3px}.cell.can-capture{outline:3px solid #e05a4e;outline-offset:-3px}.dot{position:absolute;width:18px;height:18px;border-radius:50%;background:#3d2c1877;pointer-events:none}.puck{width:calc(var(--cell, 76px) - 6px);height:calc(var(--cell, 76px) - 6px);border-radius:50%;background:radial-gradient(circle at 35% 30%,#f0dbb0,#d9b98c 60%,#b8945f);border:3px solid #a07c4a;box-shadow:0 3px #8a6a3c,0 6px 7px #00000059;transform:translateY(-2px);display:flex;align-items:center;justify-content:center;position:relative;font-size:calc(var(--cell, 76px) * .48);font-weight:700;font-family:Kaiti SC,STKaiti,KaiTi,"Noto Serif SC",serif;-webkit-user-select:none;user-select:none;line-height:1}.puck.red,.puck.black{border-color:currentColor;text-shadow:0 1px 0 #ffffff66}.puck.red:after,.puck.black:after{content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;border-radius:50%;border:1.5px solid currentColor;pointer-events:none}.puck.red{color:#a4231a}.puck.black{color:#221c14}.puck.hidden-piece{background:radial-gradient(circle at 35% 30%,#ecd5a7,#d3b184 60%,#b08d57)}.puck.small{width:58px;height:58px;font-size:30px;border-width:2px;box-shadow:0 2px #8a6a3c,0 4px 4px #0000004d;transform:translateY(-1px)}.puck.small:after{top:2px;right:2px;bottom:2px;left:2px;border-width:1px}.grave{width:160px;padding:12px;background:#241d16;border:2px solid #4d3f2e;border-radius:10px;min-height:200px}.grave h3{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0 0 10px;font-size:13px;color:#b08d57;text-transform:uppercase;letter-spacing:1px}.info-row{display:flex;justify-content:flex-end;flex:none;margin-bottom:-4px}.info-btn{width:26px;height:26px;flex:none;border-radius:50%;border:1.5px solid #b08d57;background:#2f2619;color:#e3b04b;font-family:Georgia,serif;font-style:italic;font-weight:700;font-size:15px;line-height:1}.legend-pop{min-width:340px;text-align:left}.legend-pop h2{text-align:center;font-size:26px}.legend-pop .legend-row{font-size:17px;padding:7px 0}.legend-pop .primary{width:100%;margin-top:14px;font-size:15px;padding:9px}.grave-list{display:flex;flex-wrap:wrap;gap:6px}.grave .none{color:#6f5c43}.legend-row{display:flex;align-items:center;gap:10px;font-size:16px;padding:6px 0;color:#cbb894}.lchar{width:34px;height:34px;flex:none;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f0dbb0,#d9b98c 60%,#b8945f);border:1.5px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:19px;font-family:Kaiti SC,STKaiti,KaiTi,"Noto Serif SC",serif;line-height:1}.lchar.red{color:#a4231a}.lchar.black{color:#221c14}.legend-symbol{flex:none;width:28px;font-size:14px;font-weight:800;color:#e3b04b;font-family:Georgia,serif}.lname{white-space:nowrap}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000a;display:flex;align-items:center;justify-content:center;z-index:30}.dialog{background:#241d16;border:2px solid #b08d57;border-radius:14px;padding:32px 44px;text-align:center}.dialog h2{margin:0 0 8px;font-size:34px;color:#e3b04b}.dialog p{color:#cbb894;margin:0 0 20px}@media (max-width: 860px){.game{padding:6px 8px 10px;height:auto;min-height:100vh;min-height:100svh;overflow:visible;display:block}.layout{flex-direction:row;flex-wrap:wrap;gap:6px;align-items:flex-start}.side{display:contents}.player-card{flex:1 1 40%;order:0;min-width:0;padding:4px 8px;gap:8px;border-radius:10px}.player-card svg{width:34px;height:34px}.pname{font-size:12px}.pname em,.pmeta{font-size:9px}.code{display:none}.turn-chip{font-size:10px;padding:3px 8px}.turn-banner{font-size:14px;letter-spacing:1px;padding:5px;margin-bottom:6px;border-radius:8px}.board{order:1;flex:none;margin:0 auto;--cell: min( calc((100vw - 60px)/4) , calc((100vh - 220px)/8) );--cell: min( calc((100vw - 60px)/4) , calc((100svh - 220px)/8) );gap:3px;padding:6px;border-width:3px}.puck{width:88%;height:88%;font-size:calc(var(--cell) * .5)}.side-info{order:2;width:100%;flex-direction:row;align-items:center;justify-content:center;gap:10px;padding:4px 8px}.last-move-bar{flex-direction:row;align-items:center;font-size:11px;gap:8px}.last-move-bar button{font-size:11px;padding:2px 8px}.resign{font-size:11px;padding:2px 10px;flex:none}.side .grave{order:3;flex:none;width:100%;min-height:0;padding:5px 8px;display:flex;align-items:center;gap:8px;overflow:visible}.side .grave h3{margin:0;width:52px;flex:none;font-size:10px}.grave-list{flex:1;flex-wrap:nowrap;overflow-x:auto;gap:4px}.grave .puck.small{width:30px;height:30px;font-size:17px}.info-btn{position:fixed;bottom:12px;right:12px;width:38px;height:38px;font-size:20px;z-index:15;box-shadow:0 3px 8px #0008}}.battle{position:absolute;top:0;right:0;bottom:0;left:0;z-index:8;display:flex;align-items:center;justify-content:center;gap:5%;background:#150e08d9;border-radius:12px}.battle .battle-fig{margin:0;position:relative}.battle .warrior{position:relative;font-size:calc(var(--cell, 90px) * 2.2);line-height:1;transform-origin:50% 94%;animation:stand 3.6s ease-in-out infinite}.battle .warrior svg{display:block;height:1.06em;width:auto;filter:drop-shadow(0 6px 12px #000000cc)}.battle .half{display:block;line-height:1}.battle .half.r{position:absolute;left:0;top:0;width:100%;clip-path:polygon(58% 0,100% 0,100% 100%,42% 100%)}.battle .half.l{clip-path:polygon(0 0,58% 0,42% 100%,0 100%)}.battle .half.r svg{margin:0 auto}.battle .battle-fig.flip .warrior svg{transform:scaleX(-1)}.battle .flip[data-piece=horse] .fx:before{left:auto;right:14%}.battle .flip[data-piece=horse] .fx:after{left:auto;right:24%}.battle .flip[data-piece=chariot] .fx:before{left:auto;right:8%}.battle .flip[data-piece=chariot] .fx:after{right:auto;left:0;transform:scaleX(-1)}@media (prefers-reduced-motion: reduce){.battle *,.battle :before,.battle :after{animation:none!important}}@keyframes stand{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-.6deg)}}.battle .warrior[class*=kill-]{animation-duration:1.25s;animation-iteration-count:1;animation-timing-function:cubic-bezier(.3,0,.3,1)}.battle .warrior.kill-general{animation-name:kill-general}@keyframes kill-general{0%{transform:none}24%{transform:translate(-10%) rotate(-12deg) scaleY(.94)}44%{transform:translate(16%) rotate(11deg)}56%{transform:translate(12%) rotate(6deg)}to{transform:none}}.battle .warrior.kill-guard{animation-name:kill-guard}@keyframes kill-guard{0%{transform:none}30%{transform:translate(-14%) scaleX(.97)}46%{transform:translate(24%)}58%{transform:translate(18%)}to{transform:none}}.battle .warrior.kill-minister{animation-name:kill-minister}@keyframes kill-minister{0%{transform:none}32%{transform:translateY(-6%)}52%{transform:translateY(-3%) translate(5%)}to{transform:none}}.battle .warrior.kill-chariot{animation-name:kill-chariot}@keyframes kill-chariot{0%{transform:none}16%{transform:translate(-7%)}34%{transform:translate(14%) translateY(-1.5%)}44%{transform:translate(22%) translateY(1.5%)}54%{transform:translate(28%) translateY(-1%)}66%{transform:translate(24%)}to{transform:none}}.battle .warrior.kill-horse{animation-name:kill-horse}@keyframes kill-horse{0%{transform:none}24%{transform:rotate(20deg) translateY(-3%)}62%{transform:rotate(17deg) translateY(-2%)}78%{transform:rotate(-3deg) translate(-2%)}to{transform:none}}.battle .warrior.kill-cannon{animation-name:kill-cannon}@keyframes kill-cannon{0%,38%{transform:none}46%{transform:translate(-9%) rotate(-2deg)}62%{transform:translate(-5%)}to{transform:none}}.battle .warrior.kill-soldier{animation-name:kill-soldier}@keyframes kill-soldier{0%{transform:none}16%{transform:translate(-8%)}28%{transform:translate(16%)}40%{transform:translate(3%)}54%{transform:translate(22%) rotate(2deg)}68%{transform:translate(8%)}to{transform:none}}.battle .warrior svg .shot,.battle .warrior svg .flash{opacity:0}.warrior[class*=kill-] svg .wheelA,.battle .warrior[class*=kill-] svg .wheelB{transform-box:fill-box;transform-origin:center;animation:spin .45s linear 2}@keyframes spin{to{transform:rotate(360deg)}}.battle .warrior.kill-cannon svg .shot{transform-box:fill-box;transform-origin:center;animation:shot 1.25s linear 1}@keyframes shot{0%,40%{opacity:0;transform:translate(-34px,26px) scale(.4)}47%{opacity:1;transform:translate(-6px,5px) scale(.9)}72%{opacity:1;transform:translate(16px,-12px) scale(1)}to{opacity:0;transform:translate(34px,-26px) scale(1)}}.battle .warrior.kill-cannon svg .flash{transform-box:fill-box;transform-origin:center;animation:flash 1.25s linear 1}@keyframes flash{0%,40%{opacity:0;transform:scale(.4)}48%{opacity:1;transform:scale(1.15)}60%{opacity:.5}68%,to{opacity:0}}.battle .warrior.kill-minister svg .hu{transform-box:fill-box;transform-origin:center;animation:hu-raise 1.25s ease 1}@keyframes hu-raise{0%,20%{transform:none}38%{transform:translateY(-12px) rotate(-7deg)}58%{transform:translateY(-9px) rotate(-4deg)}80%,to{transform:none}}.battle .warrior.kill-guard svg .shield{transform-box:fill-box;transform-origin:center;animation:shield-lead 1.25s ease 1}@keyframes shield-lead{0%,26%{transform:none}46%{transform:translate(10px)}60%{transform:translate(6px)}to{transform:none}}.battle .warrior.kill-guard svg .axe{transform-box:fill-box;transform-origin:50% 40%;animation:axechop 1.25s ease 1}@keyframes axechop{0%,24%{transform:none}38%{transform:rotate(-30deg)}52%{transform:rotate(46deg)}64%{transform:rotate(28deg)}to{transform:none}}.battle .warrior.kill-soldier svg .spearg{transform-box:fill-box;transform-origin:center;animation:spearjab 1.25s ease 1}@keyframes spearjab{0%,20%{transform:none}30%{transform:translate(9px,-11px)}40%{transform:none}52%{transform:translate(12px,-14px)}64%{transform:none}to{transform:none}}.battle .warrior.kill-horse svg .flegs{transform-box:fill-box;transform-origin:50% 4%;animation:kick 1.25s ease 1}@keyframes kick{0%,26%{transform:none}36%{transform:rotate(44deg)}46%{transform:rotate(18deg)}56%{transform:rotate(50deg)}66%{transform:rotate(14deg)}78%{transform:none}}.battle .fx{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:3;opacity:0}.battle .warrior[class*=kill-]~.fx{opacity:1}.battle [data-piece=general] .fx:before{content:"";position:absolute;top:2%;right:2%;width:64%;height:80%;border-radius:50%;border:5px solid transparent;border-right-color:#f2c96b;border-bottom-color:#f2c96baa;filter:drop-shadow(0 0 8px #ffdf9e);opacity:0}.battle [data-piece=general] .warrior.kill-general~.fx:before{animation:cleave 1.25s linear 1}@keyframes cleave{0%,32%{opacity:0;transform:rotate(-160deg)}44%{opacity:1}58%{opacity:0;transform:rotate(45deg)}to{opacity:0}}.battle [data-piece=general] .fx:after{content:"";position:absolute;top:40%;right:10%;width:5px;height:5px;border-radius:50%;background:#ffdf9e;opacity:0;box-shadow:14px -20px 0 -1px #f2c96b,26px -6px #ffdf9e,20px 12px 0 -2px #f2c96b,8px -32px 0 -2px #f6e6c1}.battle [data-piece=general] .warrior.kill-general~.fx:after{animation:sparks 1.25s ease-out 1}@keyframes sparks{0%,44%{opacity:0;transform:scale(.4)}52%{opacity:1}78%{opacity:0;transform:scale(1.5) translate(10px,8px)}to{opacity:0}}.battle [data-piece=guard] .fx:before{content:"";position:absolute;top:36%;right:4%;width:28%;aspect-ratio:1;border-radius:50%;border:4px solid #f6e6c1;opacity:0;box-shadow:0 0 12px #ffdf9e66,inset 0 0 8px #ffdf9e44}.battle [data-piece=guard] .warrior.kill-guard~.fx:before{animation:bash-ring 1.25s ease-out 1}@keyframes bash-ring{0%,42%{opacity:0;transform:scale(.3)}50%{opacity:1}74%{opacity:0;transform:scale(2)}to{opacity:0}}.battle [data-piece=guard] .fx:after{content:"";position:absolute;top:42%;right:10%;width:10px;height:10px;background:#d9c496;clip-path:polygon(50% 0,100% 100%,0 80%);opacity:0;box-shadow:18px -10px 0 -2px #c9ab74,14px 14px 0 -3px #d9c496}.battle [data-piece=guard] .warrior.kill-guard~.fx:after{animation:shards 1.25s ease-out 1}@keyframes shards{0%,46%{opacity:0;transform:rotate(0) scale(.5)}54%{opacity:1}80%{opacity:0;transform:rotate(140deg) scale(1.4) translate(12px,-6px)}to{opacity:0}}.battle [data-piece=minister] .fx:before{content:"誅";position:absolute;top:24%;right:2%;font-family:var(--hanzi);font-size:34%;line-height:1;color:#c23b26;border:3px solid #c23b26;border-radius:6px;padding:2% 3%;transform:rotate(-8deg);opacity:0;filter:drop-shadow(0 0 6px #c23b2688)}.battle [data-piece=minister] .warrior.kill-minister~.fx:before{animation:seal 1.25s ease 1}@keyframes seal{0%,40%{opacity:0;transform:rotate(-8deg) scale(2.2)}54%{opacity:1;transform:rotate(-8deg) scale(1)}58%{transform:rotate(-8deg) scale(1.08)}84%{opacity:1}to{opacity:0}}.battle [data-piece=minister] .fx:after{content:"敕";position:absolute;top:40%;right:26%;font-family:var(--hanzi);font-size:15%;line-height:1;color:#d9a441;opacity:0;filter:drop-shadow(0 0 4px #d9a44188)}.battle [data-piece=minister] .warrior.kill-minister~.fx:after{animation:edict 1.25s ease-out 1}@keyframes edict{0%,30%{opacity:0;transform:translateY(6px)}44%{opacity:1}88%{opacity:0;transform:translateY(-34px) rotate(6deg)}to{opacity:0}}.battle [data-piece=chariot] .fx:before{content:"";position:absolute;bottom:14%;left:8%;width:10%;aspect-ratio:1;border-radius:50%;background:#d9c496;opacity:0;box-shadow:-14px -6px 0 -2px #c9ab74,-6px -16px 0 -3px #d9c496,-22px 2px 0 -4px #c9ab74}.battle [data-piece=chariot] .warrior.kill-chariot~.fx:before{animation:dustplume 1.25s ease-out 1}@keyframes dustplume{0%,28%{opacity:0;transform:none}40%{opacity:.9}82%{opacity:0;transform:translate(-24px,-20px) scale(2)}to{opacity:0}}.battle [data-piece=chariot] .fx:after{content:"";position:absolute;top:44%;right:0;width:34%;height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,#f6e6c1);box-shadow:-6px 12px #f6e6c1aa,-2px 24px #f6e6c177;opacity:0}.battle [data-piece=chariot] .warrior.kill-chariot~.fx:after{animation:speedlines 1.25s linear 1}@keyframes speedlines{0%,30%{opacity:0;transform:translate(-20px)}42%{opacity:1;transform:translate(0)}64%{opacity:0;transform:translate(14px)}to{opacity:0}}.battle [data-piece=horse] .fx:before{content:"";position:absolute;bottom:10%;left:14%;width:13%;aspect-ratio:1;border-radius:50%;background:#d9c496;opacity:0;box-shadow:-16px -4px 0 -3px #c9ab74,10px -10px 0 -4px #d9c496}.battle [data-piece=horse] .warrior.kill-horse~.fx:before{animation:stomp 1.25s ease-out 1}@keyframes stomp{0%,52%{opacity:0;transform:scale(.4)}60%{opacity:.9}88%{opacity:0;transform:scale(2.3) translateY(-10px)}to{opacity:0}}.battle [data-piece=horse] .fx:after{content:"";position:absolute;bottom:12%;left:24%;width:9%;aspect-ratio:1;border:3px solid #a8894f;border-bottom-color:transparent;border-radius:50% 50% 4px 4px;opacity:0}.battle [data-piece=horse] .warrior.kill-horse~.fx:after{animation:hoofprint 1.25s ease 1}@keyframes hoofprint{0%,56%{opacity:0;transform:scale(.6)}66%{opacity:1;transform:scale(1)}92%{opacity:0}to{opacity:0}}.battle [data-piece=cannon] .fx:before{content:"";position:absolute;top:22%;right:12%;width:22%;aspect-ratio:1;border-radius:50%;border:4px solid #f2c96b;opacity:0;filter:drop-shadow(0 0 8px #ffdf9e)}.battle [data-piece=cannon] .warrior.kill-cannon~.fx:before{animation:shockwave 1.25s ease-out 1}@keyframes shockwave{0%,42%{opacity:0;transform:scale(.2)}50%{opacity:1}76%{opacity:0;transform:scale(2.4)}to{opacity:0}}.battle [data-piece=cannon] .fx:after{content:"";position:absolute;top:20%;right:16%;width:12%;aspect-ratio:1;border-radius:50%;background:#b9a98c;opacity:0;box-shadow:-10px 8px 0 -2px #a8977a,6px 10px 0 -3px #c9ab74}.battle [data-piece=cannon] .warrior.kill-cannon~.fx:after{animation:smoke 1.25s ease-out 1}@keyframes smoke{0%,46%{opacity:0;transform:scale(.4)}56%{opacity:.75}94%{opacity:0;transform:scale(2.6) translate(8px,-14px)}to{opacity:0}}.battle [data-piece=soldier] .fx:before{content:"";position:absolute;top:34%;right:-4%;width:42%;height:4px;border-radius:3px;background:linear-gradient(90deg,transparent,#f6e6c1);opacity:0;filter:drop-shadow(0 0 5px #ffdf9e)}.battle [data-piece=soldier] .warrior.kill-soldier~.fx:before{animation:thrust 1.25s linear 1}@keyframes thrust{0%,22%{opacity:0;transform:translate(-14px)}28%{opacity:1;transform:translate(6px)}36%{opacity:0}48%{opacity:0;transform:translate(-14px) translateY(8px)}54%{opacity:1;transform:translate(10px) translateY(8px)}64%{opacity:0}to{opacity:0}}.battle [data-piece=soldier] .fx:after{content:"";position:absolute;top:30%;right:2%;width:14px;height:14px;opacity:0;background:#ffdf9e;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 6px #ffdf9e)}.battle [data-piece=soldier] .warrior.kill-soldier~.fx:after{animation:glint 1.25s linear 1}@keyframes glint{0%,50%{opacity:0;transform:scale(.3) rotate(0)}58%{opacity:1;transform:scale(1.3) rotate(45deg)}70%{opacity:0;transform:scale(.4) rotate(90deg)}to{opacity:0}}.battle .warrior.dead{animation:dead 1.7s cubic-bezier(.4,0,.6,1) 1 forwards}@keyframes dead{0%{transform:none;opacity:1}16%{transform:translate(-7%) rotate(-5deg);filter:brightness(1.5)}30%{transform:translate(-3%) rotate(3deg);filter:brightness(1)}to{transform:translateY(-6%) scale(.95,.55) rotate(2deg);opacity:.55;filter:saturate(.55)}}.battle .warrior.dead .half.l{animation:split-l 1.7s ease 1 forwards}.battle .warrior.dead .half.r{animation:split-r 1.7s ease 1 forwards}@keyframes split-l{0%,24%{transform:none}to{transform:translate(-12px,1px) rotate(-12deg)}}@keyframes split-r{0%,24%{transform:none}to{transform:translate(10px,2px) rotate(9deg)}}.battle .dust{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:2}.battle .dust i{position:absolute;bottom:22%;left:50%;width:5px;height:5px;border-radius:50%;background:#d9c496;opacity:0}.battle .dust i:nth-child(2){left:38%;width:4px;height:4px}.battle .dust i:nth-child(3){left:62%;width:3px;height:3px}.battle .dust i:nth-child(4){left:46%;width:3px;height:3px}.battle .warrior.dead~.dust i{animation:dust 1.3s ease-out .55s 1 forwards}.battle .warrior.dead~.dust i:nth-child(2){animation-delay:.68s}.battle .warrior.dead~.dust i:nth-child(3){animation-delay:.8s}.battle .warrior.dead~.dust i:nth-child(4){animation-delay:.92s}@keyframes dust{0%{opacity:0;transform:translateY(0)}18%{opacity:.9}to{opacity:0;transform:translateY(-46px) translate(6px)}}