body {
  margin:16px;
  width:100%;
  height:100%;
}

#full {
  position: fixed;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  z-index: 100;

}

#warning {
  position: fixed;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  z-index: 500;
  background: #800;
  font-size: 10vh;
  text-align: center;
  color: #FFF;
}

@media (orientation: landscape) {
  #warning  {
    display: none;
  }
}



svg.wld {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height: 100%;
  z-index: 200;
  background: #FDE;
}

#paper {
  fill: url('#pattern');
  z-index: 100;
}

#full.hi #paper {
  filter: url('#ptex');
}

#lines {
  z-index: 200;
}

g {
  stroke-width: .5;
}

g.team0 {
  stroke: rgba(var(--p1dr),var(--p1dg),var(--p1db),.8);
  fill: rgba(var(--p1pr),var(--p1pg),var(--p1pb),.6);
}

g.team0.avatar path.bg {
  fill: rgba(var(--p1pr),var(--p1pg),var(--p1pb),.2);
  stroke: none;
}

g.team0 path.shine {
  fill: rgba(var(--p1br),var(--p1bg),var(--p1bb),.4);
  stroke: rgba(var(--p1br),var(--p1bg),var(--p1bb),.9);
}

g.team1 path.shine {
  fill: rgba(var(--p2br),var(--p2bg),var(--p2bb),.4);
  stroke: rgba(var(--p2br),var(--p2bg),var(--p2bb),.9);
}

g.team0 path.shine2 {
  fill: rgba(var(--p1dr),var(--p1dg),var(--p1db),.2);
  stroke: rgba(var(--p1br),var(--p1bg),var(--p1bb),.2);
}

g.team1 path.shine2 {
  fill: rgba(var(--p2dr),var(--p2dg),var(--p2db),.2);
  stroke: rgba(var(--p2br),var(--p2bg),var(--p2bb),.2);
}


g.team0.avatar path.bg.torso {
  fill: rgba(var(--p1br),var(--p1bg),var(--p1bb),.1);
}

g.team1.avatar path.bg {
  stroke: none;
  fill: rgba(var(--p2pr),var(--p2pg),var(--p2pb),.2);
}

g.team1.avatar path.bg.torso {
  fill: rgba(var(--p2br),var(--p2bg),var(--p2bb),.1);
}


g.we, g.shield {
  stroke-width: 1;
}

g.team0.we {
  stroke: rgba(var(--p1br),var(--p1bg),var(--p1bb),1);
}

g.team1.we {
  stroke: rgba(var(--p2br),var(--p2bg),var(--p2bb),1);
}

g.team0.shield {
  stroke: rgba(var(--p1dr),var(--p1dg),var(--p1db),1);
}

g.team1.shield {
  stroke: rgba(var(--p2dr),var(--p2dg),var(--p2db),1);
}

g.team1 {
  stroke: rgba(var(--p2dr),var(--p2dg),var(--p2db),.8);
  fill: rgba(var(--p2pr),var(--p2pg),var(--p2pb),.6);
}

g.team1 path {
  transform: scale(-1,1);
}




g.team0.plat {
  stroke: rgba(var(--p1dr),var(--p1dg),var(--p1db),1);
  fill: rgba(var(--p1dr),var(--p1dg),var(--p1db),1);
}

g.bg path {
  transform: scale(2,2);
  stroke: rgba(64,0,0,.2) !important;
  fill: rgba(0,0,0,.2) !important;
}

g.team1.plat {
  stroke: rgba(var(--p2dr),var(--p2dg),var(--p2db),1);
  fill: rgba(var(--p2dr),var(--p2dg),var(--p2db),1);
}

div.ctltop {
  position:fixed;
  width: 40vw;
  top:0;
  bottom:0;
  z-index: 200;
  --hth:0%;
}

div.ctltop div.card.used {
  box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
  border-width: 2px;
}


div.ctltop.team0 div.card.used {
  transform: translateX(5vh) rotate(15deg);
}

div.ctltop.team1 div.card.used {
  transform: translateX(-5vh) rotate(-15deg);
}

div.ctltop div.pname {
  font-family: cursive;
  position: absolute;
  top: 1vh;
  font-size: 3vh;
  text-align: left;
  color:rgba(0,0,0,.8);
}

div.ctltop.team1 div.pname {
  right: 35vh;
}
div.ctltop.team0 div.pname {
  left: 35vh;
}


div.ctltop div.hb {
  position: absolute;
  width: 20vw;
  top: 5vh;
  border-radius: 3vh;
  border: 1px solid #000;
  text-align: center;
  overflow: hidden;
  color:#FFF;
}

div.ctltop.team0 div.hb {
  left: 35vh;
}

div.ctltop.team1 div.hb {
  right: 35vh;
}

div.ctltop div.hbf {
  position: absolute;
  top:0;
  bottom:0;
  width: var(--hth);
  z-index: -100;
  transition: width 1s;
}

