.cell{display:grid;place-items:center;overflow:visible}
.cell .coord{z-index:2}
.cell.move::before{z-index:1}
.character{display:block;width:100%;line-height:0}
.character svg{display:block;width:100%;height:auto;overflow:visible}
.character.azure{--metal:#e5ede4;--shade:#224f6c;--trim:#55c3cc;--gold:#eec47d;--skin:#e6b18c;--hair:#b97735}
.character.ember{--metal:#c7acb2;--shade:#472334;--trim:#db6559;--gold:#ffab68;--skin:#ba866b;--hair:#242336}
.cell .character{width:88%;filter:drop-shadow(0 2px 1px #25202a88)}
.cell.selected .cape{transform-origin:37px 42px;animation:cloth 1.8s ease-in-out infinite alternate}
@keyframes cloth{to{transform:skewX(-8deg)}}
.fighters{min-height:215px;justify-content:space-evenly}
.fighters figure{width:34%;max-width:150px;margin:0;font-size:.84rem;display:grid;gap:4px;justify-items:center}
.fighters .character{width:100%}
.fighters .iron .character{transform:scaleX(-1)}
.fighters .weapon-arm{transform-origin:60px 47px}
.fighters .rig{transform-origin:49px 88px}
.strike{animation:thrust 1s both}
.strike[data-motion="leap"]{animation:leap 1s both}
.strike[data-motion="cast"]{animation:cast 1s both}
.strike[data-motion="bash"]{animation:bash 1s both}
.strike[data-motion="sweep"]{animation:sweep 1s both}
.strike[data-motion="cleave"]{animation:cleave 1s both}
.strike .weapon-arm{animation:arm 1s both;--wind:-30deg;--hit:23deg}
.strike[data-motion="thrust"] .weapon-arm{--wind:-13deg;--hit:51deg}
.strike[data-motion="leap"] .weapon-arm{--wind:-66deg;--hit:47deg}
.strike[data-motion="cast"] .weapon-arm{--wind:-38deg;--hit:-49deg}
.strike[data-motion="bash"] .weapon-arm{--wind:17deg;--hit:-12deg}
.strike[data-motion="sweep"] .weapon-arm{--wind:-73deg;--hit:68deg}
.strike[data-motion="cleave"] .weapon-arm{--wind:-105deg;--hit:43deg}
.strike::after{left:calc(50% + 42px * var(--facing));top:49%;z-index:3}
.strike[data-motion="cast"]::after{width:110%;height:4px;box-shadow:0 0 12px 4px #8eeaff;background:#e3ffff}
.strike[data-motion="bash"]::after{width:27px;height:27px;border-radius:20%;rotate:45deg}
.target{animation:fall 1s both}
@keyframes arm{0%,100%{transform:none}23%{transform:rotate(var(--wind))}43%,49%{transform:rotate(var(--hit))}}
@keyframes thrust{0%,100%{transform:none}22%{transform:translateX(calc(-15px * var(--facing)))}44%{transform:translateX(calc(63px * var(--facing)))}}
@keyframes leap{0%,100%{transform:none}24%{transform:translateY(6px)}43%{transform:translate(calc(59px * var(--facing)),-23px)}57%{transform:translateX(calc(61px * var(--facing)))}}
@keyframes cast{0%,100%{filter:none}40%{filter:drop-shadow(0 0 13px #8eeaff)}}
@keyframes bash{0%,100%{transform:none}28%{transform:translateX(calc(-9px * var(--facing))) scale(.94)}43%,52%{transform:translateX(calc(60px * var(--facing))) scale(1.06)}}
@keyframes sweep{0%,100%{transform:none}21%{transform:rotate(calc(-12deg * var(--facing)))}44%{transform:translateX(calc(60px * var(--facing))) rotate(calc(12deg * var(--facing)))}}
@keyframes cleave{0%,100%{transform:none}25%{transform:translateY(-15px)}44%{transform:translateX(calc(62px * var(--facing))) rotate(calc(9deg * var(--facing)))}}
@media(prefers-reduced-motion:reduce){
  .cell.selected .cape{animation:none}
}
@media(max-width:450px){.fighters{min-height:160px}}


/* Reposo y desplazamiento en el tablero. El apoyo de los pies sigue en y=91. */
.cell .rig{transform-origin:47px 91px;animation:breathe 2.4s ease-in-out infinite}
.cell:nth-child(3n) .rig{animation-delay:-.8s}
.cell:nth-child(3n + 1) .rig{animation-delay:-1.6s}
.cell.travelling{z-index:3}
.cell .face-left svg{transform:scaleX(-1)}
.cell [data-travel] .rig{animation:none}
.cell [data-travel="walk"] .rig{animation:step-body .23s ease-in-out infinite alternate}
[data-travel="walk"] .leg-left,[data-travel="walk"] .leg-right{animation:stride .46s ease-in-out infinite}
.leg-left{transform-origin:41px 65px}
.leg-right{transform-origin:53px 65px}
[data-travel="walk"] .leg-right{animation-delay:-.23s}
[data-travel="jump"] .rig{animation:jump-pose .49s ease-in-out!important}
[data-travel="dash"] .rig{animation:dash-pose .27s ease-out!important}
[data-travel="dash"]::after{content:"";position:absolute;inset:46% 61% 29% -39%;background:linear-gradient(90deg,transparent,#ffdb9377);filter:blur(3px);animation:dash-trail .27s both}
[data-travel="dash"].face-left::after{transform:scaleX(-1);left:61%;right:-39%}
[data-travel="fly"] .cape{transform-origin:36px 42px;animation:wing-cloth .24s ease-in-out infinite alternate}
[data-travel="fly"] .rig{filter:drop-shadow(0 0 6px var(--trim))}
.cell .character:not([data-travel]) .weapon-arm{
  transform-origin:60px 47px;
  animation:idle-arm 2.4s ease-in-out infinite;
}
.cell:nth-child(3n) .character:not([data-travel]) .weapon-arm{animation-delay:-.8s}
.cell:nth-child(3n + 1) .character:not([data-travel]) .weapon-arm{animation-delay:-1.6s}
@keyframes breathe{0%,100%{transform:none}50%{transform:translateY(-2px) scaleY(1.045)}}
@keyframes idle-arm{0%,100%{transform:none}50%{transform:rotate(9deg)}}
@keyframes step-body{to{transform:translateY(-2px)}}
@keyframes stride{0%,100%{transform:rotate(15deg)}50%{transform:rotate(-15deg)}}
@keyframes jump-pose{0%,100%{transform:none}47%{transform:skewX(-10deg) scaleY(.9)}}
@keyframes dash-pose{0%,100%{transform:none}40%,75%{transform:skewX(-14deg)}}
@keyframes dash-trail{0%,15%,100%{opacity:0}50%{opacity:1}}
@keyframes wing-cloth{to{transform:skewX(15deg) scaleX(1.1)}}





#appearance{display:block;width:100%;margin:8px 0 16px;padding:10px;border:1px solid #9c784b;background:#181b20;color:#f5e9d0;font:inherit}
#appearance:focus-visible{outline:2px solid #e5b873}
.fighters .classic{max-width:120px}
.cell .classic .rig{animation:none!important}
.character.royal.azure{--metal:#c5dce7;--highlight:#fff8e7;--steel-shadow:#65889e;--shade:#1f3f66;--trim:#4e98ac;--gold:#eacb85;--hair:#ba783d;--skin:#efc5a0}
.character.royal.ember{--metal:#a9a5bc;--highlight:#e4deec;--steel-shadow:#554f72;--shade:#3d233e;--trim:#a75365;--gold:#e4aa71;--hair:#302336;--skin:#c99c84}

#duel{width:min(94vw,680px)}
.fighters.choreographed{min-height:260px;overflow:hidden;background:radial-gradient(ellipse at 50% 90%,#91694044,transparent 65%),linear-gradient(#111b2b,#30283a 74%,#4d3b3c 75%,#29242d)}
.fighters.choreographed:has(.attacker.iron){flex-direction:row-reverse}
.choreographed figure{width:31%;max-width:180px;position:relative;z-index:2;transform-origin:50% 90%}
.choreographed figcaption{font-size:.8rem;color:#eedeca}
.choreographed .character{filter:drop-shadow(0 5px 3px #0007)}
.battle-glow,.battle-slash{position:absolute;pointer-events:none;z-index:3;left:calc(50% - 42px);top:40%;width:84px;height:84px;opacity:0}
.battle-glow{border:3px solid var(--impact-color);border-radius:50%;background:radial-gradient(circle,#fff5cfbb,transparent 65%);box-shadow:0 0 24px var(--impact-color),inset 0 0 16px var(--impact-color)}
.battle-slash{height:10px;top:52%;background:#fff7de;border-radius:100%;box-shadow:0 0 14px 4px var(--impact-color)}
.battle-slash[data-effect="spell"]{height:70px;border:4px double var(--impact-color);background:transparent;border-radius:50%}
.battle-slash[data-effect="shield"]{height:44px;width:44px;left:calc(50% - 22px);border-radius:15%;background:var(--impact-color)}
@media(max-width:450px){.fighters.choreographed{min-height:195px}.choreographed figure{width:32%}}


.fighters.choreographed{min-height:310px;align-items:flex-end;padding:44px 0 24px}
.choreographed figure{width:27%;max-width:160px;will-change:transform;transform-origin:50% 88%}
.choreographed .leg-left{transform-origin:41px 65px}
.choreographed .leg-right{transform-origin:53px 65px}
.duel-prop{position:absolute;pointer-events:none;z-index:4;opacity:0;width:calc(100px * var(--fx-size,1));height:calc(100px * var(--fx-size,1));transform-origin:center;filter:drop-shadow(0 0 6px var(--impact-color))}
.duel-prop.thrust,.duel-prop.spear,.duel-prop.lance{width:calc(150px * var(--fx-size,1));height:calc(9px * var(--fx-size,1));background:linear-gradient(90deg,transparent,#c8864a 20%,#e8cf9a 70%,#fff4c7);clip-path:polygon(0 40%,78% 40%,78% 0,100% 50%,78% 100%,78% 60%,0 60%)}
.duel-prop.cross{background:linear-gradient(45deg,transparent 45%,#fff7cf 48%,#fff 50%,#ffcc82 53%,transparent 56%),linear-gradient(-45deg,transparent 43%,#fff 49%,#ffcf7a 52%,transparent 57%)}
.duel-prop.cleave{height:calc(145px * var(--fx-size,1));width:calc(24px * var(--fx-size,1));background:linear-gradient(#fff8c9,#ffd27f,transparent);clip-path:polygon(55% 0,100% 80%,50% 100%,0 80%)}
.duel-prop.meteor{background:linear-gradient(135deg,transparent 30%,#ffc374 70%,#fff5c9);clip-path:polygon(0 0,100% 58%,70% 100%)}
.duel-prop.fire{height:calc(170px * var(--fx-size,1));width:calc(100px * var(--fx-size,1));background:radial-gradient(ellipse at 50% 90%,#fff8bc 5%,#ffca51 35%,#ed622e 55%,transparent 70%);clip-path:polygon(10% 100%,0 58%,23% 74%,27% 21%,46% 49%,66% 0,80% 57%,100% 38%,95% 100%)}
.duel-prop.lightning{height:calc(215px * var(--fx-size,1));width:calc(70px * var(--fx-size,1));background:#e6ffff;clip-path:polygon(55% 0,90% 0,56% 36%,95% 36%,12% 100%,36% 56%,5% 56%)}
.duel-prop.vortex{border:9px double #a7ecff;border-radius:45% 55% 30% 70%;background:conic-gradient(transparent,#76d6efaa,transparent,#b7a1ffbb,transparent)}
.duel-prop.ward,.duel-prop.sigil{border:4px double #b5eaff;border-radius:50%;box-shadow:inset 0 0 18px #90cfff66,0 0 12px #90cfff55}
.duel-prop.guard,.duel-prop.shield{width:calc(60px * var(--fx-size,1));height:calc(85px * var(--fx-size,1));border:5px solid #ffe4a6;border-radius:15% 15% 50% 50%;background:#e2bd7655}
.duel-prop.uppercut{border:9px solid #ffe8ab;border-left-color:transparent;border-bottom-color:transparent;border-radius:50%}
.duel-prop.quake{height:calc(90px * var(--fx-size,1));width:calc(160px * var(--fx-size,1));background:#ffdba2;clip-path:polygon(0 100%,22% 60%,30% 88%,48% 8%,57% 75%,78% 42%,100% 100%)}
.duel-prop.wave{width:calc(65px * var(--fx-size,1));height:calc(155px * var(--fx-size,1));border:8px solid #ffeebd;border-bottom-color:transparent;border-top-color:transparent;border-left-color:transparent;border-radius:50%}
.duel-prop.arc{width:calc(140px * var(--fx-size,1));height:calc(140px * var(--fx-size,1));border:6px solid #f4c9ff;border-bottom-color:transparent;border-left-color:transparent;border-radius:50%}
.duel-prop.shockwave{height:calc(45px * var(--fx-size,1));width:calc(130px * var(--fx-size,1));border:3px solid #fff0c5;border-radius:50%}
@media(max-width:450px){.fighters.choreographed{min-height:255px;padding-top:65px}.choreographed figure{width:29%}.duel-prop{zoom:.75}}

.audio-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px}
.audio-controls label{font-size:.8rem}
#sound-volume{width:95px;accent-color:#e5b873}
.choreographed .cape{transform-origin:37px 42px}
.duel-prop.spark-particle{width:calc(5px * var(--fx-size,1));height:calc(5px * var(--fx-size,1));border-radius:50%;background:#fff1b0;box-shadow:0 0 8px var(--impact-color)}

.duel-prop.afterimage{height:auto;z-index:1;filter:drop-shadow(0 0 8px var(--impact-color));transform-origin:50% 88%}
.afterimage .character{opacity:.7}
.echo-left .character{transform:scaleX(-1)}
.duel-prop.landing-dust{width:calc(100px * var(--fx-size,1));height:calc(28px * var(--fx-size,1));border-radius:50%;background:radial-gradient(ellipse,#cfb39388,transparent 68%);filter:blur(2px)}
.duel-prop.charge-mote{width:calc(9px * var(--fx-size,1));height:calc(9px * var(--fx-size,1));border:1px solid #ddffff;border-radius:50%;background:#96dfff;box-shadow:0 0 14px 3px #72c8ff}
.duel-prop.ground-crack{width:calc(180px * var(--fx-size,1));height:calc(35px * var(--fx-size,1));background:#ffc987;clip-path:polygon(0 52%,22% 42%,32% 0,35% 43%,56% 52%,73% 14%,67% 58%,100% 78%,64% 67%,48% 100%,53% 64%,29% 57%,18% 73%)}
.duel-prop.stone-fragment{width:calc(10px * var(--fx-size,1));height:calc(8px * var(--fx-size,1));background:#bb927a;border:1px solid #e8caae;clip-path:polygon(5% 20%,70% 0,100% 60%,30% 100%)}
.duel-prop.magic-fragment{width:calc(7px * var(--fx-size,1));height:calc(14px * var(--fx-size,1));background:#b8efff;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.duel-prop.metal-fragment{width:calc(3px * var(--fx-size,1));height:calc(18px * var(--fx-size,1));background:#ffecc5;border-radius:50%}
.duel-prop.impact-halo{width:calc(95px * var(--fx-size,1));height:calc(95px * var(--fx-size,1));background:radial-gradient(circle,#fff8c888,transparent 65%);clip-path:polygon(50% 0,59% 34%,90% 12%,70% 44%,100% 50%,70% 58%,89% 89%,59% 70%,50% 100%,42% 70%,11% 89%,31% 58%,0 50%,31% 42%,10% 12%,42% 31%)}
.duel-prop.magic-halo{width:calc(130px * var(--fx-size,1));height:calc(130px * var(--fx-size,1));border:5px double #b8eaff;border-radius:50%;background:radial-gradient(circle,transparent 35%,#9a74e866 55%,transparent 70%);box-shadow:0 0 18px #95d9ff}



/* Grounded stage: effect coordinates and sprite feet share the same origin. */
.fighters.choreographed{height:360px;min-height:360px;padding:0 0 30px;align-items:flex-end;contain:layout paint}
.choreographed figure{display:block;width:25%;max-width:145px;aspect-ratio:1;transform-origin:49% 91%;flex-shrink:0}
.choreographed figcaption{position:absolute;width:100%;bottom:-24px;line-height:20px;opacity:.65}
.choreographed .character svg>ellipse,.afterimage .character svg>ellipse{opacity:0}
.choreographed .weapon-arm,.cell [data-travel] .weapon-arm{transform-origin:60px 47px}
.choreographed .rig,.cell [data-travel] .rig{transform-origin:49px 91px}
.choreographed .cape,.cell [data-travel] .cape{transform-origin:37px 42px}
.duel-prop{zoom:1;filter:none}
.duel-prop.afterimage{scale:1;transform-origin:49% 91%;filter:none}
.duel-prop.ground-shadow{width:calc(52px * var(--fx-size,1));height:calc(9px * var(--fx-size,1));border-radius:50%;background:#080b15;z-index:1;scale:1}
.duel-prop.contact-flash{width:calc(36px * var(--fx-size,1));height:calc(36px * var(--fx-size,1));background:radial-gradient(circle,#fff 4%,#ffe6a4 22%,transparent 68%);mix-blend-mode:screen}
.duel-prop.sword-arc{width:calc(96px * var(--fx-size,1));height:calc(96px * var(--fx-size,1));border:7px solid #fff1ca;border-bottom-color:transparent;border-left-color:transparent;border-radius:50%;box-shadow:3px -3px 0 #efb66866}
.duel-prop.parry{width:calc(48px * var(--fx-size,1));height:calc(48px * var(--fx-size,1));background:#fff4ce;clip-path:polygon(48% 0,58% 37%,100% 49%,61% 59%,52% 100%,40% 61%,0 49%,39% 39%)}
.duel-prop.evade-ring{width:calc(60px * var(--fx-size,1));height:calc(80px * var(--fx-size,1));border:2px solid #b5d6fb88;border-left-color:transparent;border-radius:50%}
.duel-prop.fireball{width:calc(64px * var(--fx-size,1));height:calc(24px * var(--fx-size,1));border-radius:50%;background:radial-gradient(ellipse at 80% 50%,#fff8b5,#ffb447 32%,#ed572a99 55%,transparent 72%)}
.duel-prop.ethereal-blade{width:calc(70px * var(--fx-size,1));height:calc(12px * var(--fx-size,1));background:linear-gradient(90deg,transparent,#bbedff,#fff);clip-path:polygon(0 35%,70% 25%,85% 0,100% 50%,85% 100%,70% 75%,0 65%)}
.duel-prop.ground-wave{width:calc(65px * var(--fx-size,1));height:calc(22px * var(--fx-size,1));border:3px solid #ffd997;border-top-color:transparent;border-radius:50%}
.cell [data-travel] .rig,.cell [data-travel] .leg-left,.cell [data-travel] .leg-right,.cell [data-travel] .cape{animation:none!important}
.cell [data-travel]::after{content:none}
.travel-shadow,.travel-dust{position:absolute;pointer-events:none;left:25%;top:80%;width:50%;height:9%;border-radius:50%;z-index:-1;background:#15151c;opacity:.2}
.travel-dust{background:radial-gradient(ellipse,#e8c99e99,transparent 70%);height:25%;top:72%;z-index:0}
@media(max-width:450px){.fighters.choreographed{height:285px;min-height:285px;padding:0 0 27px}.choreographed figure{width:27%}.duel-prop{zoom:1}}
@media(prefers-reduced-motion:reduce){.cell .rig,.cell .weapon-arm,.cell.selected .cape{animation:none!important}}

.choreographed figcaption{display:none}
.battle-label{position:absolute;top:14px;font-size:.72rem;letter-spacing:.08em;color:#e8d9c4;z-index:5}
@media(max-width:450px){.fighters.choreographed{height:270px;min-height:270px}.choreographed figure{width:33%}}

.duel-prop.lightning{background:none;clip-path:none;filter:drop-shadow(0 0 4px #8ceaff)}
.duel-prop.lightning svg{width:100%;height:100%;overflow:visible}

/* Pause the obscured board to reserve rendering time for combat on mobile. */
.in-duel .cell .rig,.in-duel .cell .weapon-arm,.in-duel .cell.selected .cape{animation-play-state:paused!important}
.duel-prop.magic-halo{border-color:var(--impact-color);box-shadow:0 0 12px var(--impact-color);background:radial-gradient(circle,transparent 35%,#ffffff22 55%,transparent 70%)}
.duel-prop.magic-fragment{background:var(--impact-color)}