@font-face {
  font-family: ChorusFont;
  src:url("/static/fonts/texgyrechorus-mediumitalic.otf");
}
@font-face {
  font-family: AbyssFont;
  src:url("/static/fonts/AbyssinicaSIL-Regular.ttf");
}

html,body{height:100%;margin:0; padding:0; font-family: AbyssFont;}

#canvas{
  display:block;
  width:100%;
  height:100%;
  touch-action:none;
  background:#222;
}

.token-img { display:none; } /* preloaded images */

.ping {
  position:absolute;
  pointer-events:none;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

/* small central dot */
.ping .dot {
  width:8px;
  height:8px;
  margin-left: -4px;
  margin-top: -4px;
  border-radius:50%;
  background: #ff3b30; /* fill color */
  box-shadow: 0 0 6px rgba(255,59,48,0.6);
  position:relative;
  z-index:2;
}

/* expanding ring (border only) */
.ping .ring {
  position:absolute;
  left:50%;
  top:50%;
  width:8px;
  height:8px;
  margin-left: -4px;
  margin-top: -4px;
  border-radius:50%;
  border: 2px solid rgba(255,59,48,0.9);
  background: transparent;
  z-index:1;
  animation: ring-expand 900ms cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes ring-expand {
  0% {
    transform: translate(-50%,-50%) scale(1);
    opacity: 0.95;
    border-width: 2px;
  }
  100% {
    transform: translate(-50%,-50%) scale(8); /* final ring size */
    opacity: 0;
    border-width: 2px;
  }
}

#label {
  position: fixed;
  left: 8px;
  top: 8px;
  color: #fff;
  background: rgba(0,0,0,0.6);
  padding: 6px 10px;
  border-radius: 4px;
/*       font-family: system-ui, sans-serif; */
  font-size: 13px;
  pointer-events: none;
  display: none;
}
#maptools {
/*       height: 56px; */
/*       display: none; */
  position: fixed;
  top: 12px;
  left: 12px;
  background: #222C;
  border: 1px solid #9997;
  border-radius: 6px;
  display: flex;
  flex-direction: row;
}

.mapbtn, .maptg {
  height: 40px;
  width: 40px;
  padding: 0;
  margin: 6px 3px;
  
  line-height: 100%;
  text-align:center;
  font-size:36px;
  border: none;
  color: DarkGoldenRod;
  text-decoration: none;
  border-radius: 4px;
}
.mapbtn:hover, .maptg:hover {
  border: 1px solid DarkGoldenRod;
  margin: 5px 2px;
}
#maptools > *:first-child {
  margin-left: 6px;
}
#maptools > *:last-child {
  margin-right: 6px;
}
#maptools > *:first-child:hover {
  margin-left: 5px;
}
#maptools > *:last-child:hover {
  margin-right: 5px;
}
.mapbtn {
  display: none;
}