div.ctltop.team0 div.hbf {
  left:0;
  background-color: rgba(var(--p1br),var(--p1bg),var(--p1bb),1);
}


div.ctltop.team1 div.hbf {
  right:0;
  background-color: rgba(var(--p2br),var(--p2bg),var(--p2bb),1);
}


div.card {
  position: absolute;
  width: 20vh;
  height: 20%;
  background: #FFF;
  border-radius: 3vh;
  border: 1px solid #000;
  transition: top .5s, left .5s, right .5s,width 1s, height 1s, transform 1s;
  padding:1vh;
  box-shadow: none;

  fill: rgba(0,0,0,.7);
  stroke-width:1;
  stroke: #333;
  color: #000;
}

div.ctltop.active div.card {
  box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
}


div.card svg {
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

div.card span.name {
  display: block;
  font-family: monospace;
  text-align: center;
}

#full div.card span.name::after {
  display: none;
  background: #000;
  color: #FFF;
  padding:.5em;
  height: 1em;
  width:  1em;
  position: absolute;
  bottom:.1em;
  border-radius: .5em;
}

#full.hi div.card span.name::after {
  display: block;
}

div.ctltop.team0 div.card span.name::after {
  left: .1em;
}

div.ctltop.team1 div.card span.name::after {
  right: .1em;
}

div.ctltop.team0 div.card:nth-child(1) span.name::after {
  content: '1';
}

div.ctltop.team0 div.card:nth-child(2) span.name::after {
  content: 'Q';
}

div.ctltop.team0 div.card:nth-child(3) span.name::after {
  content: 'A';
}

div.ctltop.team0 div.card:nth-child(4) span.name::after {
  content: 'Z';
}


div.ctltop.team1 div.card:nth-child(1) span.name::after {
  content: '9';
}

div.ctltop.team1 div.card:nth-child(2) span.name::after {
  content: 'I';
}

div.ctltop.team1 div.card:nth-child(3) span.name::after {
  content: 'J';
}

div.ctltop.team1 div.card:nth-child(4) span.name::after {
  content: 'N';
}

div.card:nth-child(1) {
   top: 1%;
}

div.card:nth-child(2) {
   top: 26%;
}

div.card:nth-child(3) {
   top: 51%;
}

div.card:nth-child(4) {
   top: 76%;
}

div.card:nth-child(5),div.card:nth-child(6),div.card:nth-child(7) {
   top: 86%;
   width: 10vh;
   height: 10%;
   pointer-events: none;
   box-shadow: none;
   color: #DDD;
   fill: rgba(0,0,0,.5);
   stroke-width:1;
   stroke: rgba(0,0,0,.5);

}

div.ctltop.team0 div.card:nth-child(5) {
   left: 26vh;
}

div.ctltop.team0 div.card:nth-child(6) {
   left: 39vh;
}

div.ctltop.team0 div.card:nth-child(7) {
   left: 52vh;
}

div.ctltop.team1 div.card:nth-child(5) {
   right: 26vh;

}

div.ctltop.team1 div.card:nth-child(6) {
   right: 39vh;
}

div.ctltop.team1 div.card:nth-child(7) {
   right: 52vh;
}



div.ctltop.team0 {
  left:0;

}

div.ctltop.team0 div.card {
  left: 2vh;
}


div.ctltop.team1 {
  right:0;

}

div.ctltop.team1 div.card {
  right: 2vh;
}

div.ctltop.team1 div.card svg {
  transform: scale(-1,1);
}

#menu {
  font-family: cursive;
  fill: rgba(0,0,0,.3);
  font-weight:bolder;
  font-variant: small-caps;
  xtext-shadow: 0px 0px 5px blue;
  stroke-width: .5;
  stroke: rgba(0,0,0,.8);
  font-size: 30px;
}

#menu text:hover {
  fill: rgba(0,0,0,.8);
}


#menu text:nth-child(1) {
  fill: rgba(64,0,0,.3);
  stroke-width: 3;
  font-size: 60px;
  pointer-events: none;
}
#menu text:nth-child(2) {
  fill: rgba(128,64,0,.3);
  font-size: 20px;
  pointer-events: none;
}

#msg {
  position: fixed;
  top:10vh;
  left: 0;
  right: 0;
  overflow: hidden;
  font-size: 2vh;
  font-family: cursive;
  text-align: center;
  font-variant: small-caps;
  z-index: 600;
  color: rgba(64,0,0,.6);
  text-shadow: 0px 0px 10px rgba(0,0,0,.8);
  transition: opacity .2s, font-size .3s;
  opacity: 0;
  pointer-events: none;
  padding-left: 20%;
  padding-right: 20%;
}

#msg.act {
  transition: opacity .1s, font-size .1s;
  opacity:1;
  font-size: 15vh;
}

#msg.act.tut {
  font-size: 5vh;
  color: rgba(64,0,128,1);

}