*,*:focus,*:hover{
  outline:none;
}

#edittarget {
  background: #FFF;
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;  
  overflow: hidden;
  object-fit: fill;
  font-family: monospace;  
}

#rendertarget {
  width: 100%;
  height: 100%;
  filter: url(#roughpaper);
}

path.f {
  fill: #0088;
  stroke: #008D;  
  stroke-width: .25;
}

path.Dx,path.Dxx {
  fill: #550A;  
  stroke: none;    
}

path.D {
  fill: url(#board);
  stroke: none;    
}

path.Fx  {
  fill: url(#brick);
  stroke: none;  
}

path.E  {
  fill: url(#temple);
  stroke: none;  
}

path.F, path.Fxxx {
  fill: #550A;
  stroke: none;  
}

path.Fxx {
  fill: #5508;
  stroke: none;  
}

path.g  {
  fill: #0505;
  stroke: none;  
}

path.gx {
  fill: #0A08;
  stroke: none;  
}


path.h {
  fill: url(#board);
  stroke: none;    
}

@keyframes flash {
  from {fill: #0082;}
  to {fill: #00B7;}
}

path.m {  
  stroke: none;  
  stroke-width: 0;
  animation: flash .5s infinite; 
}

path.s {
  stroke: #F88A;
  stroke-width: 1;  
}

path.b {
  stroke: #0608;
  stroke-width: 1;
  fill: #060F;  
}

path.t {
  fill: #040D;  
}

path.tx {
  fill: #080A;  
}


path.a {
  fill: #420F;  

}

path.i {
  stroke: none;
  fill: #000C;  
}

path.j {
  stroke: none;
  fill: #804A;  
}


path.k {
  stroke: none;
  fill: #4809;  
}

path.K {
  stroke: none;
  fill: #236A;  
}


path.w {
  stroke: none;
  stroke-width: .5;
  fill: #A84A;  
}


path.r {
  stroke: none; 
  fill: #822C;  
}

.slot {
  position: absolute;
  right: 10px;
  width: 25vmin;
  height: 25vmin;
  top: 2.5vmin;
  border-radius: 2vmin;
  border: none;  
  background: none;  
}

div.slot.slot.show span {
  display:block;
}

div.slot span {
  display:none;
  position: absolute;
  top: .25em;
  left: .25em;
  width:1.5em;
  font-size: 3vmin;
  text-align:center;
  border: 1px solid #000;
  border-radius: .5em;
  padding: .25em 0em;
  pointer-events: none;
}

.slot.show {
  border: 3px #55FF solid;  
  background: #FFF5;  
}

.slot.chosen {
  border: 5px #00FA solid;  
  background: #00F5;  
}


#s2 {
  top: 37.5vmin;
}

#s3 {
  top: 72.5vmin;
}

svg.card {
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  pointer-events: none;
  display:none;
}

svg.card.act {
  display: block;
}

#spd {
  position:absolute;
  right: 30vmin;
  top: 2vmin;  
  font-size: 5vmin;
  text-align: center;
  color: #050A;
  font-variant: small-caps;
}

#inst.show {
  display:block;
}

#inst {
  display:none;
  position:absolute;
  right: 30vmin;
  top: 0;  
  height:100vmin;  
  font-size: 4vmin;
  text-align: center;
  color: #005A;
  font-variant: small-caps;
  writing-mode: vertical-rl;
}


#stl {
  font-size: 5vmin;
  position:absolute;
  top: 2vmin;
  right: 45vmin;  
  text-align: center;
  color: #055A;
  font-variant: small-caps;
}

#brick {
  stroke-width: 1;
  stroke: #3338;
  
}

#brick rect {
  stroke: none;
  fill:#3337;
}

#board {
  stroke-width: 3;
  stroke: #8408;  
  fill:#8402;
}

#board rect {
  stroke: none;
  
}

#canvas {
  stroke-width: 5;  
  fill:none;
}

#menu {
  font-size: 2rem;
  font-weight: bold;
  font-family: monospace;
  font-variant: small-caps;
  stroke: none;
  fill: #000D;
  cursor:pointer;
}

#menu #tit,#menu #com {
  font-size: 3.5rem;
  fill: #555F;
}

#titp {
  fill:#0000;
}

#menu #sub {
  font-size: 1rem;
  fill: #000A;  
  stroke: #0006;
  stroke-width: 1;
  font-variant:normal;
}