/* Candidate 33 — isolated direct-manipulation canvas for the approved Token Role coin. */

.interactive-electric-coin-preview-candidate .role-token.electric-coin[data-interactive-electric-coin]{
  position:relative;
  overflow:visible;
  isolation:isolate;
  user-select:none;
  -webkit-user-select:none;
}

.interactive-electric-coin-preview-candidate .role-token.electric-coin .electric-coin-animation,
.interactive-electric-coin-preview-candidate .role-token.electric-coin .electric-coin-fallback{
  transition:opacity .12s linear,visibility 0s linear .12s;
}

.interactive-electric-coin-preview-candidate .electric-coin-canvas{
  position:absolute;
  left:50%;
  top:50%;
  z-index:3;
  display:block;
  width:230px;
  height:230px;
  border:0;
  outline:0;
  background:transparent;
  opacity:0;
  cursor:grab;
  touch-action:pan-y;
  transform:translate(-50%,-50%);
  -webkit-tap-highlight-color:transparent;
}

.interactive-electric-coin-preview-candidate .role-token.electric-coin.is-atlas-ready .electric-coin-canvas{
  opacity:1;
}

.interactive-electric-coin-preview-candidate .role-token.electric-coin.is-atlas-ready .electric-coin-animation,
.interactive-electric-coin-preview-candidate .role-token.electric-coin.is-atlas-ready .electric-coin-fallback{
  visibility:hidden;
  opacity:0;
}

.interactive-electric-coin-preview-candidate .electric-coin-canvas:active,
.interactive-electric-coin-preview-candidate .role-token.electric-coin.is-grabbing .electric-coin-canvas{
  cursor:grabbing;
}

.interactive-electric-coin-preview-candidate .electric-coin-canvas:focus{
  outline:0;
  border-radius:0;
  box-shadow:none;
}

/* Pointer interaction must never draw a large circle around the coin. Keep a
   restrained focus cue only for users who reach the canvas with the keyboard. */
.interactive-electric-coin-preview-candidate .role-token.electric-coin.is-keyboard-focus .electric-coin-canvas:focus-visible{
  outline:1px dashed rgba(255,210,28,.72);
  outline-offset:2px;
  border-radius:4px;
  box-shadow:none;
}

.interactive-electric-coin-preview-candidate .electric-coin-hint{
  position:absolute;
  left:50%;
  bottom:18px;
  z-index:4;
  color:rgba(213,235,246,.62);
  font-family:var(--mono);
  font-size:.54rem;
  line-height:1;
  letter-spacing:.18em;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transform:translateX(-50%);
  transition:opacity .18s linear;
}

.interactive-electric-coin-preview-candidate .role-token.electric-coin.is-atlas-ready:not(.has-been-used) .electric-coin-hint{
  opacity:1;
}

.interactive-electric-coin-preview-candidate .role-token.electric-coin.has-been-used .electric-coin-hint{
  opacity:0;
}

@media(max-width:1050px){
  .interactive-electric-coin-preview-candidate .electric-coin-canvas{
    width:190px;
    height:190px;
  }

  .interactive-electric-coin-preview-candidate .electric-coin-hint{
    bottom:14px;
    font-size:.5rem;
  }
}

@media(prefers-reduced-motion:reduce){
  .interactive-electric-coin-preview-candidate .role-token.electric-coin .electric-coin-animation,
  .interactive-electric-coin-preview-candidate .role-token.electric-coin .electric-coin-fallback,
  .interactive-electric-coin-preview-candidate .electric-coin-hint{
    transition:none;
  }
}