mirror of https://github.com/bra1n/townsquare.git
1 line
56 KiB
CSS
1 line
56 KiB
CSS
.circle .player{margin-bottom:10px}.circle .player .shroud{content:" ";background:url(../img/shroud.5303197a.png) center -10px no-repeat;background-size:auto 100%;position:absolute;margin-left:-50px;width:100px;height:100px;left:50%;top:-30px;cursor:pointer;opacity:0;transform:scale(1.5);transition:all .2s;z-index:2}.circle .player .shroud:hover{opacity:.5;top:-10px;transform:scale(1)}.circle .player.dead .shroud{opacity:1;top:0;transform:scale(1)}.circle .player.dead .name{color:#999}#townsquare.public .player.dead:after{content:" ";position:absolute;left:0;top:0;width:100%;background:url(../img/vote.49ad13e5.png) 50% no-repeat;background-size:40%;height:153px;pointer-events:none}#townsquare.public .player.dead.traveller:after{-webkit-filter:grayscale(100%);filter:grayscale(100%)}#townsquare.public .player.dead.no-vote:after,#townsquare.public .player .shroud{display:none}.circle .token{border-radius:50%;height:153px;width:153px;background:url(../img/token.d0b9dbdf.png) 50%;background-size:100%;text-align:center;position:relative;color:#000;margin:auto;font-weight:600;text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff,0 0 5px rgba(0,0,0,.75);padding-top:105px;box-sizing:border-box;font-family:Papyrus,serif;border:3px solid #000;box-shadow:0 0 10px rgba(0,0,0,.5);cursor:pointer}.circle .token:before{content:" "}.circle .token:before,.circle .token span{background-size:100%;position:absolute;width:100%;height:100%;left:0;top:0}.circle .token span{pointer-events:none}.circle .token span.leaf-left{background-image:url(../img/leaf-left.334a9f91.png)}.circle .token span.leaf-orange{background-image:url(../img/leaf-orange.1b67c7dd.png)}.circle .token span.leaf-right{background-image:url(../img/leaf-right.58c52b77.png)}.circle .token span.leaf-top1{background-image:url(../img/leaf-top1.1f96fcda.png)}.circle .token span.leaf-top2{background-image:url(../img/leaf-top2.68c0883c.png)}.circle .token span.leaf-top3{background-image:url(../img/leaf-top3.b0a496c7.png)}.circle .token span.leaf-top4{background-image:url(../img/leaf-top4.e1f358c9.png)}.circle .token span.leaf-top5{background-image:url(../img/leaf-top5.47824085.png)}#townsquare.public .token{background-image:url(../img/life.37b97717.png)}#townsquare.public .token:after,#townsquare.public .token:before,#townsquare.public .token div,#townsquare.public .token span{display:none}#townsquare.public .player.dead .token{background-image:url(../img/death.2d96d4ce.png)}#townsquare.public .player.traveller .token{-webkit-filter:grayscale(100%);filter:grayscale(100%)}.name{font-size:120%;line-height:120%;text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000,0 0 10px rgba(0,0,0,.75)}#townsquare.public .ability{display:none}.circle .ability{position:absolute;padding:5px 10px;top:20px;right:100%;width:200px;z-index:25;font-size:80%;background:rgba(0,0,0,.7);border-radius:10px;border:3px solid #000;text-align:left;display:none}.circle .ability:after{content:" ";border:10px solid transparent;position:absolute;left:100%;width:0;height:0;border-left-color:#000;top:20px;margin:0 2px}.player:hover .ability{display:block}.circle .reminder{background:url(../img/reminder.5097ab11.png) 50%;background-size:100%;width:75px;height:75px;color:#000;font-size:50%;font-weight:700;display:block;margin:5px -37.5px 0;text-align:center;position:relative;box-sizing:border-box;padding-top:45px;border-radius:50%;border:3px solid #000;box-shadow:0 0 10px rgba(0,0,0,.5);transition:all .2s;cursor:pointer}.circle .reminder:after,.circle .reminder:before{content:" ";position:absolute;left:0;top:0;width:100%;height:100%;background-size:100%;background-position:center 0;background-repeat:no-repeat;background-image:url(../img/plus.c11bf1ed.png);transition:opacity .2s}.circle .reminder:after{background-image:url(../img/x.fbca4d75.png);opacity:0}.circle .reminder.add{opacity:0;top:30px}.circle .reminder.add:after{display:none}.circle .reminder:hover:before{opacity:0}.circle .reminder:hover:after{opacity:1}.circle li:hover .reminder.add{opacity:1;top:0}.circle li:hover .reminder.add:before{opacity:1}#townsquare.public .reminder{display:none}.modal-backdrop{position:fixed;top:0;bottom:0;left:0;right:0;background-color:rgba(0,0,0,.3);display:flex;justify-content:center;align-items:center;z-index:100}.modal{background:rgba(0,0,0,.8);padding:10px 20px;border-radius:10px;box-shadow:2px 2px 20px 1px #000;overflow-x:auto;display:flex;flex-direction:column;max-width:60%}.modal h2{margin:0;text-align:center}.modal-fade-enter,.modal-fade-leave-active{opacity:0}.modal-fade-enter-active,.modal-fade-leave-active{transition:opacity .2s ease}.reminder.baron:before,.token.baron:before{background-image:url(../img/baron.9ce9bd3b.png)}.reminder.butler:before,.token.butler:before{background-image:url(../img/butler.3763fa3d.png)}.reminder.chef:before,.token.chef:before{background-image:url(../img/chef.d4e7f9a6.png)}.reminder.drunk:before,.token.drunk:before{background-image:url(../img/drunk.4883c5a1.png)}.reminder.empath:before,.token.empath:before{background-image:url(../img/empath.d7a89ed7.png)}.token.fortuneteller{font-size:80%}.reminder.fortuneteller:before,.token.fortuneteller:before{background-image:url(../img/fortuneteller.4396927c.png)}.reminder.imp:before,.token.imp:before{background-image:url(../img/imp.cd0fa5b8.png)}.reminder.investigator:before,.token.investigator:before{background-image:url(../img/investigator.13194f19.png)}.reminder.librarian:before,.token.librarian:before{background-image:url(../img/librarian.6fd7f267.png)}.reminder.mayor:before,.token.mayor:before{background-image:url(../img/mayor.98dda8d8.png)}.reminder.monk:before,.token.monk:before{background-image:url(../img/monk.a6f2667a.png)}.reminder.poisoner:before,.token.poisoner:before{background-image:url(../img/poisoner.44c80b94.png)}.reminder.recluse:before,.token.recluse:before{background-image:url(../img/recluse.a6519a1d.png)}.token.ravenkeeper{font-size:80%}.reminder.ravenkeeper:before,.token.ravenkeeper:before{background-image:url(../img/ravenkeeper.552f1f2f.png)}.reminder.saint:before,.token.saint:before{background-image:url(../img/saint.f81db252.png)}.reminder.slayer:before,.token.slayer:before{background-image:url(../img/slayer.0859544b.png)}.reminder.soldier:before,.token.soldier:before{background-image:url(../img/soldier.451de0df.png)}.reminder.spy:before,.token.spy:before{background-image:url(../img/spy.b739966f.png)}.token.scarletwoman{font-size:75%}.reminder.scarletwoman:before,.token.scarletwoman:before{background-image:url(../img/scarletwoman.d2cdaffd.png)}.token.undertaker{font-size:85%}.reminder.undertaker:before,.token.undertaker:before{background-image:url(../img/undertaker.1df72155.png)}.reminder.virgin:before,.token.virgin:before{background-image:url(../img/virgin.eaf181e8.png)}.token.washerwoman{font-size:75%}.reminder.washerwoman:before,.token.washerwoman:before{background-image:url(../img/washerwoman.a0c66e53.png)}.circle{padding:0;width:100%;height:100%;list-style:none;overflow:hidden;position:relative;margin:0;box-sizing:border-box}.circle li{position:absolute;top:0;left:50%;height:50%;transform-origin:0 100%;text-align:center}.circle li:hover{z-index:25!important}.circle li>*{margin-left:-100px;width:200px}.circle.size-5 li:first-child{transform:rotate(0deg);z-index:5}.circle.size-5 li:first-child .ability{left:100%;right:auto}.circle.size-5 li:first-child .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-5 li:first-child>*{transform:rotate(0deg)}.circle.size-5 li:nth-child(2){transform:rotate(72deg);z-index:4}.circle.size-5 li:nth-child(2) .ability{left:100%;right:auto}.circle.size-5 li:nth-child(2) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-5 li:nth-child(2)>*{transform:rotate(-72deg)}.circle.size-5 li:nth-child(3){transform:rotate(144deg);z-index:3}.circle.size-5 li:nth-child(3) .ability{left:100%;right:auto}.circle.size-5 li:nth-child(3) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-5 li:nth-child(3)>*{transform:rotate(-144deg)}.circle.size-5 li:nth-child(4){transform:rotate(216deg);z-index:3}.circle.size-5 li:nth-child(4)>*{transform:rotate(-216deg)}.circle.size-5 li:nth-child(5){transform:rotate(288deg);z-index:4}.circle.size-5 li:nth-child(5)>*{transform:rotate(-288deg)}.circle.size-6 li:first-child{transform:rotate(0deg);z-index:6}.circle.size-6 li:first-child .ability{left:100%;right:auto}.circle.size-6 li:first-child .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-6 li:first-child>*{transform:rotate(0deg)}.circle.size-6 li:nth-child(2){transform:rotate(60deg);z-index:5}.circle.size-6 li:nth-child(2) .ability{left:100%;right:auto}.circle.size-6 li:nth-child(2) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-6 li:nth-child(2)>*{transform:rotate(-60deg)}.circle.size-6 li:nth-child(3){transform:rotate(120deg);z-index:4}.circle.size-6 li:nth-child(3) .ability{left:100%;right:auto}.circle.size-6 li:nth-child(3) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-6 li:nth-child(3)>*{transform:rotate(-120deg)}.circle.size-6 li:nth-child(4){transform:rotate(180deg);z-index:3}.circle.size-6 li:nth-child(4) .ability{left:100%;right:auto}.circle.size-6 li:nth-child(4) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-6 li:nth-child(4)>*{transform:rotate(-180deg)}.circle.size-6 li:nth-child(5){transform:rotate(240deg);z-index:4}.circle.size-6 li:nth-child(5)>*{transform:rotate(-240deg)}.circle.size-6 li:nth-child(6){transform:rotate(300deg);z-index:5}.circle.size-6 li:nth-child(6)>*{transform:rotate(-300deg)}.circle.size-7 li:first-child{transform:rotate(0deg);z-index:7}.circle.size-7 li:first-child .ability{left:100%;right:auto}.circle.size-7 li:first-child .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-7 li:first-child>*{transform:rotate(0deg)}.circle.size-7 li:nth-child(2){transform:rotate(51.4285714286deg);z-index:6}.circle.size-7 li:nth-child(2) .ability{left:100%;right:auto}.circle.size-7 li:nth-child(2) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-7 li:nth-child(2)>*{transform:rotate(-51.4285714286deg)}.circle.size-7 li:nth-child(3){transform:rotate(102.8571428571deg);z-index:5}.circle.size-7 li:nth-child(3) .ability{left:100%;right:auto}.circle.size-7 li:nth-child(3) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-7 li:nth-child(3)>*{transform:rotate(-102.8571428571deg)}.circle.size-7 li:nth-child(4){transform:rotate(154.2857142857deg);z-index:4}.circle.size-7 li:nth-child(4) .ability{left:100%;right:auto}.circle.size-7 li:nth-child(4) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-7 li:nth-child(4)>*{transform:rotate(-154.2857142857deg)}.circle.size-7 li:nth-child(5){transform:rotate(205.7142857143deg);z-index:4}.circle.size-7 li:nth-child(5)>*{transform:rotate(-205.7142857143deg)}.circle.size-7 li:nth-child(6){transform:rotate(257.1428571429deg);z-index:5}.circle.size-7 li:nth-child(6)>*{transform:rotate(-257.1428571429deg)}.circle.size-7 li:nth-child(7){transform:rotate(308.5714285714deg);z-index:6}.circle.size-7 li:nth-child(7)>*{transform:rotate(-308.5714285714deg)}.circle.size-8 li:first-child{transform:rotate(0deg);z-index:8}.circle.size-8 li:first-child .ability{left:100%;right:auto}.circle.size-8 li:first-child .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-8 li:first-child>*{transform:rotate(0deg)}.circle.size-8 li:nth-child(2){transform:rotate(45deg);z-index:7}.circle.size-8 li:nth-child(2) .ability{left:100%;right:auto}.circle.size-8 li:nth-child(2) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-8 li:nth-child(2)>*{transform:rotate(-45deg)}.circle.size-8 li:nth-child(3){transform:rotate(90deg);z-index:6}.circle.size-8 li:nth-child(3) .ability{left:100%;right:auto}.circle.size-8 li:nth-child(3) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-8 li:nth-child(3)>*{transform:rotate(-90deg)}.circle.size-8 li:nth-child(4){transform:rotate(135deg);z-index:5}.circle.size-8 li:nth-child(4) .ability{left:100%;right:auto}.circle.size-8 li:nth-child(4) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-8 li:nth-child(4)>*{transform:rotate(-135deg)}.circle.size-8 li:nth-child(5){transform:rotate(180deg);z-index:4}.circle.size-8 li:nth-child(5) .ability{left:100%;right:auto}.circle.size-8 li:nth-child(5) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-8 li:nth-child(5)>*{transform:rotate(-180deg)}.circle.size-8 li:nth-child(6){transform:rotate(225deg);z-index:5}.circle.size-8 li:nth-child(6)>*{transform:rotate(-225deg)}.circle.size-8 li:nth-child(7){transform:rotate(270deg);z-index:6}.circle.size-8 li:nth-child(7)>*{transform:rotate(-270deg)}.circle.size-8 li:nth-child(8){transform:rotate(315deg);z-index:7}.circle.size-8 li:nth-child(8)>*{transform:rotate(-315deg)}.circle.size-9 li:first-child{transform:rotate(0deg);z-index:9}.circle.size-9 li:first-child .ability{left:100%;right:auto}.circle.size-9 li:first-child .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-9 li:first-child>*{transform:rotate(0deg)}.circle.size-9 li:nth-child(2){transform:rotate(40deg);z-index:8}.circle.size-9 li:nth-child(2) .ability{left:100%;right:auto}.circle.size-9 li:nth-child(2) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-9 li:nth-child(2)>*{transform:rotate(-40deg)}.circle.size-9 li:nth-child(3){transform:rotate(80deg);z-index:7}.circle.size-9 li:nth-child(3) .ability{left:100%;right:auto}.circle.size-9 li:nth-child(3) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-9 li:nth-child(3)>*{transform:rotate(-80deg)}.circle.size-9 li:nth-child(4){transform:rotate(120deg);z-index:6}.circle.size-9 li:nth-child(4) .ability{left:100%;right:auto}.circle.size-9 li:nth-child(4) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-9 li:nth-child(4)>*{transform:rotate(-120deg)}.circle.size-9 li:nth-child(5){transform:rotate(160deg);z-index:5}.circle.size-9 li:nth-child(5) .ability{left:100%;right:auto}.circle.size-9 li:nth-child(5) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-9 li:nth-child(5)>*{transform:rotate(-160deg)}.circle.size-9 li:nth-child(6){transform:rotate(200deg);z-index:5}.circle.size-9 li:nth-child(6)>*{transform:rotate(-200deg)}.circle.size-9 li:nth-child(7){transform:rotate(240deg);z-index:6}.circle.size-9 li:nth-child(7)>*{transform:rotate(-240deg)}.circle.size-9 li:nth-child(8){transform:rotate(280deg);z-index:7}.circle.size-9 li:nth-child(8)>*{transform:rotate(-280deg)}.circle.size-9 li:nth-child(9){transform:rotate(320deg);z-index:8}.circle.size-9 li:nth-child(9)>*{transform:rotate(-320deg)}.circle.size-10 li:first-child{transform:rotate(0deg);z-index:10}.circle.size-10 li:first-child .ability{left:100%;right:auto}.circle.size-10 li:first-child .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-10 li:first-child>*{transform:rotate(0deg)}.circle.size-10 li:nth-child(2){transform:rotate(36deg);z-index:9}.circle.size-10 li:nth-child(2) .ability{left:100%;right:auto}.circle.size-10 li:nth-child(2) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-10 li:nth-child(2)>*{transform:rotate(-36deg)}.circle.size-10 li:nth-child(3){transform:rotate(72deg);z-index:8}.circle.size-10 li:nth-child(3) .ability{left:100%;right:auto}.circle.size-10 li:nth-child(3) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-10 li:nth-child(3)>*{transform:rotate(-72deg)}.circle.size-10 li:nth-child(4){transform:rotate(108deg);z-index:7}.circle.size-10 li:nth-child(4) .ability{left:100%;right:auto}.circle.size-10 li:nth-child(4) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-10 li:nth-child(4)>*{transform:rotate(-108deg)}.circle.size-10 li:nth-child(5){transform:rotate(144deg);z-index:6}.circle.size-10 li:nth-child(5) .ability{left:100%;right:auto}.circle.size-10 li:nth-child(5) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-10 li:nth-child(5)>*{transform:rotate(-144deg)}.circle.size-10 li:nth-child(6){transform:rotate(180deg);z-index:5}.circle.size-10 li:nth-child(6) .ability{left:100%;right:auto}.circle.size-10 li:nth-child(6) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-10 li:nth-child(6)>*{transform:rotate(-180deg)}.circle.size-10 li:nth-child(7){transform:rotate(216deg);z-index:6}.circle.size-10 li:nth-child(7)>*{transform:rotate(-216deg)}.circle.size-10 li:nth-child(8){transform:rotate(252deg);z-index:7}.circle.size-10 li:nth-child(8)>*{transform:rotate(-252deg)}.circle.size-10 li:nth-child(9){transform:rotate(288deg);z-index:8}.circle.size-10 li:nth-child(9)>*{transform:rotate(-288deg)}.circle.size-10 li:nth-child(10){transform:rotate(324deg);z-index:9}.circle.size-10 li:nth-child(10)>*{transform:rotate(-324deg)}.circle.size-11 li:first-child{transform:rotate(0deg);z-index:11}.circle.size-11 li:first-child .ability{left:100%;right:auto}.circle.size-11 li:first-child .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-11 li:first-child>*{transform:rotate(0deg)}.circle.size-11 li:nth-child(2){transform:rotate(32.7272727273deg);z-index:10}.circle.size-11 li:nth-child(2) .ability{left:100%;right:auto}.circle.size-11 li:nth-child(2) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-11 li:nth-child(2)>*{transform:rotate(-32.7272727273deg)}.circle.size-11 li:nth-child(3){transform:rotate(65.4545454545deg);z-index:9}.circle.size-11 li:nth-child(3) .ability{left:100%;right:auto}.circle.size-11 li:nth-child(3) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-11 li:nth-child(3)>*{transform:rotate(-65.4545454545deg)}.circle.size-11 li:nth-child(4){transform:rotate(98.1818181818deg);z-index:8}.circle.size-11 li:nth-child(4) .ability{left:100%;right:auto}.circle.size-11 li:nth-child(4) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-11 li:nth-child(4)>*{transform:rotate(-98.1818181818deg)}.circle.size-11 li:nth-child(5){transform:rotate(130.9090909091deg);z-index:7}.circle.size-11 li:nth-child(5) .ability{left:100%;right:auto}.circle.size-11 li:nth-child(5) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-11 li:nth-child(5)>*{transform:rotate(-130.9090909091deg)}.circle.size-11 li:nth-child(6){transform:rotate(163.6363636364deg);z-index:6}.circle.size-11 li:nth-child(6) .ability{left:100%;right:auto}.circle.size-11 li:nth-child(6) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-11 li:nth-child(6)>*{transform:rotate(-163.6363636364deg)}.circle.size-11 li:nth-child(7){transform:rotate(196.3636363636deg);z-index:6}.circle.size-11 li:nth-child(7)>*{transform:rotate(-196.3636363636deg)}.circle.size-11 li:nth-child(8){transform:rotate(229.0909090909deg);z-index:7}.circle.size-11 li:nth-child(8)>*{transform:rotate(-229.0909090909deg)}.circle.size-11 li:nth-child(9){transform:rotate(261.8181818182deg);z-index:8}.circle.size-11 li:nth-child(9)>*{transform:rotate(-261.8181818182deg)}.circle.size-11 li:nth-child(10){transform:rotate(294.5454545455deg);z-index:9}.circle.size-11 li:nth-child(10)>*{transform:rotate(-294.5454545455deg)}.circle.size-11 li:nth-child(11){transform:rotate(327.2727272727deg);z-index:10}.circle.size-11 li:nth-child(11)>*{transform:rotate(-327.2727272727deg)}.circle.size-12 li:first-child{transform:rotate(0deg);z-index:12}.circle.size-12 li:first-child .ability{left:100%;right:auto}.circle.size-12 li:first-child .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-12 li:first-child>*{transform:rotate(0deg)}.circle.size-12 li:nth-child(2){transform:rotate(30deg);z-index:11}.circle.size-12 li:nth-child(2) .ability{left:100%;right:auto}.circle.size-12 li:nth-child(2) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-12 li:nth-child(2)>*{transform:rotate(-30deg)}.circle.size-12 li:nth-child(3){transform:rotate(60deg);z-index:10}.circle.size-12 li:nth-child(3) .ability{left:100%;right:auto}.circle.size-12 li:nth-child(3) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-12 li:nth-child(3)>*{transform:rotate(-60deg)}.circle.size-12 li:nth-child(4){transform:rotate(90deg);z-index:9}.circle.size-12 li:nth-child(4) .ability{left:100%;right:auto}.circle.size-12 li:nth-child(4) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-12 li:nth-child(4)>*{transform:rotate(-90deg)}.circle.size-12 li:nth-child(5){transform:rotate(120deg);z-index:8}.circle.size-12 li:nth-child(5) .ability{left:100%;right:auto}.circle.size-12 li:nth-child(5) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-12 li:nth-child(5)>*{transform:rotate(-120deg)}.circle.size-12 li:nth-child(6){transform:rotate(150deg);z-index:7}.circle.size-12 li:nth-child(6) .ability{left:100%;right:auto}.circle.size-12 li:nth-child(6) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-12 li:nth-child(6)>*{transform:rotate(-150deg)}.circle.size-12 li:nth-child(7){transform:rotate(180deg);z-index:6}.circle.size-12 li:nth-child(7) .ability{left:100%;right:auto}.circle.size-12 li:nth-child(7) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-12 li:nth-child(7)>*{transform:rotate(-180deg)}.circle.size-12 li:nth-child(8){transform:rotate(210deg);z-index:7}.circle.size-12 li:nth-child(8)>*{transform:rotate(-210deg)}.circle.size-12 li:nth-child(9){transform:rotate(240deg);z-index:8}.circle.size-12 li:nth-child(9)>*{transform:rotate(-240deg)}.circle.size-12 li:nth-child(10){transform:rotate(270deg);z-index:9}.circle.size-12 li:nth-child(10)>*{transform:rotate(-270deg)}.circle.size-12 li:nth-child(11){transform:rotate(300deg);z-index:10}.circle.size-12 li:nth-child(11)>*{transform:rotate(-300deg)}.circle.size-12 li:nth-child(12){transform:rotate(330deg);z-index:11}.circle.size-12 li:nth-child(12)>*{transform:rotate(-330deg)}.circle.size-13 li:first-child{transform:rotate(0deg);z-index:13}.circle.size-13 li:first-child .ability{left:100%;right:auto}.circle.size-13 li:first-child .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-13 li:first-child>*{transform:rotate(0deg)}.circle.size-13 li:nth-child(2){transform:rotate(27.6923076923deg);z-index:12}.circle.size-13 li:nth-child(2) .ability{left:100%;right:auto}.circle.size-13 li:nth-child(2) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-13 li:nth-child(2)>*{transform:rotate(-27.6923076923deg)}.circle.size-13 li:nth-child(3){transform:rotate(55.3846153846deg);z-index:11}.circle.size-13 li:nth-child(3) .ability{left:100%;right:auto}.circle.size-13 li:nth-child(3) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-13 li:nth-child(3)>*{transform:rotate(-55.3846153846deg)}.circle.size-13 li:nth-child(4){transform:rotate(83.0769230769deg);z-index:10}.circle.size-13 li:nth-child(4) .ability{left:100%;right:auto}.circle.size-13 li:nth-child(4) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-13 li:nth-child(4)>*{transform:rotate(-83.0769230769deg)}.circle.size-13 li:nth-child(5){transform:rotate(110.7692307692deg);z-index:9}.circle.size-13 li:nth-child(5) .ability{left:100%;right:auto}.circle.size-13 li:nth-child(5) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-13 li:nth-child(5)>*{transform:rotate(-110.7692307692deg)}.circle.size-13 li:nth-child(6){transform:rotate(138.4615384615deg);z-index:8}.circle.size-13 li:nth-child(6) .ability{left:100%;right:auto}.circle.size-13 li:nth-child(6) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-13 li:nth-child(6)>*{transform:rotate(-138.4615384615deg)}.circle.size-13 li:nth-child(7){transform:rotate(166.1538461538deg);z-index:7}.circle.size-13 li:nth-child(7) .ability{left:100%;right:auto}.circle.size-13 li:nth-child(7) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-13 li:nth-child(7)>*{transform:rotate(-166.1538461538deg)}.circle.size-13 li:nth-child(8){transform:rotate(193.8461538462deg);z-index:7}.circle.size-13 li:nth-child(8)>*{transform:rotate(-193.8461538462deg)}.circle.size-13 li:nth-child(9){transform:rotate(221.5384615385deg);z-index:8}.circle.size-13 li:nth-child(9)>*{transform:rotate(-221.5384615385deg)}.circle.size-13 li:nth-child(10){transform:rotate(249.2307692308deg);z-index:9}.circle.size-13 li:nth-child(10)>*{transform:rotate(-249.2307692308deg)}.circle.size-13 li:nth-child(11){transform:rotate(276.9230769231deg);z-index:10}.circle.size-13 li:nth-child(11)>*{transform:rotate(-276.9230769231deg)}.circle.size-13 li:nth-child(12){transform:rotate(304.6153846154deg);z-index:11}.circle.size-13 li:nth-child(12)>*{transform:rotate(-304.6153846154deg)}.circle.size-13 li:nth-child(13){transform:rotate(332.3076923077deg);z-index:12}.circle.size-13 li:nth-child(13)>*{transform:rotate(-332.3076923077deg)}.circle.size-14 li:first-child{transform:rotate(0deg);z-index:14}.circle.size-14 li:first-child .ability{left:100%;right:auto}.circle.size-14 li:first-child .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-14 li:first-child>*{transform:rotate(0deg)}.circle.size-14 li:nth-child(2){transform:rotate(25.7142857143deg);z-index:13}.circle.size-14 li:nth-child(2) .ability{left:100%;right:auto}.circle.size-14 li:nth-child(2) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-14 li:nth-child(2)>*{transform:rotate(-25.7142857143deg)}.circle.size-14 li:nth-child(3){transform:rotate(51.4285714286deg);z-index:12}.circle.size-14 li:nth-child(3) .ability{left:100%;right:auto}.circle.size-14 li:nth-child(3) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-14 li:nth-child(3)>*{transform:rotate(-51.4285714286deg)}.circle.size-14 li:nth-child(4){transform:rotate(77.1428571429deg);z-index:11}.circle.size-14 li:nth-child(4) .ability{left:100%;right:auto}.circle.size-14 li:nth-child(4) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-14 li:nth-child(4)>*{transform:rotate(-77.1428571429deg)}.circle.size-14 li:nth-child(5){transform:rotate(102.8571428571deg);z-index:10}.circle.size-14 li:nth-child(5) .ability{left:100%;right:auto}.circle.size-14 li:nth-child(5) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-14 li:nth-child(5)>*{transform:rotate(-102.8571428571deg)}.circle.size-14 li:nth-child(6){transform:rotate(128.5714285714deg);z-index:9}.circle.size-14 li:nth-child(6) .ability{left:100%;right:auto}.circle.size-14 li:nth-child(6) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-14 li:nth-child(6)>*{transform:rotate(-128.5714285714deg)}.circle.size-14 li:nth-child(7){transform:rotate(154.2857142857deg);z-index:8}.circle.size-14 li:nth-child(7) .ability{left:100%;right:auto}.circle.size-14 li:nth-child(7) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-14 li:nth-child(7)>*{transform:rotate(-154.2857142857deg)}.circle.size-14 li:nth-child(8){transform:rotate(180deg);z-index:7}.circle.size-14 li:nth-child(8) .ability{left:100%;right:auto}.circle.size-14 li:nth-child(8) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-14 li:nth-child(8)>*{transform:rotate(-180deg)}.circle.size-14 li:nth-child(9){transform:rotate(205.7142857143deg);z-index:8}.circle.size-14 li:nth-child(9)>*{transform:rotate(-205.7142857143deg)}.circle.size-14 li:nth-child(10){transform:rotate(231.4285714286deg);z-index:9}.circle.size-14 li:nth-child(10)>*{transform:rotate(-231.4285714286deg)}.circle.size-14 li:nth-child(11){transform:rotate(257.1428571429deg);z-index:10}.circle.size-14 li:nth-child(11)>*{transform:rotate(-257.1428571429deg)}.circle.size-14 li:nth-child(12){transform:rotate(282.8571428571deg);z-index:11}.circle.size-14 li:nth-child(12)>*{transform:rotate(-282.8571428571deg)}.circle.size-14 li:nth-child(13){transform:rotate(308.5714285714deg);z-index:12}.circle.size-14 li:nth-child(13)>*{transform:rotate(-308.5714285714deg)}.circle.size-14 li:nth-child(14){transform:rotate(334.2857142857deg);z-index:13}.circle.size-14 li:nth-child(14)>*{transform:rotate(-334.2857142857deg)}.circle.size-15 li:first-child{transform:rotate(0deg);z-index:15}.circle.size-15 li:first-child .ability{left:100%;right:auto}.circle.size-15 li:first-child .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-15 li:first-child>*{transform:rotate(0deg)}.circle.size-15 li:nth-child(2){transform:rotate(24deg);z-index:14}.circle.size-15 li:nth-child(2) .ability{left:100%;right:auto}.circle.size-15 li:nth-child(2) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-15 li:nth-child(2)>*{transform:rotate(-24deg)}.circle.size-15 li:nth-child(3){transform:rotate(48deg);z-index:13}.circle.size-15 li:nth-child(3) .ability{left:100%;right:auto}.circle.size-15 li:nth-child(3) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-15 li:nth-child(3)>*{transform:rotate(-48deg)}.circle.size-15 li:nth-child(4){transform:rotate(72deg);z-index:12}.circle.size-15 li:nth-child(4) .ability{left:100%;right:auto}.circle.size-15 li:nth-child(4) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-15 li:nth-child(4)>*{transform:rotate(-72deg)}.circle.size-15 li:nth-child(5){transform:rotate(96deg);z-index:11}.circle.size-15 li:nth-child(5) .ability{left:100%;right:auto}.circle.size-15 li:nth-child(5) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-15 li:nth-child(5)>*{transform:rotate(-96deg)}.circle.size-15 li:nth-child(6){transform:rotate(120deg);z-index:10}.circle.size-15 li:nth-child(6) .ability{left:100%;right:auto}.circle.size-15 li:nth-child(6) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-15 li:nth-child(6)>*{transform:rotate(-120deg)}.circle.size-15 li:nth-child(7){transform:rotate(144deg);z-index:9}.circle.size-15 li:nth-child(7) .ability{left:100%;right:auto}.circle.size-15 li:nth-child(7) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-15 li:nth-child(7)>*{transform:rotate(-144deg)}.circle.size-15 li:nth-child(8){transform:rotate(168deg);z-index:8}.circle.size-15 li:nth-child(8) .ability{left:100%;right:auto}.circle.size-15 li:nth-child(8) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-15 li:nth-child(8)>*{transform:rotate(-168deg)}.circle.size-15 li:nth-child(9){transform:rotate(192deg);z-index:8}.circle.size-15 li:nth-child(9)>*{transform:rotate(-192deg)}.circle.size-15 li:nth-child(10){transform:rotate(216deg);z-index:9}.circle.size-15 li:nth-child(10)>*{transform:rotate(-216deg)}.circle.size-15 li:nth-child(11){transform:rotate(240deg);z-index:10}.circle.size-15 li:nth-child(11)>*{transform:rotate(-240deg)}.circle.size-15 li:nth-child(12){transform:rotate(264deg);z-index:11}.circle.size-15 li:nth-child(12)>*{transform:rotate(-264deg)}.circle.size-15 li:nth-child(13){transform:rotate(288deg);z-index:12}.circle.size-15 li:nth-child(13)>*{transform:rotate(-288deg)}.circle.size-15 li:nth-child(14){transform:rotate(312deg);z-index:13}.circle.size-15 li:nth-child(14)>*{transform:rotate(-312deg)}.circle.size-15 li:nth-child(15){transform:rotate(336deg);z-index:14}.circle.size-15 li:nth-child(15)>*{transform:rotate(-336deg)}.circle.size-16 li:first-child{transform:rotate(0deg);z-index:16}.circle.size-16 li:first-child .ability{left:100%;right:auto}.circle.size-16 li:first-child .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-16 li:first-child>*{transform:rotate(0deg)}.circle.size-16 li:nth-child(2){transform:rotate(22.5deg);z-index:15}.circle.size-16 li:nth-child(2) .ability{left:100%;right:auto}.circle.size-16 li:nth-child(2) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-16 li:nth-child(2)>*{transform:rotate(-22.5deg)}.circle.size-16 li:nth-child(3){transform:rotate(45deg);z-index:14}.circle.size-16 li:nth-child(3) .ability{left:100%;right:auto}.circle.size-16 li:nth-child(3) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-16 li:nth-child(3)>*{transform:rotate(-45deg)}.circle.size-16 li:nth-child(4){transform:rotate(67.5deg);z-index:13}.circle.size-16 li:nth-child(4) .ability{left:100%;right:auto}.circle.size-16 li:nth-child(4) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-16 li:nth-child(4)>*{transform:rotate(-67.5deg)}.circle.size-16 li:nth-child(5){transform:rotate(90deg);z-index:12}.circle.size-16 li:nth-child(5) .ability{left:100%;right:auto}.circle.size-16 li:nth-child(5) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-16 li:nth-child(5)>*{transform:rotate(-90deg)}.circle.size-16 li:nth-child(6){transform:rotate(112.5deg);z-index:11}.circle.size-16 li:nth-child(6) .ability{left:100%;right:auto}.circle.size-16 li:nth-child(6) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-16 li:nth-child(6)>*{transform:rotate(-112.5deg)}.circle.size-16 li:nth-child(7){transform:rotate(135deg);z-index:10}.circle.size-16 li:nth-child(7) .ability{left:100%;right:auto}.circle.size-16 li:nth-child(7) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-16 li:nth-child(7)>*{transform:rotate(-135deg)}.circle.size-16 li:nth-child(8){transform:rotate(157.5deg);z-index:9}.circle.size-16 li:nth-child(8) .ability{left:100%;right:auto}.circle.size-16 li:nth-child(8) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-16 li:nth-child(8)>*{transform:rotate(-157.5deg)}.circle.size-16 li:nth-child(9){transform:rotate(180deg);z-index:8}.circle.size-16 li:nth-child(9) .ability{left:100%;right:auto}.circle.size-16 li:nth-child(9) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-16 li:nth-child(9)>*{transform:rotate(-180deg)}.circle.size-16 li:nth-child(10){transform:rotate(202.5deg);z-index:9}.circle.size-16 li:nth-child(10)>*{transform:rotate(-202.5deg)}.circle.size-16 li:nth-child(11){transform:rotate(225deg);z-index:10}.circle.size-16 li:nth-child(11)>*{transform:rotate(-225deg)}.circle.size-16 li:nth-child(12){transform:rotate(247.5deg);z-index:11}.circle.size-16 li:nth-child(12)>*{transform:rotate(-247.5deg)}.circle.size-16 li:nth-child(13){transform:rotate(270deg);z-index:12}.circle.size-16 li:nth-child(13)>*{transform:rotate(-270deg)}.circle.size-16 li:nth-child(14){transform:rotate(292.5deg);z-index:13}.circle.size-16 li:nth-child(14)>*{transform:rotate(-292.5deg)}.circle.size-16 li:nth-child(15){transform:rotate(315deg);z-index:14}.circle.size-16 li:nth-child(15)>*{transform:rotate(-315deg)}.circle.size-16 li:nth-child(16){transform:rotate(337.5deg);z-index:15}.circle.size-16 li:nth-child(16)>*{transform:rotate(-337.5deg)}.circle.size-17 li:first-child{transform:rotate(0deg);z-index:17}.circle.size-17 li:first-child .ability{left:100%;right:auto}.circle.size-17 li:first-child .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-17 li:first-child>*{transform:rotate(0deg)}.circle.size-17 li:nth-child(2){transform:rotate(21.1764705882deg);z-index:16}.circle.size-17 li:nth-child(2) .ability{left:100%;right:auto}.circle.size-17 li:nth-child(2) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-17 li:nth-child(2)>*{transform:rotate(-21.1764705882deg)}.circle.size-17 li:nth-child(3){transform:rotate(42.3529411765deg);z-index:15}.circle.size-17 li:nth-child(3) .ability{left:100%;right:auto}.circle.size-17 li:nth-child(3) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-17 li:nth-child(3)>*{transform:rotate(-42.3529411765deg)}.circle.size-17 li:nth-child(4){transform:rotate(63.5294117647deg);z-index:14}.circle.size-17 li:nth-child(4) .ability{left:100%;right:auto}.circle.size-17 li:nth-child(4) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-17 li:nth-child(4)>*{transform:rotate(-63.5294117647deg)}.circle.size-17 li:nth-child(5){transform:rotate(84.7058823529deg);z-index:13}.circle.size-17 li:nth-child(5) .ability{left:100%;right:auto}.circle.size-17 li:nth-child(5) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-17 li:nth-child(5)>*{transform:rotate(-84.7058823529deg)}.circle.size-17 li:nth-child(6){transform:rotate(105.8823529412deg);z-index:12}.circle.size-17 li:nth-child(6) .ability{left:100%;right:auto}.circle.size-17 li:nth-child(6) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-17 li:nth-child(6)>*{transform:rotate(-105.8823529412deg)}.circle.size-17 li:nth-child(7){transform:rotate(127.0588235294deg);z-index:11}.circle.size-17 li:nth-child(7) .ability{left:100%;right:auto}.circle.size-17 li:nth-child(7) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-17 li:nth-child(7)>*{transform:rotate(-127.0588235294deg)}.circle.size-17 li:nth-child(8){transform:rotate(148.2352941176deg);z-index:10}.circle.size-17 li:nth-child(8) .ability{left:100%;right:auto}.circle.size-17 li:nth-child(8) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-17 li:nth-child(8)>*{transform:rotate(-148.2352941176deg)}.circle.size-17 li:nth-child(9){transform:rotate(169.4117647059deg);z-index:9}.circle.size-17 li:nth-child(9) .ability{left:100%;right:auto}.circle.size-17 li:nth-child(9) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-17 li:nth-child(9)>*{transform:rotate(-169.4117647059deg)}.circle.size-17 li:nth-child(10){transform:rotate(190.5882352941deg);z-index:9}.circle.size-17 li:nth-child(10)>*{transform:rotate(-190.5882352941deg)}.circle.size-17 li:nth-child(11){transform:rotate(211.7647058824deg);z-index:10}.circle.size-17 li:nth-child(11)>*{transform:rotate(-211.7647058824deg)}.circle.size-17 li:nth-child(12){transform:rotate(232.9411764706deg);z-index:11}.circle.size-17 li:nth-child(12)>*{transform:rotate(-232.9411764706deg)}.circle.size-17 li:nth-child(13){transform:rotate(254.1176470588deg);z-index:12}.circle.size-17 li:nth-child(13)>*{transform:rotate(-254.1176470588deg)}.circle.size-17 li:nth-child(14){transform:rotate(275.2941176471deg);z-index:13}.circle.size-17 li:nth-child(14)>*{transform:rotate(-275.2941176471deg)}.circle.size-17 li:nth-child(15){transform:rotate(296.4705882353deg);z-index:14}.circle.size-17 li:nth-child(15)>*{transform:rotate(-296.4705882353deg)}.circle.size-17 li:nth-child(16){transform:rotate(317.6470588235deg);z-index:15}.circle.size-17 li:nth-child(16)>*{transform:rotate(-317.6470588235deg)}.circle.size-17 li:nth-child(17){transform:rotate(338.8235294118deg);z-index:16}.circle.size-17 li:nth-child(17)>*{transform:rotate(-338.8235294118deg)}.circle.size-18 li:first-child{transform:rotate(0deg);z-index:18}.circle.size-18 li:first-child .ability{left:100%;right:auto}.circle.size-18 li:first-child .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-18 li:first-child>*{transform:rotate(0deg)}.circle.size-18 li:nth-child(2){transform:rotate(20deg);z-index:17}.circle.size-18 li:nth-child(2) .ability{left:100%;right:auto}.circle.size-18 li:nth-child(2) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-18 li:nth-child(2)>*{transform:rotate(-20deg)}.circle.size-18 li:nth-child(3){transform:rotate(40deg);z-index:16}.circle.size-18 li:nth-child(3) .ability{left:100%;right:auto}.circle.size-18 li:nth-child(3) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-18 li:nth-child(3)>*{transform:rotate(-40deg)}.circle.size-18 li:nth-child(4){transform:rotate(60deg);z-index:15}.circle.size-18 li:nth-child(4) .ability{left:100%;right:auto}.circle.size-18 li:nth-child(4) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-18 li:nth-child(4)>*{transform:rotate(-60deg)}.circle.size-18 li:nth-child(5){transform:rotate(80deg);z-index:14}.circle.size-18 li:nth-child(5) .ability{left:100%;right:auto}.circle.size-18 li:nth-child(5) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-18 li:nth-child(5)>*{transform:rotate(-80deg)}.circle.size-18 li:nth-child(6){transform:rotate(100deg);z-index:13}.circle.size-18 li:nth-child(6) .ability{left:100%;right:auto}.circle.size-18 li:nth-child(6) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-18 li:nth-child(6)>*{transform:rotate(-100deg)}.circle.size-18 li:nth-child(7){transform:rotate(120deg);z-index:12}.circle.size-18 li:nth-child(7) .ability{left:100%;right:auto}.circle.size-18 li:nth-child(7) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-18 li:nth-child(7)>*{transform:rotate(-120deg)}.circle.size-18 li:nth-child(8){transform:rotate(140deg);z-index:11}.circle.size-18 li:nth-child(8) .ability{left:100%;right:auto}.circle.size-18 li:nth-child(8) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-18 li:nth-child(8)>*{transform:rotate(-140deg)}.circle.size-18 li:nth-child(9){transform:rotate(160deg);z-index:10}.circle.size-18 li:nth-child(9) .ability{left:100%;right:auto}.circle.size-18 li:nth-child(9) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-18 li:nth-child(9)>*{transform:rotate(-160deg)}.circle.size-18 li:nth-child(10){transform:rotate(180deg);z-index:9}.circle.size-18 li:nth-child(10) .ability{left:100%;right:auto}.circle.size-18 li:nth-child(10) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-18 li:nth-child(10)>*{transform:rotate(-180deg)}.circle.size-18 li:nth-child(11){transform:rotate(200deg);z-index:10}.circle.size-18 li:nth-child(11)>*{transform:rotate(-200deg)}.circle.size-18 li:nth-child(12){transform:rotate(220deg);z-index:11}.circle.size-18 li:nth-child(12)>*{transform:rotate(-220deg)}.circle.size-18 li:nth-child(13){transform:rotate(240deg);z-index:12}.circle.size-18 li:nth-child(13)>*{transform:rotate(-240deg)}.circle.size-18 li:nth-child(14){transform:rotate(260deg);z-index:13}.circle.size-18 li:nth-child(14)>*{transform:rotate(-260deg)}.circle.size-18 li:nth-child(15){transform:rotate(280deg);z-index:14}.circle.size-18 li:nth-child(15)>*{transform:rotate(-280deg)}.circle.size-18 li:nth-child(16){transform:rotate(300deg);z-index:15}.circle.size-18 li:nth-child(16)>*{transform:rotate(-300deg)}.circle.size-18 li:nth-child(17){transform:rotate(320deg);z-index:16}.circle.size-18 li:nth-child(17)>*{transform:rotate(-320deg)}.circle.size-18 li:nth-child(18){transform:rotate(340deg);z-index:17}.circle.size-18 li:nth-child(18)>*{transform:rotate(-340deg)}.circle.size-19 li:first-child{transform:rotate(0deg);z-index:19}.circle.size-19 li:first-child .ability{left:100%;right:auto}.circle.size-19 li:first-child .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-19 li:first-child>*{transform:rotate(0deg)}.circle.size-19 li:nth-child(2){transform:rotate(18.9473684211deg);z-index:18}.circle.size-19 li:nth-child(2) .ability{left:100%;right:auto}.circle.size-19 li:nth-child(2) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-19 li:nth-child(2)>*{transform:rotate(-18.9473684211deg)}.circle.size-19 li:nth-child(3){transform:rotate(37.8947368421deg);z-index:17}.circle.size-19 li:nth-child(3) .ability{left:100%;right:auto}.circle.size-19 li:nth-child(3) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-19 li:nth-child(3)>*{transform:rotate(-37.8947368421deg)}.circle.size-19 li:nth-child(4){transform:rotate(56.8421052632deg);z-index:16}.circle.size-19 li:nth-child(4) .ability{left:100%;right:auto}.circle.size-19 li:nth-child(4) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-19 li:nth-child(4)>*{transform:rotate(-56.8421052632deg)}.circle.size-19 li:nth-child(5){transform:rotate(75.7894736842deg);z-index:15}.circle.size-19 li:nth-child(5) .ability{left:100%;right:auto}.circle.size-19 li:nth-child(5) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-19 li:nth-child(5)>*{transform:rotate(-75.7894736842deg)}.circle.size-19 li:nth-child(6){transform:rotate(94.7368421053deg);z-index:14}.circle.size-19 li:nth-child(6) .ability{left:100%;right:auto}.circle.size-19 li:nth-child(6) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-19 li:nth-child(6)>*{transform:rotate(-94.7368421053deg)}.circle.size-19 li:nth-child(7){transform:rotate(113.6842105263deg);z-index:13}.circle.size-19 li:nth-child(7) .ability{left:100%;right:auto}.circle.size-19 li:nth-child(7) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-19 li:nth-child(7)>*{transform:rotate(-113.6842105263deg)}.circle.size-19 li:nth-child(8){transform:rotate(132.6315789474deg);z-index:12}.circle.size-19 li:nth-child(8) .ability{left:100%;right:auto}.circle.size-19 li:nth-child(8) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-19 li:nth-child(8)>*{transform:rotate(-132.6315789474deg)}.circle.size-19 li:nth-child(9){transform:rotate(151.5789473684deg);z-index:11}.circle.size-19 li:nth-child(9) .ability{left:100%;right:auto}.circle.size-19 li:nth-child(9) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-19 li:nth-child(9)>*{transform:rotate(-151.5789473684deg)}.circle.size-19 li:nth-child(10){transform:rotate(170.5263157895deg);z-index:10}.circle.size-19 li:nth-child(10) .ability{left:100%;right:auto}.circle.size-19 li:nth-child(10) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-19 li:nth-child(10)>*{transform:rotate(-170.5263157895deg)}.circle.size-19 li:nth-child(11){transform:rotate(189.4736842105deg);z-index:10}.circle.size-19 li:nth-child(11)>*{transform:rotate(-189.4736842105deg)}.circle.size-19 li:nth-child(12){transform:rotate(208.4210526316deg);z-index:11}.circle.size-19 li:nth-child(12)>*{transform:rotate(-208.4210526316deg)}.circle.size-19 li:nth-child(13){transform:rotate(227.3684210526deg);z-index:12}.circle.size-19 li:nth-child(13)>*{transform:rotate(-227.3684210526deg)}.circle.size-19 li:nth-child(14){transform:rotate(246.3157894737deg);z-index:13}.circle.size-19 li:nth-child(14)>*{transform:rotate(-246.3157894737deg)}.circle.size-19 li:nth-child(15){transform:rotate(265.2631578947deg);z-index:14}.circle.size-19 li:nth-child(15)>*{transform:rotate(-265.2631578947deg)}.circle.size-19 li:nth-child(16){transform:rotate(284.2105263158deg);z-index:15}.circle.size-19 li:nth-child(16)>*{transform:rotate(-284.2105263158deg)}.circle.size-19 li:nth-child(17){transform:rotate(303.1578947368deg);z-index:16}.circle.size-19 li:nth-child(17)>*{transform:rotate(-303.1578947368deg)}.circle.size-19 li:nth-child(18){transform:rotate(322.1052631579deg);z-index:17}.circle.size-19 li:nth-child(18)>*{transform:rotate(-322.1052631579deg)}.circle.size-19 li:nth-child(19){transform:rotate(341.0526315789deg);z-index:18}.circle.size-19 li:nth-child(19)>*{transform:rotate(-341.0526315789deg)}.circle.size-20 li:first-child{transform:rotate(0deg);z-index:20}.circle.size-20 li:first-child .ability{left:100%;right:auto}.circle.size-20 li:first-child .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-20 li:first-child>*{transform:rotate(0deg)}.circle.size-20 li:nth-child(2){transform:rotate(18deg);z-index:19}.circle.size-20 li:nth-child(2) .ability{left:100%;right:auto}.circle.size-20 li:nth-child(2) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-20 li:nth-child(2)>*{transform:rotate(-18deg)}.circle.size-20 li:nth-child(3){transform:rotate(36deg);z-index:18}.circle.size-20 li:nth-child(3) .ability{left:100%;right:auto}.circle.size-20 li:nth-child(3) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-20 li:nth-child(3)>*{transform:rotate(-36deg)}.circle.size-20 li:nth-child(4){transform:rotate(54deg);z-index:17}.circle.size-20 li:nth-child(4) .ability{left:100%;right:auto}.circle.size-20 li:nth-child(4) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-20 li:nth-child(4)>*{transform:rotate(-54deg)}.circle.size-20 li:nth-child(5){transform:rotate(72deg);z-index:16}.circle.size-20 li:nth-child(5) .ability{left:100%;right:auto}.circle.size-20 li:nth-child(5) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-20 li:nth-child(5)>*{transform:rotate(-72deg)}.circle.size-20 li:nth-child(6){transform:rotate(90deg);z-index:15}.circle.size-20 li:nth-child(6) .ability{left:100%;right:auto}.circle.size-20 li:nth-child(6) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-20 li:nth-child(6)>*{transform:rotate(-90deg)}.circle.size-20 li:nth-child(7){transform:rotate(108deg);z-index:14}.circle.size-20 li:nth-child(7) .ability{left:100%;right:auto}.circle.size-20 li:nth-child(7) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-20 li:nth-child(7)>*{transform:rotate(-108deg)}.circle.size-20 li:nth-child(8){transform:rotate(126deg);z-index:13}.circle.size-20 li:nth-child(8) .ability{left:100%;right:auto}.circle.size-20 li:nth-child(8) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-20 li:nth-child(8)>*{transform:rotate(-126deg)}.circle.size-20 li:nth-child(9){transform:rotate(144deg);z-index:12}.circle.size-20 li:nth-child(9) .ability{left:100%;right:auto}.circle.size-20 li:nth-child(9) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-20 li:nth-child(9)>*{transform:rotate(-144deg)}.circle.size-20 li:nth-child(10){transform:rotate(162deg);z-index:11}.circle.size-20 li:nth-child(10) .ability{left:100%;right:auto}.circle.size-20 li:nth-child(10) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-20 li:nth-child(10)>*{transform:rotate(-162deg)}.circle.size-20 li:nth-child(11){transform:rotate(180deg);z-index:10}.circle.size-20 li:nth-child(11) .ability{left:100%;right:auto}.circle.size-20 li:nth-child(11) .ability:after{border-left-color:transparent;border-right-color:#000;left:auto;right:100%}.circle.size-20 li:nth-child(11)>*{transform:rotate(-180deg)}.circle.size-20 li:nth-child(12){transform:rotate(198deg);z-index:11}.circle.size-20 li:nth-child(12)>*{transform:rotate(-198deg)}.circle.size-20 li:nth-child(13){transform:rotate(216deg);z-index:12}.circle.size-20 li:nth-child(13)>*{transform:rotate(-216deg)}.circle.size-20 li:nth-child(14){transform:rotate(234deg);z-index:13}.circle.size-20 li:nth-child(14)>*{transform:rotate(-234deg)}.circle.size-20 li:nth-child(15){transform:rotate(252deg);z-index:14}.circle.size-20 li:nth-child(15)>*{transform:rotate(-252deg)}.circle.size-20 li:nth-child(16){transform:rotate(270deg);z-index:15}.circle.size-20 li:nth-child(16)>*{transform:rotate(-270deg)}.circle.size-20 li:nth-child(17){transform:rotate(288deg);z-index:16}.circle.size-20 li:nth-child(17)>*{transform:rotate(-288deg)}.circle.size-20 li:nth-child(18){transform:rotate(306deg);z-index:17}.circle.size-20 li:nth-child(18)>*{transform:rotate(-306deg)}.circle.size-20 li:nth-child(19){transform:rotate(324deg);z-index:18}.circle.size-20 li:nth-child(19)>*{transform:rotate(-324deg)}.circle.size-20 li:nth-child(20){transform:rotate(342deg);z-index:19}.circle.size-20 li:nth-child(20)>*{transform:rotate(-342deg)}#townsquare{width:100%;height:100%;position:relative;border-radius:50%;box-sizing:border-box;padding:20px}.circle{background:url(../img/demon-head2.10760209.png) 50% no-repeat;background-size:10%}#townsquare.public .circle{background-image:url(../img/demon-head.68161573.png)}ul.reminders,ul.tokens{list-style-type:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-content:center;align-items:center;overflow:hidden;justify-content:center;font-size:75%;line-height:100%}ul.reminders .token,ul.tokens .token{border-radius:50%;height:120px;width:120px;background:url(../img/token.d0b9dbdf.png) 50%;background-size:100%;text-align:center;position:relative;color:#000;margin:5px;font-weight:600;text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff,0 0 5px rgba(0,0,0,.75);padding-top:85px;box-sizing:border-box;font-family:Papyrus,serif;border:3px solid #000;box-shadow:0 0 10px rgba(0,0,0,.5);cursor:pointer;transition:transform .5s ease}ul.reminders .token.townsfolk,ul.tokens .token.townsfolk{box-shadow:0 0 10px #004cff,0 0 10px #004cff}ul.reminders .token.outsider,ul.tokens .token.outsider{box-shadow:0 0 10px #00d6ff,0 0 10px #00d6ff}ul.reminders .token.minion,ul.tokens .token.minion{box-shadow:0 0 10px #ff6900,0 0 10px #ff6900}ul.reminders .token.demon,ul.tokens .token.demon{box-shadow:0 0 10px red,0 0 10px red}ul.reminders .token:before,ul.tokens .token:before{content:" ";background-size:100%;position:absolute;width:100%;height:100%;left:0;top:0}ul.reminders .token:hover,ul.tokens .token:hover{transform:scale(1.2)}ul.reminders .reminder{background:url(../img/reminder.5097ab11.png) 50%;background-size:100%;width:100px;height:100px;color:#000;font-size:65%;font-weight:700;display:block;margin:5px;text-align:center;position:relative;border-radius:50%;border:3px solid #000;box-shadow:0 0 10px rgba(0,0,0,.5);cursor:pointer;box-sizing:border-box;padding-top:65px;transition:transform .5s ease}ul.reminders .reminder:before{content:" ";position:absolute;left:0;top:0;width:100%;height:100%;background-size:100%;background-position:center 0;background-repeat:no-repeat}ul.reminders .reminder:hover{transform:scale(1.2)}@font-face{font-family:Papyrus;src:url(../fonts/papyrus.6d21d922.eot);src:url(../fonts/papyrus.6d21d922.eot?#iefix) format("embedded-opentype"),url(../fonts/papyrus.7cb5242a.woff2) format("woff2"),url(../fonts/papyrus.fa5c81d6.woff) format("woff"),url(../fonts/papyrus.a0e1b188.ttf) format("truetype"),url(../img/papyrus.f672c802.svg#PapyrusW01) format("svg")}body,html{font-size:1.2em;line-height:1.4;background:url(../img/background.70b59cf9.jpg) 50%;background-size:cover;color:#fff;font-family:Roboto Condensed,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:0;margin:0}#app,body,html{height:100%}.controls{position:absolute;right:0;top:0} |