diff --git a/css/app.1d3d28d8.css b/css/app.1d3d28d8.css
new file mode 100644
index 0000000..503454f
--- /dev/null
+++ b/css/app.1d3d28d8.css
@@ -0,0 +1 @@
+.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}
\ No newline at end of file
diff --git a/index.html b/index.html
index fe477f5..b359fa5 100644
--- a/index.html
+++ b/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><title>Vue App</title><link href=/townsquare/css/app.09e9c525.css rel=preload as=style><link href=/townsquare/js/app.48f9cea6.js rel=preload as=script><link href=/townsquare/js/chunk-vendors.100859c5.js rel=preload as=script><link href=/townsquare/css/app.09e9c525.css rel=stylesheet></head><body><div id=app></div><script src=/townsquare/js/chunk-vendors.100859c5.js></script><script src=/townsquare/js/app.48f9cea6.js></script></body></html>
\ No newline at end of file
+<!DOCTYPE html><html><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><title>Vue App</title><link href=/townsquare/css/app.1d3d28d8.css rel=preload as=style><link href=/townsquare/js/app.86616708.js rel=preload as=script><link href=/townsquare/js/chunk-vendors.100859c5.js rel=preload as=script><link href=/townsquare/css/app.1d3d28d8.css rel=stylesheet></head><body><div id=app></div><script src=/townsquare/js/chunk-vendors.100859c5.js></script><script src=/townsquare/js/app.86616708.js></script></body></html>
\ No newline at end of file
diff --git a/js/app.86616708.js b/js/app.86616708.js
new file mode 100644
index 0000000..e253bed
--- /dev/null
+++ b/js/app.86616708.js
@@ -0,0 +1,2 @@
+(function(e){function t(t){for(var a,l,n=t[0],o=t[1],u=t[2],h=0,c=[];h<n.length;h++)l=n[h],Object.prototype.hasOwnProperty.call(i,l)&&i[l]&&c.push(i[l][0]),i[l]=0;for(a in o)Object.prototype.hasOwnProperty.call(o,a)&&(e[a]=o[a]);d&&d(t);while(c.length)c.shift()();return s.push.apply(s,u||[]),r()}function r(){for(var e,t=0;t<s.length;t++){for(var r=s[t],a=!0,n=1;n<r.length;n++){var o=r[n];0!==i[o]&&(a=!1)}a&&(s.splice(t--,1),e=l(l.s=r[0]))}return e}var a={},i={app:0},s=[];function l(t){if(a[t])return a[t].exports;var r=a[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,l),r.l=!0,r.exports}l.m=e,l.c=a,l.d=function(e,t,r){l.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},l.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,t){if(1&t&&(e=l(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(l.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)l.d(r,a,function(t){return e[t]}.bind(null,a));return r},l.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return l.d(t,"a",t),t},l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.p="/townsquare/";var n=window["webpackJsonp"]=window["webpackJsonp"]||[],o=n.push.bind(n);n.push=t,n=n.slice();for(var u=0;u<n.length;u++)t(n[u]);var d=o;s.push(["56d7","chunk-vendors"]),r()})({"0025":function(e,t,r){},"30db":function(e,t,r){"use strict";var a=r("0025"),i=r.n(a);i.a},3636:function(e,t,r){"use strict";var a=r("d4b2"),i=r.n(a);i.a},"56d7":function(e,t,r){"use strict";r.r(t);var a=r("2b0e"),i=function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("div",{attrs:{id:"app"}},[r("TownSquare",{attrs:{"is-public":e.isPublic}}),r("div",{staticClass:"controls"},[r("button",{on:{click:e.togglePublic}},[e._v("Toggle")])])],1)},s=[],l=function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("div",{staticClass:"square",class:{public:e.isPublic},attrs:{id:"townsquare"}},[r("ul",{staticClass:"circle",class:["size-"+e.players.length]},e._l(e.players,(function(t){return r("Player",{key:t.name,attrs:{player:t,roles:e.roles,"is-public":e.isPublic},on:{"add-reminder":e.openReminderModal,"set-role":e.openRoleModal}})})),1),r("Modal",{directives:[{name:"show",rawName:"v-show",value:e.availableReminders.length,expression:"availableReminders.length"}],on:{close:e.closeModal}},[r("h2",[e._v("Choose a reminder token:")]),r("ul",{staticClass:"reminders"},e._l(e.availableReminders,(function(t){return r("li",{staticClass:"reminder",class:[t.role],on:{click:function(r){return e.addReminder(t)}}},[e._v(" "+e._s(t.name)+" ")])})),0)]),r("Modal",{directives:[{name:"show",rawName:"v-show",value:e.availableRoles.length,expression:"availableRoles.length"}],on:{close:e.closeModal}},[r("h2",[e._v("Choose a new role:")]),r("ul",{staticClass:"tokens"},e._l(e.availableRoles,(function(t){return r("li",{staticClass:"token",class:[t.id,t.team],on:{click:function(r){return e.setRole(t)}}},[e._v(" "+e._s(t.name)+" ")])})),0)])],1)},n=[],o=r("b1d9"),u=function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("li",[r("div",{staticClass:"player",class:{dead:e.player.hasDied,"no-vote":e.player.hasVoted}},[r("div",{staticClass:"shroud",on:{click:function(t){return e.toggleStatus()}}}),r("div",{staticClass:"token",class:[e.player.role.id],on:{click:function(t){return e.changeRole()}}},[e.player.role.firstNight?r("span",{staticClass:"leaf-left"}):e._e(),e.player.role.otherNight?r("span",{staticClass:"leaf-right"}):e._e(),e.player.role.reminders.length?r("span",{class:["leaf-top"+e.player.role.reminders.length]}):e._e(),e.player.role.setup?r("span",{staticClass:"leaf-orange"}):e._e(),r("div",[e._v(e._s(e.player.role.name))])]),e.player.role.ability?r("div",{staticClass:"ability"},[e._v(e._s(e.player.role.ability))]):e._e(),r("div",{staticClass:"name"},[e._v(e._s(e.player.name))])]),e._l(e.player.reminders,(function(t){return e.player.reminders?r("div",{staticClass:"reminder",class:[t.role],on:{click:function(r){return e.removeReminder(t)}}},[e._v(e._s(t.name))]):e._e()})),r("div",{staticClass:"reminder add",on:{click:function(t){return e.$emit("add-reminder",e.player)}}})],2)},d=[],h={props:{player:{type:Object,required:!0},roles:{type:Map,required:!0},isPublic:{type:Boolean,required:!0}},data(){return{}},methods:{toggleStatus(){this.isPublic&&this.player.hasDied?this.$set(this.player,"hasVoted",!this.player.hasVoted):(this.$set(this.player,"hasDied",!this.player.hasDied),this.player.hasDied||this.$set(this.player,"hasVoted",!1))},changeRole(){this.isPublic?this.toggleStatus():this.$emit("set-role",this.player)},removeReminder(e){this.player.reminders.splice(this.player.reminders.indexOf(e),1)}}},c=h,m=(r("74c9"),r("2877")),f=Object(m["a"])(c,u,d,!1,null,null,null),p=f.exports,y=function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("transition",{attrs:{name:"modal-fade"}},[r("div",{staticClass:"modal-backdrop",on:{click:e.close}},[r("div",{staticClass:"modal",attrs:{role:"dialog","aria-labelledby":"modalTitle","aria-describedby":"modalDescription"},on:{click:function(e){e.stopPropagation()}}},[e._t("default")],2)])])},g=[],b={methods:{close(){this.$emit("close")}}},v=b,w=(r("30db"),Object(m["a"])(v,y,g,!1,null,null,null)),k=w.exports;const N=new Map(o.sort((e,t)=>t.team.localeCompare(e.team)).map(e=>[e.id,e]));var T={components:{Modal:k,Player:p},props:["isPublic"],data(){return{players:[{name:"Steffen",role:N.get("baron"),reminders:[{role:"imp",name:"Die"}]},{name:"Tino",role:N.get("imp")},{name:"Basti",role:N.get("chef"),reminders:[]},{name:"Bernd",role:N.get("ravenkeeper"),reminders:[]},{name:"Tim",role:N.get("drunk"),reminders:[]},{name:"Yann",role:N.get("librarian"),reminders:[]},{name:"Marie",role:N.get("empath"),reminders:[]},{name:"Bogdan",role:N.get("scarletwoman"),reminders:[]},{name:"Sean",role:N.get("recluse"),reminders:[]},{name:"Petra",role:N.get("undertaker"),reminders:[]}],roles:N,selectedPlayer:!1,availableReminders:[],availableRoles:[]}},methods:{openReminderModal(e){this.selectedPlayer=e,this.availableReminders=[],this.roles.forEach(e=>{this.players.some(t=>t.role.id===e.id)&&(this.availableReminders=[...this.availableReminders,...e.reminders.map(t=>({role:e.id,name:t}))])})},openRoleModal(e){this.selectedPlayer=e,this.availableRoles=[],this.roles.forEach(t=>{t.id!==e.role&&this.availableRoles.push(t)})},addReminder(e){this.selectedPlayer.reminders.push(e),this.closeModal()},setRole(e){this.selectedPlayer.role=e,this.closeModal()},closeModal(){this.selectedPlayer=!1,this.availableReminders=[],this.availableRoles=[]}}},_=T,P=(r("3636"),Object(m["a"])(_,l,n,!1,null,null,null)),R=P.exports,B={components:{TownSquare:R},data:()=>({isPublic:!1}),methods:{togglePublic(){this.isPublic=!this.isPublic}}},M=B,O=(r("5c0b"),Object(m["a"])(M,i,s,!1,null,null,null)),C=O.exports;a["a"].config.productionTip=!1,new a["a"]({render:e=>e(C)}).$mount("#app")},"5c0b":function(e,t,r){"use strict";var a=r("9c0c"),i=r.n(a);i.a},"74c9":function(e,t,r){"use strict";var a=r("9fd8"),i=r.n(a);i.a},"9c0c":function(e,t,r){},"9fd8":function(e,t,r){},b1d9:function(e){e.exports=JSON.parse('[{"id":"washerwoman","name":"Washerwoman","set":"TB","team":"townsfolk","firstNight":true,"otherNight":false,"reminders":["Townsfolk","Decoy"],"setup":false,"ability":"You start knowing 1 of 2 players is a particular Townsfolk."},{"id":"librarian","name":"Librarian","set":"TB","team":"townsfolk","firstNight":true,"otherNight":false,"reminders":["Outsider","Decoy"],"setup":false,"ability":"You start knowing that 1 of 2 players is a particular Outsider. (Or that zero are in play)"},{"id":"investigator","name":"Investigator","set":"TB","team":"townsfolk","firstNight":true,"otherNight":false,"reminders":["Minion","Decoy"],"setup":false,"ability":"You start knowing 1 of 2 players is a particular Minion."},{"id":"chef","name":"Chef","set":"TB","team":"townsfolk","firstNight":true,"otherNight":false,"reminders":[],"setup":false,"ability":"You start knowing how many pairs of evil players there are."},{"id":"empath","name":"Empath","set":"TB","team":"townsfolk","firstNight":true,"otherNight":true,"reminders":[],"setup":false,"ability":"Each night, you learn how many of your 2 alive neighbours are evil."},{"id":"fortuneteller","name":"Fortune Teller","set":"TB","team":"townsfolk","firstNight":true,"otherNight":true,"reminders":["Decoy"],"setup":false,"ability":"Each night, choose 2 players: you learn if either is a Demon. There is 1 good player that registers falsely to you."},{"id":"undertaker","name":"Undertaker","set":"TB","team":"townsfolk","firstNight":false,"otherNight":true,"reminders":["Executed"],"setup":false,"ability":"Each night*, you learn which character died by execution today."},{"id":"monk","name":"Monk","set":"TB","team":"townsfolk","firstNight":false,"otherNight":true,"reminders":["Protected"],"setup":false,"ability":"Each night*, choose a player (not yourself): they are safe from the Demon tonight."},{"id":"ravenkeeper","name":"Ravenkeeper","set":"TB","team":"townsfolk","firstNight":false,"otherNight":true,"reminders":[],"setup":false,"ability":"If you die at night, you are woken to choose a player: you learn their character."},{"id":"mayor","name":"Mayor","set":"TB","team":"townsfolk","firstNight":false,"otherNight":false,"reminders":[],"setup":false,"ability":"If only 3 players live & no execution occurs, your team wins. If you die at night, another player might die instead."},{"id":"slayer","name":"Slayer","set":"TB","team":"townsfolk","firstNight":false,"otherNight":false,"reminders":["Used"],"setup":false,"ability":"Once per game, during the day, publicly choose a player: if they are the Demon, they die."},{"id":"soldier","name":"Soldier","set":"TB","team":"townsfolk","firstNight":false,"otherNight":false,"reminders":[],"setup":false,"ability":"You are safe from the Demon."},{"id":"virgin","name":"Virgin","set":"TB","team":"townsfolk","firstNight":false,"otherNight":false,"reminders":["Used"],"setup":false,"ability":"The first time you are nominated, if the nominator is a Townsfolk, they are executed immediately."},{"id":"butler","name":"Butler","set":"TB","team":"outsider","firstNight":true,"otherNight":true,"reminders":["Master"],"setup":false,"ability":"Each night, choose a player (not yourself): tomorrow, you may only vote if they are voting too."},{"id":"drunk","name":"Drunk","set":"TB","team":"outsider","firstNight":false,"otherNight":false,"reminders":["Drunk"],"setup":true,"ability":"You do not know you are the Drunk. You think you are a Townsfolk, but your ability malfunctions."},{"id":"recluse","name":"Recluse","set":"TB","team":"outsider","firstNight":false,"otherNight":false,"reminders":[],"setup":false,"ability":"You might register as evil and as a Minion or Demon, even if dead."},{"id":"saint","name":"Saint","set":"TB","team":"outsider","firstNight":false,"otherNight":false,"reminders":[],"setup":false,"ability":"If you die by execution, your team loses."},{"id":"baron","name":"Baron","set":"TB","team":"minion","firstNight":false,"otherNight":false,"reminders":[],"setup":true,"ability":"There are extra Outsiders in play. [+2 Outsiders]"},{"id":"poisoner","name":"Poisoner","set":"TB","team":"minion","firstNight":true,"otherNight":true,"reminders":["Poisoned"],"setup":false,"ability":"Each night, choose a player: their ability malfunctions tonight and tomorrow day."},{"id":"spy","name":"Spy","set":"TB","team":"minion","firstNight":true,"otherNight":true,"reminders":[],"setup":false,"ability":"Each night, you see the Grimoire. You might register as good and as a Townsfolk or Outsider, even if dead."},{"id":"scarletwoman","name":"Scarlet Woman","set":"TB","team":"minion","firstNight":false,"otherNight":true,"reminders":["Demon"],"setup":false,"ability":"If there are 5 or more players alive (Travellers don\'t count) and the Demon dies, you become the Demon."},{"id":"imp","name":"Imp","set":"TB","team":"demon","firstNight":false,"otherNight":true,"reminders":["Die"],"setup":false,"ability":"Each night*, choose a player: they die. If you kill yourself this way, a Minion becomes the Imp."}]')},d4b2:function(e,t,r){}});
+//# sourceMappingURL=app.86616708.js.map
\ No newline at end of file
diff --git a/js/app.86616708.js.map b/js/app.86616708.js.map
new file mode 100644
index 0000000..ddafd5f
--- /dev/null
+++ b/js/app.86616708.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./src/components/Modal.vue?9709","webpack:///./src/components/TownSquare.vue?5ccd","webpack:///./src/App.vue?d565","webpack:///./src/components/TownSquare.vue?0842","webpack:///./src/components/Player.vue?0408","webpack:///src/components/Player.vue","webpack:///./src/components/Player.vue?42e4","webpack:///./src/components/Player.vue","webpack:///./src/components/Modal.vue?d649","webpack:///src/components/Modal.vue","webpack:///./src/components/Modal.vue?2d56","webpack:///./src/components/Modal.vue","webpack:///src/components/TownSquare.vue","webpack:///./src/components/TownSquare.vue?c41d","webpack:///./src/components/TownSquare.vue","webpack:///src/App.vue","webpack:///./src/App.vue?8b47","webpack:///./src/App.vue","webpack:///./src/main.js","webpack:///./src/App.vue?f446","webpack:///./src/components/Player.vue?0fbc"],"names":["webpackJsonpCallback","data","moduleId","chunkId","chunkIds","moreModules","executeModules","i","resolves","length","Object","prototype","hasOwnProperty","call","installedChunks","push","modules","parentJsonpFunction","shift","deferredModules","apply","checkDeferredModules","result","deferredModule","fulfilled","j","depId","splice","__webpack_require__","s","installedModules","exports","module","l","m","c","d","name","getter","o","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","p","jsonpArray","window","oldJsonpFunction","slice","render","_vm","this","_h","$createElement","_c","_self","attrs","isPublic","staticClass","on","togglePublic","_v","staticRenderFns","class","public","players","_l","player","roles","openReminderModal","openRoleModal","directives","rawName","availableReminders","expression","closeModal","reminder","role","$event","addReminder","_s","availableRoles","id","team","setRole","dead","hasDied","hasVoted","toggleStatus","changeRole","_e","reminders","ability","removeReminder","$emit","component","close","stopPropagation","_t","config","productionTip","h","App","$mount"],"mappings":"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","file":"js/app.86616708.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tfunction webpackJsonpCallback(data) {\n \t\tvar chunkIds = data[0];\n \t\tvar moreModules = data[1];\n \t\tvar executeModules = data[2];\n\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(data);\n\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n\n \t\t// add entry modules from loaded chunk to deferred list\n \t\tdeferredModules.push.apply(deferredModules, executeModules || []);\n\n \t\t// run deferred modules when all chunks ready\n \t\treturn checkDeferredModules();\n \t};\n \tfunction checkDeferredModules() {\n \t\tvar result;\n \t\tfor(var i = 0; i < deferredModules.length; i++) {\n \t\t\tvar deferredModule = deferredModules[i];\n \t\t\tvar fulfilled = true;\n \t\t\tfor(var j = 1; j < deferredModule.length; j++) {\n \t\t\t\tvar depId = deferredModule[j];\n \t\t\t\tif(installedChunks[depId] !== 0) fulfilled = false;\n \t\t\t}\n \t\t\tif(fulfilled) {\n \t\t\t\tdeferredModules.splice(i--, 1);\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = deferredModule[0]);\n \t\t\t}\n \t\t}\n\n \t\treturn result;\n \t}\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// undefined = chunk not loaded, null = chunk preloaded/prefetched\n \t// Promise = chunk loading, 0 = chunk loaded\n \tvar installedChunks = {\n \t\t\"app\": 0\n \t};\n\n \tvar deferredModules = [];\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/townsquare/\";\n\n \tvar jsonpArray = window[\"webpackJsonp\"] = window[\"webpackJsonp\"] || [];\n \tvar oldJsonpFunction = jsonpArray.push.bind(jsonpArray);\n \tjsonpArray.push = webpackJsonpCallback;\n \tjsonpArray = jsonpArray.slice();\n \tfor(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);\n \tvar parentJsonpFunction = oldJsonpFunction;\n\n\n \t// add entry module to deferred list\n \tdeferredModules.push([\"56d7\",\"chunk-vendors\"]);\n \t// run deferred modules when ready\n \treturn checkDeferredModules();\n","import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Modal.vue?vue&type=style&index=0&lang=scss&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Modal.vue?vue&type=style&index=0&lang=scss&\"","import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./TownSquare.vue?vue&type=style&index=0&lang=scss&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./TownSquare.vue?vue&type=style&index=0&lang=scss&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{\"id\":\"app\"}},[_c('TownSquare',{attrs:{\"is-public\":_vm.isPublic}}),_c('div',{staticClass:\"controls\"},[_c('button',{on:{\"click\":_vm.togglePublic}},[_vm._v(\"Toggle\")])])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"square\",class:{ public: _vm.isPublic },attrs:{\"id\":\"townsquare\"}},[_c('ul',{staticClass:\"circle\",class:['size-' + _vm.players.length]},_vm._l((_vm.players),function(player){return _c('Player',{key:player.name,attrs:{\"player\":player,\"roles\":_vm.roles,\"is-public\":_vm.isPublic},on:{\"add-reminder\":_vm.openReminderModal,\"set-role\":_vm.openRoleModal}})}),1),_c('Modal',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.availableReminders.length),expression:\"availableReminders.length\"}],on:{\"close\":_vm.closeModal}},[_c('h2',[_vm._v(\"Choose a reminder token:\")]),_c('ul',{staticClass:\"reminders\"},_vm._l((_vm.availableReminders),function(reminder){return _c('li',{staticClass:\"reminder\",class:[reminder.role],on:{\"click\":function($event){return _vm.addReminder(reminder)}}},[_vm._v(\" \"+_vm._s(reminder.name)+\" \")])}),0)]),_c('Modal',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.availableRoles.length),expression:\"availableRoles.length\"}],on:{\"close\":_vm.closeModal}},[_c('h2',[_vm._v(\"Choose a new role:\")]),_c('ul',{staticClass:\"tokens\"},_vm._l((_vm.availableRoles),function(role){return _c('li',{staticClass:\"token\",class:[role.id, role.team],on:{\"click\":function($event){return _vm.setRole(role)}}},[_vm._v(\" \"+_vm._s(role.name)+\" \")])}),0)])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',[_c('div',{staticClass:\"player\",class:{ dead: _vm.player.hasDied, 'no-vote': _vm.player.hasVoted }},[_c('div',{staticClass:\"shroud\",on:{\"click\":function($event){return _vm.toggleStatus()}}}),_c('div',{staticClass:\"token\",class:[_vm.player.role.id],on:{\"click\":function($event){return _vm.changeRole()}}},[(_vm.player.role.firstNight)?_c('span',{staticClass:\"leaf-left\"}):_vm._e(),(_vm.player.role.otherNight)?_c('span',{staticClass:\"leaf-right\"}):_vm._e(),(_vm.player.role.reminders.length)?_c('span',{class:['leaf-top' + _vm.player.role.reminders.length]}):_vm._e(),(_vm.player.role.setup)?_c('span',{staticClass:\"leaf-orange\"}):_vm._e(),_c('div',[_vm._v(_vm._s(_vm.player.role.name))])]),(_vm.player.role.ability)?_c('div',{staticClass:\"ability\"},[_vm._v(_vm._s(_vm.player.role.ability))]):_vm._e(),_c('div',{staticClass:\"name\"},[_vm._v(_vm._s(_vm.player.name))])]),_vm._l((_vm.player.reminders),function(reminder){return (_vm.player.reminders)?_c('div',{staticClass:\"reminder\",class:[reminder.role],on:{\"click\":function($event){return _vm.removeReminder(reminder)}}},[_vm._v(_vm._s(reminder.name))]):_vm._e()}),_c('div',{staticClass:\"reminder add\",on:{\"click\":function($event){return _vm.$emit('add-reminder', _vm.player)}}})],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <li>\n    <div class=\"player\"\n         :class=\"{ dead: player.hasDied, 'no-vote': player.hasVoted }\">\n      <div class=\"shroud\" @click=\"toggleStatus()\"></div>\n      <div class=\"token\" @click=\"changeRole()\" :class=\"[player.role.id]\">\n        <span class=\"leaf-left\" v-if=\"player.role.firstNight\"></span>\n        <span class=\"leaf-right\" v-if=\"player.role.otherNight\"></span>\n        <span v-if=\"player.role.reminders.length\" v-bind:class=\"['leaf-top' + player.role.reminders.length]\"></span>\n        <span class=\"leaf-orange\" v-if=\"player.role.setup\"></span>\n        <div>{{ player.role.name }}</div>\n      </div>\n      <div class=\"ability\" v-if=\"player.role.ability\">{{ player.role.ability }}</div>\n      <div class=\"name\">{{ player.name }}</div>\n    </div>\n    <div class=\"reminder\"\n         v-if=\"player.reminders\"\n         v-for=\"reminder in player.reminders\"\n         v-bind:class=\"[reminder.role]\"\n         @click=\"removeReminder(reminder)\">{{ reminder.name }}</div>\n    <div class=\"reminder add\" @click=\"$emit('add-reminder', player)\"></div>\n  </li>\n</template>\n\n<script>\n  export default {\n    props: {\n      player: {\n        type: Object,\n        required: true\n      },\n      roles: {\n        type: Map,\n        required: true\n      },\n      isPublic: {\n        type: Boolean,\n        required: true\n      }\n    },\n    data () {\n      return {}\n    },\n    methods: {\n      toggleStatus () {\n        if (!this.isPublic || !this.player.hasDied) {\n          this.$set(this.player, 'hasDied', !this.player.hasDied);\n          if (!this.player.hasDied) {\n            this.$set(this.player, 'hasVoted', false);\n          }\n        } else {\n          this.$set(this.player, 'hasVoted', !this.player.hasVoted);\n        }\n      },\n      changeRole () {\n        if (!this.isPublic) {\n          this.$emit('set-role', this.player);\n        } else {\n          this.toggleStatus();\n        }\n      },\n      removeReminder (reminder) {\n        this.player.reminders.splice(this.player.reminders.indexOf(reminder), 1);\n      }\n    }\n  }\n</script>\n\n<style lang=\"scss\">\n\n  // token size\n  $token: 150px;\n\n  /***** Player token *****/\n  .circle .player {\n    margin-bottom: 10px;\n\n    .shroud {\n      content: \" \";\n      background: url('../assets/shroud.png') center -10px no-repeat;\n      background-size: auto 100%;\n      position: absolute;\n      margin-left: -2/6 * $token;\n      width: 2/3 * $token;\n      height: 2/3 * $token;\n      left: 50%;\n      top: -30px;\n      cursor: pointer;\n      opacity: 0;\n      transform: scale(1.5);\n      transition: all 200ms;\n      z-index: 2;\n      &:hover {\n        opacity: 0.5;\n        top: -10px;\n        transform: scale(1);\n      }\n    }\n\n    &.dead .shroud {\n      opacity: 1;\n      top: 0;\n      transform: scale(1);\n    }\n    &.dead .name { color: #999; }\n  }\n\n  #townsquare.public .player.dead {\n    &:after {\n      content: \" \";\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 100%;\n      background: url('../assets/vote.png') center center no-repeat;\n      background-size: 40%;\n      height: $token + 3px;\n      pointer-events: none;\n    }\n    &.traveller:after { filter: grayscale(100%); }\n    &.no-vote:after { display: none; }\n  }\n\n  #townsquare.public .player .shroud { display: none; }\n\n  /***** Role token ******/\n  .circle .token {\n    border-radius: 50%;\n    height: $token + 3px;\n    width: $token + 3px;\n    background: url('../assets/token.png') center center;\n    background-size: 100%;\n    text-align: center;\n    position: relative;\n    color: black;\n    margin: auto;\n    font-weight: 600;\n    text-shadow:\n        -1px -1px 0 #fff,\n        1px -1px 0 #fff,\n        -1px 1px 0 #fff,\n        1px 1px 0 #fff,\n        0 0 5px rgba(0,0,0,0.75);\n    padding-top: $token * 0.7;\n    box-sizing: border-box;\n    font-family: 'Papyrus', serif;\n    border: 3px solid black;\n    box-shadow: 0 0 10px rgba(0,0,0,0.5);\n    cursor: pointer;\n\n    &:before {\n      content: \" \";\n      background-size: 100%;\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      left: 0;\n      top: 0;\n    }\n\n    span {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      background-size: 100%;\n      left: 0;\n      top: 0;\n      pointer-events: none;\n      &.leaf-left { background-image: url('../assets/leaf-left.png'); }\n      &.leaf-orange { background-image: url('../assets/leaf-orange.png'); }\n      &.leaf-right { background-image: url('../assets/leaf-right.png'); }\n      &.leaf-top1 { background-image: url('../assets/leaf-top1.png'); }\n      &.leaf-top2 { background-image: url('../assets/leaf-top2.png'); }\n      &.leaf-top3 { background-image: url('../assets/leaf-top3.png'); }\n      &.leaf-top4 { background-image: url('../assets/leaf-top4.png'); }\n      &.leaf-top5 { background-image: url('../assets/leaf-top5.png'); }\n    }\n  }\n\n  #townsquare.public .token {\n    background-image: url('../assets/life.png');\n    div { display: none; }\n    &:before, &:after, span { display: none; }\n  }\n\n  #townsquare.public .player.dead .token {\n    background-image: url('../assets/death.png');\n  }\n\n  #townsquare.public .player.traveller .token {\n    filter: grayscale(100%);\n  }\n\n  /***** Player name *****/\n  .name {\n    font-size: 120%;\n    line-height: 120%;\n    text-shadow:\n        -2px -2px 0 #000,\n        2px -2px 0 #000,\n        -2px 2px 0 #000,\n        2px 2px 0 #000,\n        0 0 10px rgba(0,0,0,0.75);\n  }\n\n  /***** Ability text *****/\n  #townsquare.public .ability { display: none; }\n  .circle .ability {\n    position: absolute;\n    padding: 5px 10px;\n    top: 20px;\n    right: 100%;\n    width: 200px;\n    z-index: 25;\n    font-size: 80%;\n    background: rgba(0,0,0,0.7);\n    border-radius: 10px;\n    border: 3px solid black;\n    text-align: left;\n    display: none;\n    &:after {\n      content: \" \";\n      border: 10px solid transparent;\n      position: absolute;\n      left: 100%;\n      width: 0;\n      height: 0;\n      border-left-color: black;\n      top: 20px;\n      margin: 0 2px;\n    }\n  }\n\n  .player:hover .ability { display: block; }\n\n  /***** Reminder token *****/\n  .circle .reminder {\n    background: url('../assets/reminder.png') center center;\n    background-size: 100%;\n    width: $token / 2;\n    height: $token / 2;\n    color: black;\n    font-size: 50%;\n    font-weight: bold;\n    display: block;\n    margin: 5px ($token / -4) 0;\n    text-align: center;\n    position: relative;\n    box-sizing: border-box;\n    padding-top: $token * 0.3;\n    border-radius: 50%;\n    border: 3px solid black;\n    box-shadow: 0 0 10px rgba(0,0,0,0.5);\n    transition: all 200ms;\n    cursor: pointer;\n\n    &:before, &:after {\n      content: \" \";\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      background-size: 100%;\n      background-position: center 0;\n      background-repeat: no-repeat;\n      background-image: url('../assets/icons/plus.png');\n      transition: opacity 200ms;\n    }\n\n    &:after {\n      background-image: url('../assets/icons/x.png');\n      opacity: 0;\n    }\n\n    &.add {\n      opacity: 0;\n      top: 30px;\n      &:after { display: none; }\n    }\n\n    &:hover:before { opacity: 0; }\n    &:hover:after { opacity: 1; }\n  }\n  .circle li:hover .reminder.add, { opacity: 1; top: 0; }\n  .circle li:hover .reminder.add:before { opacity: 1; }\n\n  #townsquare.public .reminder { display: none; }\n</style>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Player.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Player.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Player.vue?vue&type=template&id=55b33d86&\"\nimport script from \"./Player.vue?vue&type=script&lang=js&\"\nexport * from \"./Player.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Player.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',{attrs:{\"name\":\"modal-fade\"}},[_c('div',{staticClass:\"modal-backdrop\",on:{\"click\":_vm.close}},[_c('div',{staticClass:\"modal\",attrs:{\"role\":\"dialog\",\"aria-labelledby\":\"modalTitle\",\"aria-describedby\":\"modalDescription\"},on:{\"click\":function($event){$event.stopPropagation();}}},[_vm._t(\"default\")],2)])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<script>\n  export default {\n    methods: {\n      close() {\n        this.$emit('close');\n      },\n    },\n  };\n</script>\n<template>\n  <transition name=\"modal-fade\">\n    <div class=\"modal-backdrop\" @click=\"close\">\n      <div class=\"modal\"\n           role=\"dialog\"\n           aria-labelledby=\"modalTitle\"\n           aria-describedby=\"modalDescription\"\n           @click.stop=\"\"\n      >\n        <slot></slot>\n      </div>\n    </div>\n  </transition>\n</template>\n<style lang=\"scss\">\n  .modal-backdrop {\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-color: rgba(0, 0, 0, 0.3);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    z-index: 100;\n  }\n\n  .modal {\n    background: rgba(0,0,0,0.8);\n    padding: 10px 20px;\n    border-radius: 10px;\n    box-shadow: 2px 2px 20px 1px #000;\n    overflow-x: auto;\n    display: flex;\n    flex-direction: column;\n    max-width: 60%;\n\n    h2 {\n      margin: 0;\n      text-align: center;\n    }\n  }\n\n  .modal-fade-enter,\n  .modal-fade-leave-active {\n    opacity: 0;\n  }\n\n  .modal-fade-enter-active,\n  .modal-fade-leave-active {\n    transition: opacity .2s ease\n  }\n</style>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Modal.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Modal.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Modal.vue?vue&type=template&id=60e9d468&\"\nimport script from \"./Modal.vue?vue&type=script&lang=js&\"\nexport * from \"./Modal.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Modal.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","<template>\n  <div  id=\"townsquare\" class=\"square\" v-bind:class=\"{ public: isPublic }\">\n    <ul class=\"circle\" v-bind:class=\"['size-' + players.length]\">\n      <Player\n          v-for=\"player in players\"\n          :key=\"player.name\"\n          :player=\"player\"\n          :roles=\"roles\"\n          :is-public=\"isPublic\"\n          @add-reminder=\"openReminderModal\"\n          @set-role=\"openRoleModal\"\n      ></Player>\n    </ul>\n    <Modal v-show=\"availableReminders.length\" @close=\"closeModal\">\n      <h2>Choose a reminder token:</h2>\n      <ul class=\"reminders\">\n        <li v-for=\"reminder in availableReminders\" class=\"reminder\"\n            v-bind:class=\"[reminder.role]\"\n            @click=\"addReminder(reminder)\">\n          {{ reminder.name }}\n        </li>\n      </ul>\n    </Modal>\n    <Modal v-show=\"availableRoles.length\" @close=\"closeModal\">\n      <h2>Choose a new role:</h2>\n      <ul class=\"tokens\">\n        <li v-for=\"role in availableRoles\" class=\"token\"\n            v-bind:class=\"[role.id, role.team]\"\n            @click=\"setRole(role)\">\n          {{ role.name }}\n        </li>\n      </ul>\n    </Modal>\n  </div>\n</template>\n\n<script>\n  import rolesJSON from '../roles.json'\n  import Player from './Player'\n  import Modal from \"./Modal\";\n\n  const roles = new Map(rolesJSON.sort((a, b) => b.team.localeCompare(a.team)).map(role => [role.id, role]));\n\n  export default {\n    components: {\n      Modal,\n      Player\n    },\n    props: ['isPublic'],\n    data () {\n      return {\n        players: [\n          { name: \"Steffen\", role: roles.get('baron'), reminders: [{ role: 'imp', name: 'Die' }] },\n          { name: \"Tino\", role: roles.get(\"imp\") },\n          { name: \"Basti\", role: roles.get(\"chef\"), reminders: [] },\n          { name: \"Bernd\", role: roles.get(\"ravenkeeper\"), reminders: [] },\n          { name: \"Tim\", role: roles.get(\"drunk\"), reminders: [] },\n          { name: \"Yann\", role: roles.get(\"librarian\"), reminders: [] },\n          { name: \"Marie\", role: roles.get(\"empath\"), reminders: [] },\n          { name: \"Bogdan\", role: roles.get(\"scarletwoman\"), reminders: [] },\n          { name: \"Sean\", role: roles.get(\"recluse\"), reminders: [] },\n          { name: \"Petra\", role: roles.get(\"undertaker\"), reminders: [] },\n        ],\n        roles,\n        selectedPlayer: false,\n        availableReminders: [],\n        availableRoles: [],\n      }\n    },\n    methods: {\n      openReminderModal (player) {\n        this.selectedPlayer = player;\n        this.availableReminders = [];\n        this.roles.forEach(role => {\n          if (this.players.some(p => p.role.id === role.id)) {\n            this.availableReminders = [\n              ...this.availableReminders,\n              ...role.reminders.map(name => ({role: role.id, name}))\n            ];\n          }\n        });\n      },\n      openRoleModal (player) {\n        this.selectedPlayer = player;\n        this.availableRoles = [];\n        this.roles.forEach(role => {\n          if(role.id !== player.role) {\n            this.availableRoles.push(role);\n          }\n        });\n      },\n      addReminder (reminder) {\n        this.selectedPlayer.reminders.push(reminder);\n        this.closeModal();\n      },\n      setRole (role) {\n        this.selectedPlayer.role = role;\n        this.closeModal();\n      },\n      closeModal () {\n        this.selectedPlayer = false;\n        this.availableReminders = [];\n        this.availableRoles = [];\n      }\n    }\n  }\n</script>\n\n<style lang=\"scss\">\n  @import '../roles.scss';\n\n  @mixin on-circle($item-count) {\n    $angle: (360 / $item-count);\n    $rot: 0;\n\n    @for $i from 1 through $item-count {\n      &:nth-child(#{$i}) {\n        transform: rotate($rot * 1deg);\n        @if $i - 1 <= $item-count / 2 {\n          z-index: $item-count - $i + 1;\n          .ability {\n            left: 100%; right: auto;\n            &:after {\n              border-left-color: transparent;\n              border-right-color: black;\n              left: auto;\n              right: 100%;\n            }\n          }\n        } @else {\n          z-index: $i - 1;\n        }\n        > * {\n          transform: rotate($rot * -1deg);\n        }\n      }\n      $rot: $rot + $angle;\n    }\n  }\n\n  .circle {\n    padding: 0;\n    width: 100%;\n    height: 100%;\n    list-style: none;\n    overflow: hidden;\n    position: relative;\n    margin: 0;\n    box-sizing: border-box;\n\n    li {\n      position: absolute;\n      top: 0;\n      left: 50%;\n      height: 50%;\n      transform-origin: 0 100%;\n      text-align: center;\n\n      &:hover {\n        z-index: 25 !important;\n      }\n\n      > * {\n        margin-left: -100px;\n        width: 200px;\n      }\n    }\n  }\n\n  @for $i from 5 through 20 {\n    .circle.size-#{$i} li {\n      @include on-circle($item-count: $i);\n    }\n  }\n\n  #townsquare {\n    width: 100%;\n    height: 100%;\n    position: relative;\n    border-radius: 50%;\n    box-sizing: border-box;\n    padding: 20px;\n  }\n\n  // player circle\n  .circle {\n    background: url('../assets/demon-head2.png') center center no-repeat;\n    background-size: 10%;\n  }\n\n  #townsquare.public .circle {\n    background-image: url('../assets/demon-head.png');\n  }\n\n  /***** Role token modal ******/\n  ul.tokens {\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    flex-wrap: wrap;\n    align-content: center;\n    align-items: center;\n    overflow: hidden;\n    justify-content: center;\n    font-size: 75%;\n    line-height: 100%;\n\n    .token {\n      border-radius: 50%;\n      height: 120px;\n      width: 120px;\n      background: url('../assets/token.png') center center;\n      background-size: 100%;\n      text-align: center;\n      position: relative;\n      color: black;\n      margin: 5px;\n      font-weight: 600;\n      text-shadow:\n          -1px -1px 0 #fff,\n          1px -1px 0 #fff,\n          -1px 1px 0 #fff,\n          1px 1px 0 #fff,\n          0 0 5px rgba(0,0,0,0.75);\n      padding-top: 85px;\n      box-sizing: border-box;\n      font-family: 'Papyrus', serif;\n      border: 3px solid black;\n      box-shadow: 0 0 10px rgba(0,0,0,0.5);\n      cursor: pointer;\n      transition: transform 500ms ease;\n\n      &.townsfolk { box-shadow: 0 0 10px #004cff, 0 0 10px #004cff; }\n      &.outsider { box-shadow: 0 0 10px #00D6FF, 0 0 10px #00d6ff; }\n      &.minion { box-shadow: 0 0 10px #ff6900, 0 0 10px #ff6900; }\n      &.demon { box-shadow: 0 0 10px #ff0000, 0 0 10px #ff0000; }\n\n      &:before {\n        content: \" \";\n        background-size: 100%;\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        left: 0;\n        top: 0;\n      }\n\n      &:hover {\n        transform: scale(1.2);\n      }\n    }\n  }\n\n  /***** Reminder token modal ******/\n  ul.reminders {\n    @extend .tokens;\n\n    .reminder {\n      background: url('../assets/reminder.png') center center;\n      background-size: 100%;\n      width: 100px;\n      height: 100px;\n      color: black;\n      font-size: 65%;\n      font-weight: bold;\n      display: block;\n      margin: 5px;\n      text-align: center;\n      position: relative;\n      border-radius: 50%;\n      border: 3px solid black;\n      box-shadow: 0 0 10px rgba(0,0,0,0.5);\n      cursor: pointer;\n      box-sizing: border-box;\n      padding-top: 65px;\n      transition: transform 500ms ease;\n\n      &:before {\n        content: \" \";\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        background-size: 100%;\n        background-position: center 0;\n        background-repeat: no-repeat;\n      }\n\n      &:hover {\n        transform: scale(1.2);\n      }\n    }\n  }\n\n</style>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./TownSquare.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./TownSquare.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./TownSquare.vue?vue&type=template&id=45e9ba66&\"\nimport script from \"./TownSquare.vue?vue&type=script&lang=js&\"\nexport * from \"./TownSquare.vue?vue&type=script&lang=js&\"\nimport style0 from \"./TownSquare.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","<template>\n  <div id=\"app\">\n    <TownSquare :is-public=\"isPublic\"></TownSquare>\n    <div class=\"controls\">\n      <button v-on:click=\"togglePublic\">Toggle</button>\n    </div>\n  </div>\n</template>\n\n<script>\n  import TownSquare from './components/TownSquare.vue'\n\n  export default {\n    components: {\n      TownSquare\n    },\n    data: () => ({\n      isPublic: false\n    }),\n    methods: {\n      togglePublic () {\n        this.isPublic = !this.isPublic;\n      }\n    }\n  }\n</script>\n\n<style lang=\"scss\">\n  @font-face { font-family: \"Papyrus\";\n    src: url(\"assets/fonts/papyrus.eot\"); /* IE9*/\n    src: url(\"assets/fonts/papyrus.eot?#iefix\") format(\"embedded-opentype\"), /* IE6-IE8 */\n    url(\"assets/fonts/papyrus.woff2\") format(\"woff2\"), /* chrome firefox */\n    url(\"assets/fonts/papyrus.woff\") format(\"woff\"), /* chrome firefox */\n    url(\"assets/fonts/papyrus.ttf\") format(\"truetype\"), /* chrome firefox opera Safari, Android, iOS 4.2+*/\n    url(\"assets/fonts/papyrus.svg#PapyrusW01\") format(\"svg\"); /* iOS 4.1- */\n  }\n\n  html, body {\n    font-size: 1.2em;\n    line-height: 1.4;\n    background: url('assets/background.jpg') center center;\n    background-size: cover;\n    color: white;\n    height: 100%;\n    font-family: 'Roboto Condensed', sans-serif;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    padding: 0;\n    margin: 0;\n  }\n\n  #app {\n    height: 100%;\n  }\n\n  // Controls\n  .controls {\n    position: absolute;\n    right: 0;\n    top: 0;\n  }\n</style>\n","import mod from \"-!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./App.vue?vue&type=template&id=0cf97133&\"\nimport script from \"./App.vue?vue&type=script&lang=js&\"\nexport * from \"./App.vue?vue&type=script&lang=js&\"\nimport style0 from \"./App.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","import Vue from 'vue'\nimport App from './App'\n\nVue.config.productionTip = false;\n\nnew Vue({\n  render: h => h(App),\n}).$mount('#app')\n","import mod from \"-!../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=style&index=0&lang=scss&\"; export default mod; export * from \"-!../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=style&index=0&lang=scss&\"","import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Player.vue?vue&type=style&index=0&lang=scss&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Player.vue?vue&type=style&index=0&lang=scss&\""],"sourceRoot":""}
\ No newline at end of file