html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul,li{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.orange:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;opacity:.5;background-color:orange}.purple:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;opacity:.5;background-color:purple}.red:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;opacity:.5;background-color:red}.green:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;opacity:.5;background-color:green}.black:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;opacity:.5;background-color:#000}@-webkit-keyframes colorChange{0%{color:red}25%{color:orange}50%{color:#ff0}75%{color:green}to{color:#00f}}@keyframes colorChange{0%{color:red}25%{color:orange}50%{color:#ff0}75%{color:green}to{color:#00f}}@-webkit-keyframes borderChange{0%{border-color:red}25%{border-color:orange}50%{border-color:#ff0}75%{border-color:green}to{border-color:#00f}}@keyframes borderChange{0%{border-color:red}25%{border-color:orange}50%{border-color:#ff0}75%{border-color:green}to{border-color:#00f}}@-webkit-keyframes backgroundcolorChange{0%{background-color:#b22222}25%{background-color:teal}50%{background-color:#b22222}75%{background-color:teal}to{background-color:#b22222}}@keyframes backgroundcolorChange{0%{background-color:#b22222}25%{background-color:teal}50%{background-color:#b22222}75%{background-color:teal}to{background-color:#b22222}}.cipher{position:fixed;left:-100%;top:-100%}.version{color:#fff}.player-info[data-v-012d311e]{width:240px;height:32px;padding:10px;border-radius:10px;-webkit-box-shadow:2px 2px 2px;box-shadow:2px 2px 2px;margin:10px;color:#fff;cursor:pointer}.dice-container .dice[data-v-d45bed42]{width:100px;height:100px;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:all .5s;transition:all .5s}.dice-container .dice .dice-box[data-v-d45bed42]{position:absolute;height:100%;width:100%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateX(0deg) rotateY(0deg);transform:rotateX(0) rotateY(0)}.dice-container .dice .dice-box div[data-v-d45bed42]{background-color:#fff;width:100px;height:100px;border-radius:10px;position:absolute;-webkit-box-shadow:0 0 10px black;box-shadow:0 0 10px #000}.dice-container .dice .dice-box .dice-front[data-v-d45bed42]{-webkit-transform:translateZ(50px);transform:translateZ(50px);background-image:radial-gradient(35px at 50px 50px,pink,red 35px,transparent 36px)}.dice-container .dice .dice-box .dice-back[data-v-d45bed42]{-webkit-transform:translateZ(-50px);transform:translateZ(-50px);background-image:radial-gradient(11px at 30px 20px,gray,black 11px,transparent 12px),radial-gradient(11px at 65px 20px,gray,black 11px,transparent 12px),radial-gradient(11px at 30px 50px,gray,black 11px,transparent 12px),radial-gradient(11px at 30px 80px,gray,black 11px,transparent 12px),radial-gradient(11px at 65px 50px,gray,black 11px,transparent 12px),radial-gradient(11px at 65px 80px,gray,black 11px,transparent 12px)}.dice-container .dice .dice-box .dice-left[data-v-d45bed42]{-webkit-transform:rotateY(-90deg) translateZ(50px);transform:rotateY(-90deg) translateZ(50px);background-image:radial-gradient(12px at 25px 25px,gray,black 12px,transparent 13px),radial-gradient(12px at 25px 75px,gray,black 12px,transparent 13px),radial-gradient(12px at 75px 25px,gray,black 12px,transparent 13px),radial-gradient(12px at 50px 50px,pink,red 12px,transparent 13px),radial-gradient(12px at 75px 75px,gray,black 12px,transparent 13px)}.dice-container .dice .dice-box .dice-right[data-v-d45bed42]{-webkit-transform:rotateY(90deg) translateZ(50px);transform:rotateY(90deg) translateZ(50px);background-image:radial-gradient(17px at 25px 25px,gray,black 17px,transparent 18px),radial-gradient(17px at 75px 75px,gray,black 17px,transparent 18px)}.dice-container .dice .dice-box .dice-top[data-v-d45bed42]{-webkit-transform:rotateX(90deg) translateZ(50px);transform:rotateX(90deg) translateZ(50px);background-image:radial-gradient(12px at 25px 25px,gray,black 12px,transparent 13px),radial-gradient(12px at 50px 50px,gray,black 12px,transparent 13px),radial-gradient(12px at 75px 75px,gray,black 12px,transparent 13px)}.dice-container .dice .dice-box .dice-buttom[data-v-d45bed42]{-webkit-transform:rotateX(-90deg) translateZ(50px);transform:rotateX(-90deg) translateZ(50px);background-image:radial-gradient(12px at 25px 25px,gray,black 12px,transparent 13px),radial-gradient(12px at 25px 75px,gray,black 12px,transparent 13px),radial-gradient(12px at 75px 25px,gray,black 12px,transparent 13px),radial-gradient(12px at 75px 75px,gray,black 12px,transparent 13px)}.dice-container .dice.off[data-v-d45bed42]{pointer-events:none;opacity:.1}.dice-container .dice.rotate[data-v-d45bed42]{pointer-events:none}.dice-container .dice.rotate .dice-box[data-v-d45bed42]{-webkit-animation:dice-data-v-d45bed42 .5s linear infinite;animation:dice-data-v-d45bed42 .5s linear infinite}.dice-container .dice[dice="0"] .dice-box[data-v-d45bed42]{-webkit-transform:rotateX(45deg) rotateY(45deg);transform:rotateX(45deg) rotateY(45deg)}.dice-container .dice[dice="1"] .dice-box[data-v-d45bed42]{-webkit-transform:rotateX(0deg) rotateY(0deg);transform:rotateX(0) rotateY(0)}.dice-container .dice[dice="2"] .dice-box[data-v-d45bed42]{-webkit-transform:rotateX(0deg) rotateY(270deg);transform:rotateX(0) rotateY(270deg)}.dice-container .dice[dice="3"] .dice-box[data-v-d45bed42]{-webkit-transform:rotateX(270deg) rotateY(0deg);transform:rotateX(270deg) rotateY(0)}.dice-container .dice[dice="4"] .dice-box[data-v-d45bed42]{-webkit-transform:rotateX(90deg) rotateY(0deg);transform:rotateX(90deg) rotateY(0)}.dice-container .dice[dice="5"] .dice-box[data-v-d45bed42]{-webkit-transform:rotateX(0deg) rotateY(90deg);transform:rotateX(0) rotateY(90deg)}.dice-container .dice[dice="6"] .dice-box[data-v-d45bed42]{-webkit-transform:rotateX(0deg) rotateY(180deg);transform:rotateX(0) rotateY(180deg)}@-webkit-keyframes dice-data-v-d45bed42{0%{-webkit-transform:rotateX(0deg) rotateY(0deg);transform:rotateX(0) rotateY(0)}50%{-webkit-transform:rotateX(180deg) rotateY(360deg);transform:rotateX(180deg) rotateY(360deg)}to{-webkit-transform:rotateX(540deg) rotateY(720deg);transform:rotateX(540deg) rotateY(720deg)}}@keyframes dice-data-v-d45bed42{0%{-webkit-transform:rotateX(0deg) rotateY(0deg);transform:rotateX(0) rotateY(0)}50%{-webkit-transform:rotateX(180deg) rotateY(360deg);transform:rotateX(180deg) rotateY(360deg)}to{-webkit-transform:rotateX(540deg) rotateY(720deg);transform:rotateX(540deg) rotateY(720deg)}}.square[data-v-f7cd6f14]{border:4px double;padding:10px;display:-webkit-box;display:-ms-flexbox;display:flex;width:80px;height:40px;overflow:hidden;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;color:gray;cursor:pointer}.square>p[data-v-f7cd6f14]{position:absolute;right:calc(50% - 16px);top:calc(50% - 8px);-webkit-transition:all .5s;transition:all .5s}.square .list[data-v-f7cd6f14]{display:-webkit-box;display:-ms-flexbox;display:flex;height:28px;position:absolute;bottom:0;width:100%}.square .list .player-position-marker[data-v-f7cd6f14]{border-radius:50%;width:24px;height:24px;-webkit-box-shadow:0 0 8px white;box-shadow:0 0 8px #fff;cursor:pointer;background-image:url(/assets/playericon.515edda0.png);background-size:100%;-webkit-transition:top .5s,left .5s;transition:top .5s,left .5s;margin:2px}.square .garrison[data-v-f7cd6f14]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:180px;-ms-flex-wrap:wrap;flex-wrap:wrap;position:fixed;top:0;left:0;z-index:2}.square .garrison li[data-v-f7cd6f14]{width:120px;height:100%;border-radius:8px;border:1px solid black;-webkit-box-shadow:2px 2px 2px black;box-shadow:2px 2px 2px #000;margin-right:2px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;position:relative;background-size:cover;background-position:center 32px;background-repeat:no-repeat}.square .garrison li .generaltype[data-v-f7cd6f14]{width:24px;height:24px;border:2px solid khaki;border-radius:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:khaki;position:absolute;top:38px;-webkit-animation:colorChange 5s infinite;animation:colorChange 5s infinite}.square .garrison li .land[data-v-f7cd6f14]{left:6px}.square .garrison li .water[data-v-f7cd6f14]{right:6px}.square .garrison li .generalname[data-v-f7cd6f14]{color:#fff;height:32px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0}.square .garrison li .attributes[data-v-f7cd6f14]{position:absolute;bottom:0;width:100%;height:24px;display:-webkit-box;display:-ms-flexbox;display:flex;border-top:2px solid khaki}.square .garrison li .attributes em[data-v-f7cd6f14]{width:20px;height:100%;color:khaki;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-right:2px solid khaki;font-size:12px;-webkit-animation:colorChange 5s infinite;animation:colorChange 5s infinite}.square .garrison li .attributes em[data-v-f7cd6f14]:last-of-type{border-right:none}.square .close-btn[data-v-f7cd6f14]{position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#000;color:#fff;border-radius:6px;width:120px;height:40px;cursor:pointer;z-index:2}.square[level="1"][data-v-f7cd6f14]{background-image:url(data:image/png;base64,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);background-size:40px;background-position:left top;background-repeat:no-repeat}.square[level="1"] p[data-v-f7cd6f14]{position:absolute;right:10px;top:10px}.square[level="2"][data-v-f7cd6f14]{background-image:url(data:image/png;base64,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);background-size:40px;background-position:left top;background-repeat:no-repeat}.square[level="2"] p[data-v-f7cd6f14]{position:absolute;right:10px;top:10px}.square[level="3"][data-v-f7cd6f14]{background-image:url(data:image/png;base64,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);background-size:40px;background-position:left top;background-repeat:no-repeat}.square[level="3"] p[data-v-f7cd6f14]{position:absolute;right:10px;top:10px}.board[data-v-4436dfa6]{height:calc(100vh - 72px);max-height:770px;overflow:auto;display:grid;grid-template-areas:"top-0 top-1 top-2 top-3 top-4 top-5 top-6 top-7 top-8 top-9 right-0" "left-9 . . . . . . . . . right-1" "left-8 . . . . . . . . . right-2" "left-7 . . . . . . . . . right-3" "left-6 . . . . . . . . . right-4" "left-5 . . . . . . . . . right-5" "left-4 . . . . . . . . . right-6" "left-3 . . . . . . . . . right-7" "left-2 . . . . . . . . . right-8" "left-1 . . . . . . . . . right-9" "left-0 bottom-9 bottom-8 bottom-7 bottom-6 bottom-5 bottom-4 bottom-3 bottom-2 bottom-1 bottom-0";gap:2px}.board .top-0[data-v-4436dfa6]{grid-area:top-0}.board .top-1[data-v-4436dfa6]{grid-area:top-1}.board .top-2[data-v-4436dfa6]{grid-area:top-2}.board .top-3[data-v-4436dfa6]{grid-area:top-3}.board .top-4[data-v-4436dfa6]{grid-area:top-4}.board .top-5[data-v-4436dfa6]{grid-area:top-5}.board .top-6[data-v-4436dfa6]{grid-area:top-6}.board .top-7[data-v-4436dfa6]{grid-area:top-7}.board .top-8[data-v-4436dfa6]{grid-area:top-8}.board .top-9[data-v-4436dfa6]{grid-area:top-9}.board .right-0[data-v-4436dfa6]{grid-area:right-0}.board .right-1[data-v-4436dfa6]{grid-area:right-1}.board .right-2[data-v-4436dfa6]{grid-area:right-2}.board .right-3[data-v-4436dfa6]{grid-area:right-3}.board .right-4[data-v-4436dfa6]{grid-area:right-4}.board .right-5[data-v-4436dfa6]{grid-area:right-5}.board .right-6[data-v-4436dfa6]{grid-area:right-6}.board .right-7[data-v-4436dfa6]{grid-area:right-7}.board .right-8[data-v-4436dfa6]{grid-area:right-8}.board .right-9[data-v-4436dfa6]{grid-area:right-9}.board .bottom-0[data-v-4436dfa6]{grid-area:bottom-0}.board .bottom-1[data-v-4436dfa6]{grid-area:bottom-1}.board .bottom-2[data-v-4436dfa6]{grid-area:bottom-2}.board .bottom-3[data-v-4436dfa6]{grid-area:bottom-3}.board .bottom-4[data-v-4436dfa6]{grid-area:bottom-4}.board .bottom-5[data-v-4436dfa6]{grid-area:bottom-5}.board .bottom-6[data-v-4436dfa6]{grid-area:bottom-6}.board .bottom-7[data-v-4436dfa6]{grid-area:bottom-7}.board .bottom-8[data-v-4436dfa6]{grid-area:bottom-8}.board .bottom-9[data-v-4436dfa6]{grid-area:bottom-9}.board .left-0[data-v-4436dfa6]{grid-area:left-0}.board .left-1[data-v-4436dfa6]{grid-area:left-1}.board .left-2[data-v-4436dfa6]{grid-area:left-2}.board .left-3[data-v-4436dfa6]{grid-area:left-3}.board .left-4[data-v-4436dfa6]{grid-area:left-4}.board .left-5[data-v-4436dfa6]{grid-area:left-5}.board .left-6[data-v-4436dfa6]{grid-area:left-6}.board .left-7[data-v-4436dfa6]{grid-area:left-7}.board .left-8[data-v-4436dfa6]{grid-area:left-8}.board .left-9[data-v-4436dfa6]{grid-area:left-9}.modal[data-v-77226004]{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.modal .modal-content[data-v-77226004]{background:white;padding:20px;border-radius:10px;text-align:center;min-width:400px}.modal .modal-content .btns[data-v-77226004]{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:20px}.modal .modal-content .btns div[data-v-77226004]{padding:10px 20px;border-radius:4px;background-color:gray;cursor:pointer}.tip-selection[data-v-c29c24fa]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:fixed;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-ms-flex-wrap:wrap;flex-wrap:wrap}.tip[data-v-c29c24fa]{width:120px;height:180px;border:2px solid;border-radius:6px;cursor:pointer;margin:10px;-webkit-transition:background-color .3s;transition:background-color .3s;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:40px;background-color:#d2691e;color:#fff;-webkit-box-shadow:2px 2px 2px black;box-shadow:2px 2px 2px #000}.tip[data-v-c29c24fa]:hover{background-color:#6495ed}.btns[data-v-c29c24fa]{width:100%;margin-top:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;.close{width: 120px; height: 32px; border-radius: 10px; color: white; background-color: black; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer;}}.player-details[data-v-5b207422]{position:fixed;top:0;left:0;width:100%;height:0;background:white;-webkit-box-shadow:0 2px 10px rgba(0,0,0,.1);box-shadow:0 2px 10px #0000001a;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:20;-webkit-transition:all .5s;transition:all .5s;display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;>div {border: 4px double black; width: 25%; -webkit-transition: all .5s linear; transition: all .5s linear; .tit {width: 100%; height: 32px; color: white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1); box-shadow: 0 2px 2px rgba(0,0,0,.1);} .cont {height: calc(100% - 32px); padding: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; div {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 162px; position: relative;}}} >div.on {width: 75%;} .money {.tit {background-color: goldenrod;}} .estate {.tit {background-color: greenyellow;} .cont {width: 100%; overflow: auto; li {width: 120px; height: 100%; border-radius: 8px; border: 1px solid black; -webkit-box-shadow: 2px 2px 2px black; box-shadow: 2px 2px 2px black; margin-right: 2px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; p {line-height: 1.5; padding-left: 10px;} .city {color: white; height: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0;}}}} .tips {.tit {background-color: palevioletred;} .cont {width: 100%; overflow: auto; li {width: 120px; height: 100%; border-radius: 8px; border: 1px solid black; -webkit-box-shadow: 2px 2px 2px black; box-shadow: 2px 2px 2px black; margin-right: 2px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; position: relative; .tipname {background-color: crimson; color: white; height: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0;} .tipdesc {width: 100%; height: calc(100% - 32px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 10px; -webkit-box-sizing: border-box; box-sizing: border-box;} .apply {width: 80%; height: 32px; background-color: red; color: white; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); display: none; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer;}} li:hover .apply {display: -webkit-box; display: -ms-flexbox; display: flex;}}} .treasures {.tit {background-color: palevioletred;} .cont {width: 100%; overflow: auto; li {width: 120px; height: 100%; border-radius: 8px; border: 1px solid black; -webkit-box-shadow: 2px 2px 2px black; box-shadow: 2px 2px 2px black; margin-right: 2px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; position: relative; .treasurename {background-color: gold; color: white; height: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0;} .treasuredesc {width: 100%; height: calc(100% - 52px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden;} .treasureattributes {height: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; background-color: sienna; em {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: white; width: calc(100% / 6);}} .apply {width: 80%; height: 32px; background-color: red; color: white; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); display: none; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer;}} li:hover .apply {display: -webkit-box; display: -ms-flexbox; display: flex;}}} .generals {.tit {background-color: olive;} .cont {width: 100%; overflow: auto; li {width: 120px; height: 100%; border-radius: 8px; border: 1px solid black; -webkit-box-shadow: 2px 2px 2px black; box-shadow: 2px 2px 2px black; margin-right: 2px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; position: relative; background-size: cover; background-position: center 32px; background-repeat: no-repeat; -webkit-transition: all .5s; transition: all .5s; .generaltype {width: 24px; height: 24px; border: 2px solid khaki; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: khaki; position: absolute; top: 38px; -webkit-animation: colorChange-data-v-5b207422 5s infinite; animation: colorChange-data-v-5b207422 5s infinite;} .land {left: 6px;} .water {right: 6px;} .generalname {color: white; height: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0;} .attributes {position: absolute; bottom: 0; width: 100%; height: calc(100% - 32px); display: none; em {width: 100%; height: calc(100% / 6); text-align: center; color: white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 14px;}}} li.on {background-image: none !important; .generaltype {display: none;} .attributes {display: block;}}}}}.player-details.show[data-v-5b207422]{height:240px}@-webkit-keyframes colorChange-data-v-5b207422{0%{color:red}25%{color:orange}50%{color:#ff0}75%{color:green}to{color:#00f}}@keyframes colorChange-data-v-5b207422{0%{color:red}25%{color:orange}50%{color:#ff0}75%{color:green}to{color:#00f}}.generals[data-v-561ce657]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:fixed;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);.generals-list{display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 720px; .general-item {width: 120px; height: 180px; border: 2px solid; border-radius: 6px; cursor: pointer; margin: 10px; -webkit-transition: background-color .3s; transition: background-color .3s; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 40px; background-color:tomato; color: white; -webkit-box-shadow: 2px 2px 2px black; box-shadow: 2px 2px 2px black;} .general-item:hover {background-color: olive;} .general-item.selected{background-color: olive;}} .selbtn {position: absolute; top: calc(100% + 10px); border-radius: 6px; width: 120px; height: 40px; background-color: black; color: white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-shadow: 2px 2px 2px gray; box-shadow: 2px 2px 2px gray; cursor: pointer;}}.treasures[data-v-432e087d]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:fixed;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.treasures-list[data-v-432e087d]{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;width:720px}.treasure-item[data-v-432e087d]{width:120px;height:180px;border:2px solid;border-radius:6px;cursor:pointer;margin:10px;-webkit-transition:background-color .3s;transition:background-color .3s;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:20px;background-color:gold;color:#fff;-webkit-box-shadow:2px 2px 2px black;box-shadow:2px 2px 2px #000}.treasure-item[data-v-432e087d]:hover,.treasure-item.selected[data-v-432e087d]{background-color:peru}.selbtn[data-v-432e087d]{position:absolute;top:calc(100% + 10px);border-radius:6px;width:120px;height:40px;background-color:#000;color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-shadow:2px 2px 2px gray;box-shadow:2px 2px 2px gray;cursor:pointer}.lottery[data-v-58e9e25a]{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,.5);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:center;align-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;.generals-list {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 180px; li {width: 120px; height: 100%; border-radius: 8px; border: 1px solid black; -webkit-box-shadow: 2px 2px 2px black; box-shadow: 2px 2px 2px black; margin-right: 2px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; position: relative; background-size: cover; background-position: center 32px; background-repeat: no-repeat; .generaltype {width: 24px; height: 24px; border: 2px solid khaki; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: khaki; position: absolute; top: 38px; -webkit-animation: colorChange-data-v-58e9e25a 5s infinite; animation: colorChange-data-v-58e9e25a 5s infinite;} .land {left: 6px;} .water {right: 6px;} .generalname {color: white; height: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0;} .attributes {position: absolute; bottom: 0; width: 100%; height: 24px; display: -webkit-box; display: -ms-flexbox; display: flex; border-top: 2px solid khaki; em {width: 20px; height: 100%; color: khaki; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-right: 2px solid khaki; font-size: 12px; -webkit-animation: colorChange-data-v-58e9e25a 5s infinite; animation: colorChange-data-v-58e9e25a 5s infinite;} em:last-of-type {border-right: none;}}}} .treasures-list {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 180px; .treasures-money {-webkit-animation: colorChange-data-v-58e9e25a 2s infinite; animation: colorChange-data-v-58e9e25a 2s infinite; font-size: 20px;} li {width: 120px; height: 100%; border-radius: 8px; border: 1px solid black; -webkit-box-shadow: 2px 2px 2px black; box-shadow: 2px 2px 2px black; margin-right: 2px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; position: relative; background-size: cover; background-position: center 32px; background-repeat: no-repeat; background: repeating-linear-gradient(180deg,gold,sienna); .treasurename {color: white; height: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0; -webkit-animation: colorChange-data-v-58e9e25a 2s infinite; animation: colorChange-data-v-58e9e25a 2s infinite; background: repeating-linear-gradient(180deg,gold,transparent);} .treasuredesc {width: 100%; height: calc(100% - 52px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; color: white; -webkit-animation: colorChange-data-v-58e9e25a 2s 2s infinite; animation: colorChange-data-v-58e9e25a 2s 2s infinite;} .attributes {height: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; background: repeating-linear-gradient(180deg,transparent,sienna); em {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: white; width: calc(100% / 6); -webkit-animation: colorChange-data-v-58e9e25a 2s 4s infinite; animation: colorChange-data-v-58e9e25a 2s 4s infinite;}}}} .military-list {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 180px; .military-nothing {-webkit-animation: colorChange-data-v-58e9e25a 2s infinite; animation: colorChange-data-v-58e9e25a 2s infinite; font-size: 20px;} .military-list-item {width: 120px; height: 100%; border-radius: 8px; border: 1px solid black; -webkit-box-shadow: 2px 2px 2px black; box-shadow: 2px 2px 2px black; margin-right: 2px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; position: relative; cursor: pointer; .militaryname {color: white; height: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0;} .militarydesc {width: 100%; height: calc(100% - 52px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden;}} .military-list-item[itemtype="\5b9d\7269"]{background-size: cover; background-position: center 32px; background-repeat: no-repeat; background: repeating-linear-gradient(180deg,gold,sienna); .militaryname {-webkit-animation: colorChange-data-v-58e9e25a 2s infinite; animation: colorChange-data-v-58e9e25a 2s infinite; background: repeating-linear-gradient(180deg,gold,transparent);} .militarydesc {color: white; -webkit-animation: colorChange-data-v-58e9e25a 2s 2s infinite; animation: colorChange-data-v-58e9e25a 2s 2s infinite;} .attributes {height: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; background: repeating-linear-gradient(180deg,transparent,sienna); em {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: white; width: calc(100% / 6); -webkit-animation: colorChange-data-v-58e9e25a 2s 4s infinite; animation: colorChange-data-v-58e9e25a 2s 4s infinite;}}} .military-list-item[itemtype="\9526\56ca"],.military-list-item[itemtype="\9526\56ca"].lose{background-color: white; .militaryname {-webkit-animation: none; animation: none; background-color: crimson;} .militarydesc {color: black; -webkit-animation: none; animation: none;}} .military-list-item[itemtype="\91d1\94b1"],.military-list-item[itemtype="\91d1\94b1"].lose{border: none; -webkit-box-shadow: none; box-shadow: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: transparent; pointer-events: none; .militarymoney{font-size: 20px; -webkit-animation: colorChange-data-v-58e9e25a 2s 2s infinite; animation: colorChange-data-v-58e9e25a 2s 2s infinite;}} .military-list-item[itemtype="\6b66\5c06"],.military-list-item[itemtype="\6b66\5c06"].lose{background-color: tomato; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; .militaryname {font-size: 20px; -webkit-animation: colorChange-data-v-58e9e25a 2s 2s infinite; animation: colorChange-data-v-58e9e25a 2s 2s infinite; background-color: transparent;}} .military-list-item[itemtype="\6269\5efa"],.military-list-item[itemtype="\5360\9886"]{background-color: greenyellow; -webkit-animation: colorChange-data-v-58e9e25a 2s 2s infinite; animation: colorChange-data-v-58e9e25a 2s 2s infinite; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-line-pack: center; align-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; p {line-height: 1.5; text-align: center; width: 100%;}} .military-list-item[itemtype="\6269\5efa"].selected{background-color: black;} .military-list-item[itemtype="\5360\9886"].selected{margin-top:-360px; background-color:gray;} .military-list-item.lose {background: white; .militaryname {background-color: gold; -webkit-animation: none; animation: none;} .militarydesc {color: black; -webkit-animation: none; animation: none;} .attributes {background-color: sienna; em {-webkit-animation: none; animation: none;}}} .military-list-item.lose:hover {background-color: peru;} .military-list-item.lose.selected {background-color: peru;} .military-list-player{width: 120px; height: 32px; border-radius: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; margin: 10px; p{color: white;} .player-items{position: fixed; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: -webkit-box; display: -ms-flexbox; display: flex; height: 180px; display: none; .item {width: 120px; height: 180px; border: 2px solid; border-radius: 6px; cursor: pointer; margin: 10px; -webkit-transition: background-color .3s; transition: background-color .3s; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 20px; background-color: gold; color: white; -webkit-box-shadow: 2px 2px 2px black; box-shadow: 2px 2px 2px black;}}} .military-list-player.selected {-webkit-box-shadow: 0 0 6px black inset; box-shadow: 0 0 6px black inset; .player-items{display: -webkit-box; display: -ms-flexbox; display: flex;}}} .lottery-result {width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 20px auto; .lottery-result-box {width: 400px; height: 200px; -webkit-box-shadow: 0 0 8px black inset; box-shadow: 0 0 8px black inset; border-radius: 10px; background-color: white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; position: relative; .item {width: 100px; height: 100px; overflow: hidden; -webkit-box-shadow: 0 0 6px gray inset; box-shadow: 0 0 6px gray inset; position: relative; .item-box {position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-animation: lotteryChange-data-v-58e9e25a .5s linear infinite both; animation: lotteryChange-data-v-58e9e25a .5s linear infinite both; em {font-size: 40px; font-weight: bold; width: 100px; height: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: green;}} .item-result {position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); background-color: white; color: red; font-size: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-shadow: 0 0 6px gray inset; box-shadow: 0 0 6px gray inset;}} .dice1-btn {position: absolute; bottom: 16px; left: 60px; background-color: red; color: white; width: 80px; height: 24px; font-size: 12px; border-radius: 4px; -webkit-box-shadow: 2px 2px 2px black; box-shadow: 2px 2px 2px black; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; -webkit-animation: boxshadow-data-v-58e9e25a 1s linear infinite; animation: boxshadow-data-v-58e9e25a 1s linear infinite;} .dice2-btn {position: absolute; bottom: 16px; right: 60px; background-color: red; color: white; width: 80px; height: 24px; font-size: 12px; border-radius: 4px; -webkit-box-shadow: 2px 2px 2px black; box-shadow: 2px 2px 2px black; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; -webkit-animation: boxshadow-data-v-58e9e25a 1s linear infinite; animation: boxshadow-data-v-58e9e25a 1s linear infinite;}}} .btns {display: -webkit-box; display: -ms-flexbox; display: flex; width: 320px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; >div {border-radius: 6px; width: 120px; height: 40px; color: white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer;} .lottery-btn {background-color: red;} .close-btn {background-color: black;} .lose-btn {background-color: red;} .receive-btn{background-color: green;}}}@-webkit-keyframes colorChange-data-v-58e9e25a{0%{color:red}25%{color:orange}50%{color:#ff0}75%{color:green}to{color:#00f}}@keyframes colorChange-data-v-58e9e25a{0%{color:red}25%{color:orange}50%{color:#ff0}75%{color:green}to{color:#00f}}@-webkit-keyframes lotteryChange-data-v-58e9e25a{0%{top:0}20%{top:-100%}40%{top:-200%}60%{top:-300%}80%{top:-400%}to{top:-500%}}@keyframes lotteryChange-data-v-58e9e25a{0%{top:0}20%{top:-100%}40%{top:-200%}60%{top:-300%}80%{top:-400%}to{top:-500%}}@-webkit-keyframes boxshadow-data-v-58e9e25a{0%{-webkit-box-shadow:2px 2px 2px black;box-shadow:2px 2px 2px #000}to{-webkit-box-shadow:0 0 2px black inset;box-shadow:0 0 2px #000 inset}}@keyframes boxshadow-data-v-58e9e25a{0%{-webkit-box-shadow:2px 2px 2px black;box-shadow:2px 2px 2px #000}to{-webkit-box-shadow:0 0 2px black inset;box-shadow:0 0 2px #000 inset}}.garrison[data-v-de3809c6]{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,.5);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:center;align-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;.generals-list {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 180px; -ms-flex-wrap:wrap; flex-wrap:wrap; position:fixed; top: 0; left: 0; li {width: 120px; height: 100%; border-radius: 8px; border: 1px solid black; -webkit-box-shadow: 2px 2px 2px black; box-shadow: 2px 2px 2px black; margin-right: 2px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; position: relative; background-size: 100% 120px; background-position: center 32px; background-repeat: no-repeat; background-color: white; .generaltype {width: 24px; height: 24px; border: 2px solid khaki; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: khaki; position: absolute; top: 38px; -webkit-animation: colorChange-data-v-de3809c6 5s infinite; animation: colorChange-data-v-de3809c6 5s infinite;} .land {left: 6px;} .water {right: 6px;} .generalname {color: white; height: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0;} .attributes {position: absolute; bottom: 0; width: 100%; height: 24px; display: -webkit-box; display: -ms-flexbox; display: flex; border-top: 2px solid khaki; em {width: 20px; height: 100%; color: black; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-right: 2px solid khaki; font-size: 12px;} em:last-of-type {border-right: none;}}}} .generals-list.garrison{top: initial; bottom: 0;} .btns{position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; >div {border-radius: 6px; width: 120px; height: 40px; color: white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer;} .garrison-btn {background-color: red;} .close-btn {background-color: black;}}}@-webkit-keyframes colorChange-data-v-de3809c6{0%{color:red}25%{color:orange}50%{color:#ff0}75%{color:green}to{color:#00f}}@keyframes colorChange-data-v-de3809c6{0%{color:red}25%{color:orange}50%{color:#ff0}75%{color:green}to{color:#00f}}@-webkit-keyframes lotteryChange-data-v-de3809c6{0%{top:0}20%{top:-100%}40%{top:-200%}60%{top:-300%}80%{top:-400%}to{top:-500%}}@keyframes lotteryChange-data-v-de3809c6{0%{top:0}20%{top:-100%}40%{top:-200%}60%{top:-300%}80%{top:-400%}to{top:-500%}}@-webkit-keyframes boxshadow-data-v-de3809c6{0%{-webkit-box-shadow:2px 2px 2px black;box-shadow:2px 2px 2px #000}to{-webkit-box-shadow:0 0 2px black inset;box-shadow:0 0 2px #000 inset}}@keyframes boxshadow-data-v-de3809c6{0%{-webkit-box-shadow:2px 2px 2px black;box-shadow:2px 2px 2px #000}to{-webkit-box-shadow:0 0 2px black inset;box-shadow:0 0 2px #000 inset}}.battle[data-v-285c0184]{position:fixed;top:0;left:0;width:100%;height:0;background:repeating-radial-gradient(white,orange,white);-webkit-box-shadow:0 2px 10px rgba(0,0,0,.1);box-shadow:0 2px 10px #0000001a;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:20;-webkit-transition:all .5s;transition:all .5s;display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;.generals-list {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 180px; -ms-flex-wrap: wrap; flex-wrap: wrap; position: fixed; top: 0; left: 0; li {width: 120px; height: 100%; border-radius: 8px; border: 1px solid black; -webkit-box-shadow: 2px 2px 2px black; box-shadow: 2px 2px 2px black; margin-right: 2px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; position: relative; background-size: 100% 120px; background-position: center 32px; background-repeat: no-repeat; background-color: white; cursor: pointer; .generaltype {width: 24px; height: 24px; border: 2px solid khaki; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: khaki; position: absolute; top: 38px; -webkit-animation: colorChange 5s infinite; animation: colorChange 5s infinite;} .land {left: 6px;} .water {right: 6px;} .generalname {color: white; height: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0;} .attributes {position: absolute; bottom: 0; width: 100%; height: 24px; display: -webkit-box; display: -ms-flexbox; display: flex; border-top: 2px solid khaki; em {width: 20px; height: 100%; color: black; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-right: 2px solid khaki; font-size: 12px;} em:last-of-type {border-right: none;}}} li.selected::before {position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0; background: url(https://pdshelftools.onlinesurvey.site/img/battle.png) no-repeat 0 0; background-size: 32px;}} .btns {position: fixed; bottom: 20px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; >div {border-radius: 6px; width: 120px; height: 40px; color: white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer;} .battle-btn {background-color: red;}} .player-list {display: -webkit-box; display: -ms-flexbox; display: flex; width: 100vw; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; .player-item {width: 40%; height: 100vh; position: relative; .item-info {height: 40px; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; .name {width: 160px; height: 32px; padding: 10px; border-radius: 10px; -webkit-box-shadow: 2px 2px 2px; box-shadow: 2px 2px 2px; margin: 10px; color: white; background-color: teal; cursor: pointer; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center;} .health {width: calc(100% - 180px); height: 32px; border: 2px solid silver; border-radius: 16px; background-color: greenyellow; position: relative; overflow: hidden;} .health[hp="0"]::before {position: absolute; content: ""; width: 100%; height: 100%; background-color: red; -webkit-transition: all .5s; transition: all .5s;} .health[hp="1"]::before {position: absolute; content: ""; width: 66%; height: 100%; background-color: red; -webkit-transition: all .5s; transition: all .5s;} .health[hp="2"]::before {position: absolute; content: ""; width: 33%; height: 100%; background-color: red; -webkit-transition: all .5s; transition: all .5s;} .health[hp="3"]::before {position: absolute; content: ""; width: 0%; height: 100%; background-color: red; -webkit-transition: all .5s; transition: all .5s;}} .item-generals {width: 100%; height: calc(100vh - 40px); display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; li {width: 200px; height: 320px; border-radius: 8px; border: 1px solid black; -webkit-box-shadow: 2px 2px 2px black; box-shadow: 2px 2px 2px black; margin-right: 2px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; position: relative; background-size: cover; background-position: center 32px; background-repeat: no-repeat; .generaltype {width: 24px; height: 24px; border: 2px solid khaki; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: khaki; position: absolute; top: 38px; -webkit-animation: colorChange 5s infinite; animation: colorChange 5s infinite;} .land {left: 6px;} .water {right: 6px;} .generalname {color: white; height: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0;} .attributes {position: absolute; bottom: 0; width: 100%; height: 24px; display: -webkit-box; display: -ms-flexbox; display: flex; border-top: 2px solid khaki; em {width: calc(100% / 6); height: 100%; color: khaki; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-right: 2px solid khaki; font-size: 12px; -webkit-animation: colorChange 5s infinite; animation: colorChange 5s infinite;} em:last-of-type {border-right: none;}}}} .item-dps {position: absolute; top: 60px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); font-size: 40px; color: red;}} .player-item.on .item-info .name {background-color: firebrick; -webkit-box-shadow: 0 0 6px gray inset; box-shadow: 0 0 6px gray inset; -webkit-animation: backgroundcolorChange 2s infinite; animation: backgroundcolorChange 2s infinite;}} .roll {position: fixed; width: 20vh; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); cursor: pointer; .roll-item {width: 90%; height: 32px; border-radius: 6px; border: 4px solid goldenrod; background-color: black; color: goldenrod; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 auto; position: relative; margin-top: -4px;}} .roll[roll="1"] .roll-item:nth-of-type(1)::before {position: absolute; content: ""; width: 100%; height: 100%; background-color: rgba(255,255,255,.3); top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);} .roll[roll="2"] .roll-item:nth-of-type(2)::before {position: absolute; content: ""; width: 100%; height: 100%; background-color: rgba(255,255,255,.3); top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);} .roll[roll="3"] .roll-item:nth-of-type(3)::before {position: absolute; content: ""; width: 100%; height: 100%; background-color: rgba(255,255,255,.3); top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);} .roll[roll="4"] .roll-item:nth-of-type(4)::before {position: absolute; content: ""; width: 100%; height: 100%; background-color: rgba(255,255,255,.3); top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);} .roll[roll="5"] .roll-item:nth-of-type(5)::before {position: absolute; content: ""; width: 100%; height: 100%; background-color: rgba(255,255,255,.3); top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);} .roll[roll="6"] .roll-item:nth-of-type(6)::before {position: absolute; content: ""; width: 100%; height: 100%; background-color: rgba(255,255,255,.3); top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);} .roll[attacker="1"] .roll-item:nth-of-type(1)::before {position: absolute; content: ""; width: 50%; height: 100%; background-color: rgba(255,0,0,.8); top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .roll[attacker="2"] .roll-item:nth-of-type(2)::before {position: absolute; content: ""; width: 50%; height: 100%; background-color: rgba(255,0,0,.8); top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .roll[attacker="3"] .roll-item:nth-of-type(3)::before {position: absolute; content: ""; width: 50%; height: 100%; background-color: rgba(255,0,0,.8); top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .roll[attacker="4"] .roll-item:nth-of-type(4)::before {position: absolute; content: ""; width: 50%; height: 100%; background-color: rgba(255,0,0,.8); top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .roll[attacker="5"] .roll-item:nth-of-type(5)::before {position: absolute; content: ""; width: 50%; height: 100%; background-color: rgba(255,0,0,.8); top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .roll[attacker="6"] .roll-item:nth-of-type(6)::before {position: absolute; content: ""; width: 50%; height: 100%; background-color: rgba(255,0,0,.8); top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .roll[defender="1"] .roll-item:nth-of-type(1)::after {position: absolute; content: ""; width: 50%; height: 100%; background-color: rgba(0,255,0,.8); top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .roll[defender="2"] .roll-item:nth-of-type(2)::after {position: absolute; content: ""; width: 50%; height: 100%; background-color: rgba(0,255,0,.8); top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .roll[defender="3"] .roll-item:nth-of-type(3)::after {position: absolute; content: ""; width: 50%; height: 100%; background-color: rgba(0,255,0,.8); top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .roll[defender="4"] .roll-item:nth-of-type(4)::after {position: absolute; content: ""; width: 50%; height: 100%; background-color: rgba(0,255,0,.8); top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .roll[defender="5"] .roll-item:nth-of-type(5)::after {position: absolute; content: ""; width: 50%; height: 100%; background-color: rgba(0,255,0,.8); top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .roll[defender="6"] .roll-item:nth-of-type(6)::after {position: absolute; content: ""; width: 50%; height: 100%; background-color: rgba(0,255,0,.8); top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .roll.off {pointer-events: none;}}.battle.show[data-v-285c0184]{height:100vh}.player-item:first-of-type .item-info .health[data-v-285c0184]:before{right:0}.player-item:last-of-type .item-info .health[data-v-285c0184]:before{left:0}.wait[data-v-285c0184]{position:fixed;top:0;bottom:0;left:0;right:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:40px;-webkit-animation:colorChange 5s infinite;animation:colorChange 5s infinite}.battleend[data-v-285c0184]{position:fixed;top:0;bottom:0;left:0;right:0;.battleend-title {position: absolute; top: 40px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); font-size: 32px; -webkit-animation: colorChange 5s infinite; animation: colorChange 5s infinite;} .battleend-generals {position: absolute; top: 80px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; li {width: 120px; height: 180px; border-radius: 8px; border: 1px solid black; -webkit-box-shadow: 2px 2px 2px black; box-shadow: 2px 2px 2px black; margin-right: 2px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; position: relative; background-size: cover; background-position: center 32px; background-repeat: no-repeat; background-color: white; .generalname {color: white; height: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0;}}} .battleend-handle {position: absolute; top: 300px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); .box {width: 300px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; .item {width: 80px; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 40px; color: red; background-color: black; border-radius: 10px; border: 2px solid white; -webkit-box-shadow: 2px 2px 2px black; box-shadow: 2px 2px 2px black; margin: 0 10px;}} .box[handle="1"] .item:nth-of-type(1) {margin-top: -20px;} .box[handle="2"] .item:nth-of-type(2) {margin-top: -20px;} .box[handle="3"] .item:nth-of-type(3) {margin-top: -20px;} .btn {width: 120px; height: 32px; background-color: red; color: white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 20px auto; border-radius: 10px; cursor: pointer;}}}.battleend[data-v-27a14a90]{position:fixed;top:0;left:0;right:0;bottom:0;background:repeating-radial-gradient(white,orange,white);-webkit-box-shadow:0 2px 10px rgba(0,0,0,.1);box-shadow:0 2px 10px #0000001a;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:20;-webkit-transition:all .5s;transition:all .5s;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;-webkit-animation:colorChange 5s infinite;animation:colorChange 5s infinite;font-size:40px}.tipapply[data-v-4f8f7bd8]{position:fixed;top:0;left:0;width:100%;height:100%;background:repeating-radial-gradient(white,skyblue,white);-webkit-box-shadow:0 2px 10px rgba(0,0,0,.1);box-shadow:0 2px 10px #0000001a;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:20;-webkit-transition:all .5s;transition:all .5s;display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;.currenttip {width: 120px; height: 180px; border-radius: 8px; border: 1px solid black; -webkit-box-shadow: 2px 2px 2px black; box-shadow: 2px 2px 2px black; margin-right: 2px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; position: absolute; top: 20px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: white; .tipname {background-color: crimson; color: white; height: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0;} .tipdesc {width: 100%; height: calc(100% - 32px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 10px; -webkit-box-sizing: border-box; box-sizing: border-box;}} .result {position: absolute; top: 220px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; li {width: 120px; height: 120px; border: 1px solid black; -webkit-box-shadow: 2px 2px 2px black; box-shadow: 2px 2px 2px black; margin-right: 4px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; position: relative; background-color: white; .treasurename {background-color: gold; color: white; height: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0;} .treasuredesc {width: 100%; height: calc(100% - 32px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden;}} li.item-money {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;} li.item-dice {width: 100px; height: 100px; border: none; overflow: inherit; margin: 30px; .dice-box {position: absolute; height: 100%; width: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(45deg) rotateY(45deg); transform: rotateX(45deg) rotateY(45deg); div {background-color: white; width: 100px; height: 100px; border-radius: 10px; position: absolute; -webkit-box-shadow: 0 0 10px black; box-shadow: 0 0 10px black;} .dice-front {-webkit-transform: translateZ(50px); transform: translateZ(50px); background-image: radial-gradient(35px at 50px 50px,pink,red 35px,transparent 36px);} .dice-back {-webkit-transform: translateZ(-50px); transform: translateZ(-50px); background-image: radial-gradient(11px at 30px 20px,gray,black 11px,transparent 12px),radial-gradient(11px at 65px 20px,gray,black 11px,transparent 12px),radial-gradient(11px at 30px 50px,gray,black 11px,transparent 12px),radial-gradient(11px at 30px 80px,gray,black 11px,transparent 12px),radial-gradient(11px at 65px 50px,gray,black 11px,transparent 12px),radial-gradient(11px at 65px 80px,gray,black 11px,transparent 12px);} .dice-left {-webkit-transform: rotateY(-90deg) translateZ(50px); transform: rotateY(-90deg) translateZ(50px); background-image: radial-gradient(12px at 25px 25px,gray,black 12px,transparent 13px),radial-gradient(12px at 25px 75px,gray,black 12px,transparent 13px),radial-gradient(12px at 75px 25px,gray,black 12px,transparent 13px),radial-gradient(12px at 50px 50px,pink,red 12px,transparent 13px),radial-gradient(12px at 75px 75px,gray,black 12px,transparent 13px);} .dice-right {-webkit-transform: rotateY(90deg) translateZ(50px); transform: rotateY(90deg) translateZ(50px); background-image: radial-gradient(17px at 25px 25px,gray,black 17px,transparent 18px),radial-gradient(17px at 75px 75px,gray,black 17px,transparent 18px);} .dice-top {-webkit-transform: rotateX(90deg) translateZ(50px); transform: rotateX(90deg) translateZ(50px); background-image: radial-gradient(12px at 25px 25px,gray,black 12px,transparent 13px),radial-gradient(12px at 50px 50px,gray,black 12px,transparent 13px),radial-gradient(12px at 75px 75px,gray,black 12px,transparent 13px);} .dice-buttom {-webkit-transform: rotateX(-90deg) translateZ(50px); transform: rotateX(-90deg) translateZ(50px); background-image: radial-gradient(12px at 25px 25px,gray,black 12px,transparent 13px),radial-gradient(12px at 25px 75px,gray,black 12px,transparent 13px),radial-gradient(12px at 75px 25px,gray,black 12px,transparent 13px),radial-gradient(12px at 75px 75px,gray,black 12px,transparent 13px);}}} .item-dice[dice="1"] {.dice-box {-webkit-transform: rotateX(0deg) rotateY(0deg); transform: rotateX(0deg) rotateY(0deg);}} .item-dice[dice="2"] {.dice-box {-webkit-transform: rotateX(0deg) rotateY(270deg); transform: rotateX(0deg) rotateY(270deg);}} .item-dice[dice="3"] {.dice-box {-webkit-transform: rotateX(270deg) rotateY(0deg); transform: rotateX(270deg) rotateY(0deg);}} .item-dice[dice="4"] {.dice-box {-webkit-transform: rotateX(90deg) rotateY(0deg); transform: rotateX(90deg) rotateY(0deg);}} .item-dice[dice="5"] {.dice-box {-webkit-transform: rotateX(0deg) rotateY(90deg); transform: rotateX(0deg) rotateY(90deg);}} .item-dice[dice="6"] {.dice-box {-webkit-transform: rotateX(0deg) rotateY(180deg); transform: rotateX(0deg) rotateY(180deg);}} li.item-general {background-size: cover; .generalname {-webkit-animation: colorChange 5s infinite; animation: colorChange 5s infinite;}} li.on {-webkit-box-shadow: 0 0 4px black inset; box-shadow: 0 0 4px black inset;} li.item-dice.on {opacity: .5;}} .apply {position: absolute; top: 400px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 120px; height: 32px; border-radius: 10px; background-color: red; color: white; -webkit-box-shadow: 2px 2px 2px black; box-shadow: 2px 2px 2px black; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}}@-webkit-keyframes dice-data-v-4f8f7bd8{0%{-webkit-transform:rotateX(0deg) rotateY(0deg);transform:rotateX(0) rotateY(0)}50%{-webkit-transform:rotateX(180deg) rotateY(360deg);transform:rotateX(180deg) rotateY(360deg)}to{-webkit-transform:rotateX(540deg) rotateY(720deg);transform:rotateX(540deg) rotateY(720deg)}}@keyframes dice-data-v-4f8f7bd8{0%{-webkit-transform:rotateX(0deg) rotateY(0deg);transform:rotateX(0) rotateY(0)}50%{-webkit-transform:rotateX(180deg) rotateY(360deg);transform:rotateX(180deg) rotateY(360deg)}to{-webkit-transform:rotateX(540deg) rotateY(720deg);transform:rotateX(540deg) rotateY(720deg)}}.game-play{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.game-play .player{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:10}.game-over-message{position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:320px;height:240px;border-radius:20px;background:white;padding:20px;border:1px solid black;text-align:center}.game-over-message .game-over-rank{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.game-over-message .game-over-rank .item{width:25%;height:3em;margin:0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative}.game-over-message .game-over-rank .item[rank="0"]:before{position:absolute;content:"\7b2c\4e00\540d";top:100%;left:0;width:100%;text-align:center}.game-over-message .game-over-rank .item[rank="1"]:before{position:absolute;content:"\7b2c\4e8c\540d";top:100%;left:0;width:100%;text-align:center}.game-over-message .game-over-rank .item[rank="2"]:before{position:absolute;content:"\7b2c\4e09\540d";top:100%;left:0;width:100%;text-align:center}.game-over-message .game-over-rank .item[rank="3"]:before{position:absolute;content:"\7b2c\56db\540d";top:100%;left:0;width:100%;text-align:center}.game-over-message p{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:138px;margin-top:20px}.game-over-message .btns{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:10px}.game-over-message .btns div{width:100px;height:32px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:6px;-webkit-box-shadow:2px 2px 2px black;box-shadow:2px 2px 2px #000;color:#fff;cursor:pointer}.game-over-message .btns .restart{background-color:red}.game-over-message .btns .over{background-color:#000}.pullgenerals-info{position:absolute;top:0;left:50%;-webkit-transform:translateX(-50%);transform:translate(-50%);line-height:40px;font-size:32px;color:red}.pullgenerals{height:0;width:100vw;position:fixed;top:0;left:0;z-index:999;background-color:#fff;-webkit-transition:all .5s linear;transition:all .5s linear;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-line-pack:center;align-content:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.pullgenerals .pullgenerals-list{width:80%;height:240px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;position:relative;z-index:2}.pullgenerals .pullgenerals-list .box{min-width:10000px;height:240px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-animation:move 20s linear infinite;animation:move 20s linear infinite;position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translate(-50%)}.pullgenerals .pullgenerals-list .box .item{width:100%;height:240px;background-size:cover;background-position:center;margin-bottom:20px;position:relative}.pullgenerals .pullgenerals-list .box .item:before{position:absolute;content:attr(name);width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:24px;text-align:center;-webkit-animation:colorChange 5s infinite;animation:colorChange 5s infinite}.pullgenerals .pullgenerals-list .box.on{-webkit-animation:move .2s linear infinite;animation:move .2s linear infinite}.pullgenerals.show{height:100vh}.pullgenerals-btns{margin-top:20px;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.pullgenerals-btns div{width:240px;height:32px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#fff;margin:10px;cursor:pointer}.pullgenerals-btns .pull{background-color:red}.pullgenerals-btns .close{background-color:#000}@-webkit-keyframes move{0%{left:50%}to{left:200%}}@keyframes move{0%{left:50%}to{left:200%}}.card-drop-container{position:absolute;left:50%;z-index:1;top:50%;-webkit-transform:translate(-50%,-50%) scale(.5);transform:translate(-50%,-50%) scale(.5)}.card-drop-container .card{width:240px;height:320px;position:relative;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:-webkit-transform 1s linear;transition:-webkit-transform 1s linear;transition:transform 1s linear;transition:transform 1s linear,-webkit-transform 1s linear}.card-drop-container .card .card-front,.card-drop-container .card .card-back{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#fff;font-size:40px;overflow:hidden}.card-drop-container .card .card-front{-webkit-transform:rotateY(180deg);transform:rotateY(180deg);background-size:cover;background-position:center;font-size:24px}.card-drop-container .card .card-front .playername{line-height:32px;background-color:#00000080;position:absolute;top:0;left:0;width:100%;text-align:center}.card-drop-container .card .card-front .playertype{position:absolute;bottom:0;width:100%;text-align:center;left:0}.card-drop-container .card .card-front .playertype p{line-height:2;background-color:#00000080}.card-drop-container .card .card-front .playertype .attack{color:red}.card-drop-container .card .card-front .playertype .defend{color:#00f}.card-drop-container .card .card-front .playertype .heal{color:green}.card-drop-container.on{-webkit-animation:cardDrop 2s 1s forwards;animation:cardDrop 2s 1s forwards}.card-drop-container.on .card.on{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}[won=\795e\79d8\6b66\5c06] .card-back{background:#f1f}[won=\91d1\8272\4f20\8bf4] .card-back{background:#ffcc00}@-webkit-keyframes cardDrop{0%{z-index:1;top:50%;-webkit-transform:translate(-50%,-50%) scale(.5);transform:translate(-50%,-50%) scale(.5)}50%{z-index:1;top:-50%;-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}to{z-index:2;top:40%;-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}}@keyframes cardDrop{0%{z-index:1;top:50%;-webkit-transform:translate(-50%,-50%) scale(.5);transform:translate(-50%,-50%) scale(.5)}50%{z-index:1;top:-50%;-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}to{z-index:2;top:40%;-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}}.all-generals[data-v-6cd584ae]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:180px;-ms-flex-wrap:wrap;flex-wrap:wrap;position:fixed;left:0;top:0;li {width: 116px; height: 116px; margin: 2px; -webkit-box-shadow: 2px 2px 4px black; box-shadow: 2px 2px 4px black; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; background-size: cover; background-position: center; background-repeat: no-repeat; color: white; position: relative;}}.current-generals[data-v-6cd584ae]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:180px;-ms-flex-wrap:wrap;flex-wrap:wrap;position:fixed;left:0;bottom:0;pointer-events:none;li {width: 120px; height: 100%; border-radius: 8px; border: 1px solid black; -webkit-box-shadow: 2px 2px 2px black; box-shadow: 2px 2px 2px black; margin-right: 2px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; position: relative; background-size: cover; background-position: center 32px; background-repeat: no-repeat; cursor: pointer; .generaltype {width: 24px; height: 24px; border: 2px solid khaki; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: khaki; position: absolute; top: 38px; -webkit-animation: colorChange 5s infinite; animation: colorChange 5s infinite;} .land {left: 6px;} .water {right: 6px;} .generalname {color: white; height: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0;} .attributes {position: absolute; bottom: 0; width: 100%; height: 24px; display: -webkit-box; display: -ms-flexbox; display: flex; border-top: 2px solid khaki; em {width: 20px; height: 100%; color: khaki; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-right: 2px solid khaki; font-size: 12px; -webkit-animation: colorChange 5s infinite; animation: colorChange 5s infinite;} em:last-of-type {border-right: none;}}} li.selected::before {position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0; background: url(https://pdshelftools.onlinesurvey.site/img/battle.png) no-repeat 0 0; background-size: 32px;}}.current-generals.on[data-v-6cd584ae]{pointer-events:all}.btns[data-v-6cd584ae]{position:fixed;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);div {width: 120px; height: 32px; border-radius: 10px; background-color: red; color: white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; cursor: pointer;} .ready {background-color: gray; pointer-events: none;} .ready.on {background-color: red; pointer-events: all;}}.pull[data-v-baee5936]{position:absolute;left:10px;top:10px;width:160px;text-align:center;line-height:32px;div {width: 100%; height: 32px; color: white; margin: 10px; cursor: pointer;} .normal {background: -webkit-gradient(linear,left top,right top,from(black),to(rgba(0,0,255,.5))); background: linear-gradient(90deg,black,rgba(0,0,255,.5));} .up {background: -webkit-gradient(linear,left top,right top,from(red),to(rgba(0,0,255,.5))); background: linear-gradient(90deg,red,rgba(0,0,255,.5));} .sup {background: -webkit-gradient(linear,left top,right top,from(green),to(rgba(0,0,255,.5))); background: linear-gradient(90deg,green,rgba(0,0,255,.5));} .ssup {background: -webkit-gradient(linear,left top,right top,from(yellow),to(rgba(0,0,255,.5))); background: linear-gradient(90deg,yellow,rgba(0,0,255,.5));}}.signin[data-v-baee5936]{position:absolute;right:10px;top:10px;width:160px;.checkin {width: 100%; height: 32px; text-align: center; line-height: 32px; color: white; background-color: red; cursor: pointer;} .checkin.off {-webkit-filter: grayscale(1); filter: grayscale(1); pointer-events: none; opacity: .5;} p {margin-top: 10px;}}.btns[data-v-baee5936]{width:320px;height:120px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);div {cursor: pointer; width: 100%; height: 40px; border-radius: 10px; text-align: center; line-height: 40px; color: white; margin: 10px;} .jungleGeneral {background: -webkit-gradient(linear,left top,left bottom,from(red),to(rgba(0,0,255,.5))); background: linear-gradient(180deg,red,rgba(0,0,255,.5));} .prepareGame {background: -webkit-gradient(linear,left bottom,left top,from(red),to(rgba(0,255,0,.5))); background: linear-gradient(0deg,red,rgba(0,255,0,.5));} .majiang{background: -webkit-gradient(linear,left bottom,left top,from(red),to(rgba(0,0,0,.5))),red; background: linear-gradient(0deg,red,rgba(0,0,0,.5)),red;}}.character-select[data-v-1e8d19c3]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap}.character-card[data-v-1e8d19c3]{border:1px solid #ccc;border-radius:10px;padding:20px;margin:10px;text-align:center;cursor:pointer;width:200px;-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;position:relative;.attack-type{display: none; margin-top: 10px; height: 32px; width: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; em{display: -webkit-box; display: -ms-flexbox; display: flex; width: 50%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; color: white;} .might{background-color: red;} .intelligence{background-color: blue;}}}.character-card[data-v-1e8d19c3]:hover{-webkit-transform:scale(1.05);transform:scale(1.05);background-color:#f0f0f0;.attack-type{display: -webkit-box; display: -ms-flexbox; display: flex;}}.character-image[data-v-1e8d19c3]{width:100px;height:100px;-o-object-fit:cover;object-fit:cover;border-radius:50%;margin-bottom:10px}.star[data-v-1e8d19c3]{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;left:5px;top:5px}.star em[data-v-1e8d19c3]{position:relative;display:inline-block;color:gold;width:0;height:0;border-right:10px solid transparent;border-bottom:7px solid gold;border-left:10px solid transparent;-webkit-transform:rotate(35deg);transform:rotate(35deg)}.star em[data-v-1e8d19c3]:before{border-bottom:7px solid gold;border-left:3px solid transparent;border-right:3px solid transparent;position:absolute;height:0;width:0;top:-4px;left:-7px;display:block;content:"";-webkit-transform:rotate(-35deg);transform:rotate(-35deg)}.star em[data-v-1e8d19c3]:after{position:absolute;display:block;color:gold;top:1px;left:-10px;width:0;height:0;border-right:10px solid transparent;border-bottom:7px solid gold;border-left:10px solid transparent;-webkit-transform:rotate(-70deg);transform:rotate(-70deg);content:""}.game-canvas[data-v-1882d0c6]{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;height:100vh;padding:20px;-webkit-box-sizing:border-box;box-sizing:border-box}.player-status[data-v-1882d0c6],.boss-status[data-v-1882d0c6]{background:rgba(0,0,0,.5);color:#fff;padding:20px;border-radius:10px;width:160px;text-align:center;position:relative;.info {width: 100%; height: 240px; background-size: cover; background-position: center; margin-bottom: 20px; position: relative; .playername {line-height: 32px; background-color: rgba(0,0,0,.5); position: relative;} .playername::before {position: absolute; content: attr(level); left: 0; top: 0; color: goldenrod;} .playertype {position: absolute; bottom: 0; width: 100%; text-align: center; left: 0; p {line-height: 2; background-color: rgba(0,0,0,.5);} .attack {color: red;} .defend {color: blue;} .heal {color: green;}}} .autocombat{position: absolute; top: calc(100% + 10px); left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 120px; height: 32px; border-radius: 10px; background-color: red; color: white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; cursor: pointer;} .autocombat.off{background-color: blue;}}.player-status[data-v-1882d0c6]:before{position:absolute;content:"";width:48px;height:64px;right:-80px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);background-position:0 0;background-repeat:no-repeat}.player-status[status=attack][data-v-1882d0c6]:before{width:64px;height:64px;background-size:400%;-webkit-animation:playerattack-data-v-1882d0c6 1s steps(3);animation:playerattack-data-v-1882d0c6 1s steps(3)}.player-status[status=defend][data-v-1882d0c6]:before{width:48px;height:64px;background-size:400%;-webkit-animation:playerdefend-data-v-1882d0c6 1s steps(2);animation:playerdefend-data-v-1882d0c6 1s steps(2)}.player-status[status=heal][data-v-1882d0c6]:before{width:48px;height:64px;background-size:400%;-webkit-animation:playerheal-data-v-1882d0c6 1s steps(2);animation:playerheal-data-v-1882d0c6 1s steps(2)}.player-status[typeland=\67aa][data-v-1882d0c6]:before{background-image:url(https://pdshelftools.onlinesurvey.site/img/\67aa.png)}.player-status[typeland=\67aa][status=attack][data-v-1882d0c6]:before{background:url(https://pdshelftools.onlinesurvey.site/img/\67aa\653b.png) no-repeat}.player-status[typeland=\67aa][status=defend][data-v-1882d0c6]:before{background:url(https://pdshelftools.onlinesurvey.site/img/\67aa.png) no-repeat}.player-status[typeland=\67aa][status=heal][data-v-1882d0c6]:before{background:url(https://pdshelftools.onlinesurvey.site/img/\67aa.png) no-repeat}.player-status[typeland=\9a91][data-v-1882d0c6]:before{background-image:url(https://pdshelftools.onlinesurvey.site/img/\9a91.png)}.player-status[typeland=\9a91][status=attack][data-v-1882d0c6]:before{background:url(https://pdshelftools.onlinesurvey.site/img/\9a91\653b.png) no-repeat}.player-status[typeland=\9a91][status=defend][data-v-1882d0c6]:before{background:url(https://pdshelftools.onlinesurvey.site/img/\9a91.png) no-repeat}.player-status[typeland=\9a91][status=heal][data-v-1882d0c6]:before{background:url(https://pdshelftools.onlinesurvey.site/img/\9a91.png) no-repeat}.player-status[typeland=\5f13][data-v-1882d0c6]:before{background-image:url(https://pdshelftools.onlinesurvey.site/img/\5f13.png)}.player-status[typeland=\5f13][status=attack][data-v-1882d0c6]:before{background:url(https://pdshelftools.onlinesurvey.site/img/\5f13\653b.png) no-repeat}.player-status[typeland=\5f13][status=defend][data-v-1882d0c6]:before{background:url(https://pdshelftools.onlinesurvey.site/img/\5f13.png) no-repeat}.player-status[typeland=\5f13][status=heal][data-v-1882d0c6]:before{background:url(https://pdshelftools.onlinesurvey.site/img/\5f13.png) no-repeat}.boss-status[data-v-1882d0c6]:before{position:absolute;content:"";width:64px;height:64px;left:-80px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);background-image:url(https://pdshelftools.onlinesurvey.site/img/boss.png);background-position:0 0;background-repeat:no-repeat}.boss-status[status=attack][data-v-1882d0c6]:before{background:url(https://pdshelftools.onlinesurvey.site/img/boss\653b.png) no-repeat;background-size:400%;-webkit-animation:bossattack-data-v-1882d0c6 1s steps(3);animation:bossattack-data-v-1882d0c6 1s steps(3)}.boss-status[status=defend][data-v-1882d0c6]:before{background:url(https://pdshelftools.onlinesurvey.site/img/boss.png) no-repeat;background-size:400%;-webkit-animation:bossdefend-data-v-1882d0c6 1s steps(3);animation:bossdefend-data-v-1882d0c6 1s steps(3)}.boss-status[status=heal][data-v-1882d0c6]:before{background:url(https://pdshelftools.onlinesurvey.site/img/boss.png) no-repeat;background-size:400%;-webkit-animation:bossheal-data-v-1882d0c6 1s steps(3);animation:bossheal-data-v-1882d0c6 1s steps(3)}.cards[data-v-1882d0c6]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;width:300px}.card-button[data-v-1882d0c6]{border:1px solid #ccc;border-radius:5px;padding:10px;margin:5px;cursor:pointer;-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;background:#fff}.card-button[data-v-1882d0c6]:hover{-webkit-transform:scale(1.05);transform:scale(1.05);background-color:#f0f0f0}.animate[data-v-1882d0c6]{-webkit-animation:shake-data-v-1882d0c6 1s;animation:shake-data-v-1882d0c6 1s}.hp-bar[data-v-1882d0c6],.defense-bar[data-v-1882d0c6],.exp-bar[data-v-1882d0c6]{position:relative;width:100%;height:20px;background:#555;border-radius:10px;margin-bottom:10px;overflow:hidden}.hp-bar-inner[data-v-1882d0c6],.defense-bar-inner[data-v-1882d0c6],.exp-bar-inner[data-v-1882d0c6]{height:100%;background:green}.defense-bar-inner[data-v-1882d0c6]{background:blue}.exp-bar-inner[data-v-1882d0c6]{background:goldenrod}.hp-text[data-v-1882d0c6],.defense-text[data-v-1882d0c6],.exp-text[data-v-1882d0c6]{position:absolute;top:0;left:50%;-webkit-transform:translateX(-50%);transform:translate(-50%);color:#fff;font-size:14px}.hp-change[data-v-1882d0c6]{position:absolute;top:-20px;left:50%;-webkit-transform:translateX(-50%);transform:translate(-50%);font-size:16px;font-weight:700;-webkit-animation:fadeOut-data-v-1882d0c6 1s forwards;animation:fadeOut-data-v-1882d0c6 1s forwards}.modal[data-v-1882d0c6]{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;.modal-content {background: #fff; padding: 20px; border-radius: 10px; text-align: center; .result {width: 100%; text-align: center; line-height: 2;} .general {margin-top: 20px; img {width: 64px; height: 64px; -o-object-fit: cover; object-fit: cover; border-radius: 50%; margin-bottom: 10px;} .generalname {text-align: center;} .generalattribute {margin-top: 10px; line-height: 2; p {position: relative; color: red;} p[up="0"] {color: black;} p[up]::before {position: absolute; content: "\2191"; color: red; right: 80%;} p[up="0"]::before {display: none;} p[up]::after {position: absolute; content: attr(up); color: red; left: 80%;} p[up="0"]::after {display: none;}}} .restart {margin: 20px auto; width: 240px; height: 32px; border-radius: 10px; background-color: red; color: white; line-height: 32px; cursor: pointer;}}}@-webkit-keyframes shake-data-v-1882d0c6{0%{-webkit-box-shadow:4px 4px 8px black;box-shadow:4px 4px 8px #000}10%{-webkit-box-shadow:4px 4px 8px black;box-shadow:4px 4px 8px #000}20%{-webkit-box-shadow:4px 4px 8px black;box-shadow:4px 4px 8px #000}30%{-webkit-box-shadow:4px 4px 8px black;box-shadow:4px 4px 8px #000}40%{-webkit-box-shadow:4px 4px 8px black;box-shadow:4px 4px 8px #000}50%{-webkit-box-shadow:4px 4px 8px black;box-shadow:4px 4px 8px #000}60%{-webkit-box-shadow:4px 4px 8px black;box-shadow:4px 4px 8px #000}70%{-webkit-box-shadow:4px 4px 8px black;box-shadow:4px 4px 8px #000}80%{-webkit-box-shadow:4px 4px 8px black;box-shadow:4px 4px 8px #000}90%{-webkit-box-shadow:4px 4px 8px black;box-shadow:4px 4px 8px #000}to{-webkit-box-shadow:none;box-shadow:none}}@keyframes shake-data-v-1882d0c6{0%{-webkit-box-shadow:4px 4px 8px black;box-shadow:4px 4px 8px #000}10%{-webkit-box-shadow:4px 4px 8px black;box-shadow:4px 4px 8px #000}20%{-webkit-box-shadow:4px 4px 8px black;box-shadow:4px 4px 8px #000}30%{-webkit-box-shadow:4px 4px 8px black;box-shadow:4px 4px 8px #000}40%{-webkit-box-shadow:4px 4px 8px black;box-shadow:4px 4px 8px #000}50%{-webkit-box-shadow:4px 4px 8px black;box-shadow:4px 4px 8px #000}60%{-webkit-box-shadow:4px 4px 8px black;box-shadow:4px 4px 8px #000}70%{-webkit-box-shadow:4px 4px 8px black;box-shadow:4px 4px 8px #000}80%{-webkit-box-shadow:4px 4px 8px black;box-shadow:4px 4px 8px #000}90%{-webkit-box-shadow:4px 4px 8px black;box-shadow:4px 4px 8px #000}to{-webkit-box-shadow:none;box-shadow:none}}.hp-change[data-v-1882d0c6]{position:absolute;top:-20px;left:50%;-webkit-transform:translateX(-50%);transform:translate(-50%);width:10rem;font-size:20px;color:#fff;-webkit-animation:fadeOut-data-v-1882d0c6 3s forwards;animation:fadeOut-data-v-1882d0c6 3s forwards}.hp-change.attack[data-v-1882d0c6]{color:red}.hp-change.defend[data-v-1882d0c6]{color:#00f}.hp-change.heal[data-v-1882d0c6]{color:green}@-webkit-keyframes fadeOut-data-v-1882d0c6{0%{opacity:1}to{opacity:0}}@keyframes fadeOut-data-v-1882d0c6{0%{opacity:1}to{opacity:0}}.hp-change-appear-active[data-v-1882d0c6],.hp-change-leave-active[data-v-1882d0c6]{-webkit-transition:opacity 1s;transition:opacity 1s}@-webkit-keyframes playerattack-data-v-1882d0c6{0%{background-position:0px -128px}to{background-position:-192px -128px}}@keyframes playerattack-data-v-1882d0c6{0%{background-position:0px -128px}to{background-position:-192px -128px}}@-webkit-keyframes playerdefend-data-v-1882d0c6{0%{background-position:0px -128px}to{background-position:-96px -128px}}@keyframes playerdefend-data-v-1882d0c6{0%{background-position:0px -128px}to{background-position:-96px -128px}}@-webkit-keyframes playerheal-data-v-1882d0c6{0%{background-position:0px 0px}to{background-position:-96px 0px}}@keyframes playerheal-data-v-1882d0c6{0%{background-position:0px 0px}to{background-position:-96px 0px}}@-webkit-keyframes bossattack-data-v-1882d0c6{0%{background-position:0px -64px}to{background-position:-192px -64px}}@keyframes bossattack-data-v-1882d0c6{0%{background-position:0px -64px}to{background-position:-192px -64px}}@-webkit-keyframes bossdefend-data-v-1882d0c6{0%{background-position:0px 0px}to{background-position:-192px 0px}}@keyframes bossdefend-data-v-1882d0c6{0%{background-position:0px 0px}to{background-position:-192px 0px}}@-webkit-keyframes bossheal-data-v-1882d0c6{0%{background-position:0px -192px}to{background-position:-192px -192px}}@keyframes bossheal-data-v-1882d0c6{0%{background-position:0px -192px}to{background-position:-192px -192px}}.register{width:272px;padding:20px;border-radius:20px;border:1px solid black;position:fixed;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);.currentcolor{width: 64px; height: 64px; margin: 10px auto; background-image: url(/assets/playericon.515edda0.png); background-size: 100%;} input {width: 100%; border-radius: 10px; border: 1px solid black; padding: 10px; outline: none; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; margin-bottom: 10px;} .selectcolor {margin-top: 10px; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; .item {width: 48px; height: 48px; border-radius: 4px; -webkit-box-shadow: 2px 2px 2px; box-shadow: 2px 2px 2px; margin: 10px; cursor: pointer; background-image: url(/assets/playericon.515edda0.png); background-size: 100%;}} .btn {margin-top: 10px; background-color: gray; color: white; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: 48px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; cursor: pointer;}}.login{position:fixed;width:272px;padding:20px;border-radius:20px;border:1px solid black;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.login input{width:100%;border-radius:10px;border:1px solid black;padding:10px;outline:none;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;margin-top:10px}.login .btn{margin-top:10px;background-color:gray;color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;height:48px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;cursor:pointer}#app[data-v-1ccffcb6]{font-family:Arial,sans-serif;max-width:320px;margin:auto;text-align:center}.hu-rank[data-v-1ccffcb6]{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:20px;p {width: 25%; padding: 5px; border: 1px solid gray; border-radius: 10px; line-height: 1.5; margin: 5px; color: white; -webkit-box-shadow: 2px 2px 2px black; box-shadow: 2px 2px 2px black;} p:nth-of-type(1) {background-color: red;} p:nth-of-type(2) {background-color: orange;} p:nth-of-type(3) {background-color: purple;} p:nth-of-type(4) {background-color: blue;}}.hu-player[data-v-1ccffcb6]{margin-top:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;p {width: 50%;} select {width: 50%; border: 1px solid gray; line-height: 1.5; padding: 5px 0; border-radius: 10px;} select:active {border: 1px solid gray;}}.hu-type[data-v-1ccffcb6]{margin-top:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;div {width: calc(48% - 22px); margin: 1%; border: 1px solid gray; border-radius: 10px; padding: 10px; cursor: pointer;} div.active {background-color: red; color: white;}}.hu-hua[data-v-1ccffcb6]{margin-top:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;p {width: 50%;} input {width: 50%; padding: 10px; border-radius: 10px; border: 1px solid gray; text-align: center;}}.hu-score[data-v-1ccffcb6]{margin-top:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;div {width: 50%; padding: 10px; background-color: gray; color: white;} div.active {-webkit-box-shadow: 0 0 4px black inset; box-shadow: 0 0 4px black inset;}}.hu-fangpao[data-v-1ccffcb6]{select {width: 100%; padding: 5px; border-radius: 0; text-align: center;}}.hu-calculate[data-v-1ccffcb6]{width:80%;padding:10px;border-radius:10px;margin:20px auto 0;text-align:center;border:1px solid gray;cursor:pointer}.hu-confirm[data-v-1ccffcb6]{margin-top:20px;display:-webkit-box;display:-ms-flexbox;display:flex;div {padding: 10px; width: 50%; margin: 5%; border: 1px solid gray; cursor: pointer;}}.hu-history[data-v-1ccffcb6]{position:fixed;bottom:0;width:320px;height:32px;left:50%;-webkit-transform:translateX(-50%);transform:translate(-50%);p {width: 100%; height: 100%; border: 1px solid gray; -webkit-box-shadow: -2px -2px 2px black; box-shadow: -2px -2px 2px black; position: absolute; top: 0; left: 0; background-color: yellow; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer;} ul {position: absolute; bottom: 32px; -webkit-transition: all .5s; transition: all .5s; overflow: hidden; height: 0;}}.hu-history.active[data-v-1ccffcb6]{p {-webkit-box-shadow: 0 0 4px black inset; box-shadow: 0 0 4px black inset;} ul {height: auto;}}